From 31db424b9b9149fb8b43fc1ef866cb8f84df8e9a Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Tue, 14 Feb 2017 15:35:34 -0500
Subject: [PATCH 001/150] Add info notifications for adding visualizations to
 the dashboard (#10310)

---
 src/core_plugins/kibana/public/dashboard/dashboard.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js
index 5db3bf32dff81..a41022da7f4de 100644
--- a/src/core_plugins/kibana/public/dashboard/dashboard.js
+++ b/src/core_plugins/kibana/public/dashboard/dashboard.js
@@ -118,11 +118,13 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
       $scope.addVis = function (hit) {
         pendingVisCount++;
         dashboardState.addNewPanel(hit.id, 'visualization');
+        notify.info(`Visualization successfully added to your dashbard`);
       };
 
       $scope.addSearch = function (hit) {
         pendingVisCount++;
         dashboardState.addNewPanel(hit.id, 'search');
+        notify.info(`Search successfully added to your dashbard`);
       };
 
       $scope.showEditHelpText = () => {

From bd966dbacd31032ce2083227441e16aa248dfc40 Mon Sep 17 00:00:00 2001
From: Lukas Olson <olson.lukas@gmail.com>
Date: Tue, 14 Feb 2017 16:50:08 -0700
Subject: [PATCH 002/150] Fix highlight config so it doesn't require a refresh
 to apply (#10346)

* Acknowledge doc_table:highlight config even after init

* Use highlightAll on dashboard
---
 src/core_plugins/kibana/public/dashboard/dashboard.js  |  1 +
 src/ui/public/highlight/__tests__/highlight_request.js | 10 ++++++++++
 src/ui/public/highlight/highlight_request.js           |  6 ++----
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js
index a41022da7f4de..e441bfb96b897 100644
--- a/src/core_plugins/kibana/public/dashboard/dashboard.js
+++ b/src/core_plugins/kibana/public/dashboard/dashboard.js
@@ -78,6 +78,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
       let pendingVisCount = _.size(dashboardState.getPanels());
 
       timefilter.enabled = true;
+      dash.searchSource.highlightAll(true);
       courier.setRootSearchSource(dash.searchSource);
 
       // Following the "best practice" of always have a '.' in your ng-models –
diff --git a/src/ui/public/highlight/__tests__/highlight_request.js b/src/ui/public/highlight/__tests__/highlight_request.js
index 4011f495bc8ca..0f174dd650f03 100644
--- a/src/ui/public/highlight/__tests__/highlight_request.js
+++ b/src/ui/public/highlight/__tests__/highlight_request.js
@@ -79,4 +79,14 @@ describe('getHighlightRequest', () => {
     const request = getHighlightRequest(queryStringQuery);
     expect(request.fields['*']).to.not.have.property('highlight_query');
   });
+
+  it('should enable/disable highlighting if config is changed', () => {
+    getHighlightRequest = getHighlightRequestProvider(config);
+    let request = getHighlightRequest(queryStringQuery);
+    expect(request).to.not.be(undefined);
+
+    config.set('doc_table:highlight', false);
+    request = getHighlightRequest(queryStringQuery);
+    expect(request).to.be(undefined);
+  });
 });
diff --git a/src/ui/public/highlight/highlight_request.js b/src/ui/public/highlight/highlight_request.js
index dda1ca2383ff4..82b5870668774 100644
--- a/src/ui/public/highlight/highlight_request.js
+++ b/src/ui/public/highlight/highlight_request.js
@@ -23,11 +23,9 @@ function getHighlightQuery(query) {
 }
 
 export default function getHighlightRequestProvider(config) {
-  if (!config.get('doc_table:highlight')) {
-    return _.noop;
-  }
-
   return function getHighlightRequest(query) {
+    if (!config.get('doc_table:highlight')) return;
+
     const fieldsParams = config.get('doc_table:highlight:all_fields')
       ? { highlight_query: getHighlightQuery(query) }
       : {};

From 9a3a78b88442bd2d27e93e447e050de47a339dd4 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 15 Feb 2017 08:19:19 -0800
Subject: [PATCH 003/150] Fix CheckBox and ToolBarSearchBox icon positioning.
 (#10356)

* Fix CheckBox alignment by applying box-sizing: border-box to all before and after pseudo-elements.

* Fix ToolBarSearchBox height and icon alignment.

* Make Table examples consistently use the cell liner.
---
 ui_framework/components/form/_check_box.scss  |  3 +-
 ui_framework/components/index.scss            |  5 ++
 .../components/tool_bar/_tool_bar_search.scss | 13 +++--
 ui_framework/dist/ui_framework.css            | 24 ++++++----
 .../src/views/table/controlled_table.html     | 48 ++++++++++++++-----
 .../doc_site/src/views/table/table.html       | 48 ++++++++++++++-----
 6 files changed, 101 insertions(+), 40 deletions(-)

diff --git a/ui_framework/components/form/_check_box.scss b/ui_framework/components/form/_check_box.scss
index 2d3b73ea7008a..ad5cf90581802 100644
--- a/ui_framework/components/form/_check_box.scss
+++ b/ui_framework/components/form/_check_box.scss
@@ -20,8 +20,7 @@
 
   &:before {
     position: relative;
-    top: -0.05em;
-    left: 0.15em;
+    left: 0.25em;
     font-family: FontAwesome;
     content: "\F00C";
     font-size: 1em;
diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss
index 1f919e32752b6..870485c85adf3 100644
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@@ -229,6 +229,11 @@ $verticalRhythm: 10px;
 
 * {
   box-sizing: border-box;
+
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
 }
 
 body {
diff --git a/ui_framework/components/tool_bar/_tool_bar_search.scss b/ui_framework/components/tool_bar/_tool_bar_search.scss
index 67ad2a543eb15..20905bcd93233 100644
--- a/ui_framework/components/tool_bar/_tool_bar_search.scss
+++ b/ui_framework/components/tool_bar/_tool_bar_search.scss
@@ -27,12 +27,14 @@
 .kuiToolBarSearchBox {
   flex: 1 1 auto;
   position: relative;
+  font-size: $fontSize;
 }
 
   .kuiToolBarSearchBox__icon {
     position: absolute;
-    top: 6px;
-    left: 8px;
+    top: 0.5em;
+    left: 0.7em;
+    font-size: 1em;
     font-size: 14px;
     color: #ACACAC;
   }
@@ -43,14 +45,15 @@
   .kuiToolBarSearchBox__input {
     width: 100%;
     min-width: 200px;
-    padding: 5px 12px 6px 28px;
+    padding: 4px 12px 5px 28px;
+    font-family: $font; /* 1 */
     background-color: #FFFFFF;
     color: $fontColor;
-    border: 1px solid #FFFFFF;
     border-radius: $buttonBorderRadius;
-    font-size: $fontSize;
+    font-size: 1em;
     border: 1px solid #ffffff;
     line-height: normal; /* 1 */
+    transition: border-color $formTransitionTiming;
 
     &:focus {
       @include formControlFocus;
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 87b70556c9e44..7a285748e2159 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -25,6 +25,8 @@
  */
 * {
   box-sizing: border-box; }
+  *:before, *:after {
+    box-sizing: border-box; }
 
 body {
   font-family: "Open Sans", Helvetica, Arial, sans-serif; }
@@ -302,8 +304,7 @@ body {
   transition: background-color 0.1s linear; }
   .kuiCheckBox:before {
     position: relative;
-    top: -0.05em;
-    left: 0.15em;
+    left: 0.25em;
     font-family: FontAwesome;
     content: "\F00C";
     font-size: 1em;
@@ -1663,12 +1664,14 @@ body {
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
-  position: relative; }
+  position: relative;
+  font-size: 14px; }
 
 .kuiToolBarSearchBox__icon {
   position: absolute;
-  top: 6px;
-  left: 8px;
+  top: 0.5em;
+  left: 0.7em;
+  font-size: 1em;
   font-size: 14px;
   color: #ACACAC; }
 
@@ -1678,15 +1681,18 @@ body {
 .kuiToolBarSearchBox__input {
   width: 100%;
   min-width: 200px;
-  padding: 5px 12px 6px 28px;
+  padding: 4px 12px 5px 28px;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  /* 1 */
   background-color: #FFFFFF;
   color: #191E23;
-  border: 1px solid #FFFFFF;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 1em;
   border: 1px solid #ffffff;
   line-height: normal;
-  /* 1 */ }
+  /* 1 */
+  -webkit-transition: border-color 0.1s linear;
+  transition: border-color 0.1s linear; }
   .kuiToolBarSearchBox__input:focus {
     outline: none;
     border-color: #6EADC1; }
diff --git a/ui_framework/doc_site/src/views/table/controlled_table.html b/ui_framework/doc_site/src/views/table/controlled_table.html
index 93dad0f2700ad..80128bd45f73c 100644
--- a/ui_framework/doc_site/src/views/table/controlled_table.html
+++ b/ui_framework/doc_site/src/views/table/controlled_table.html
@@ -67,13 +67,19 @@
     <tbody>
       <tr class="kuiTableRow">
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-          <input type="checkbox" class="kuiCheckBox">
+          <div class="kuiTableRowCell__liner">
+            <input type="checkbox" class="kuiCheckBox">
+          </div>
         </td>
         <td class="kuiTableRowCell">
-          <a class="kuiLink" href="#">Alligator</a>
+          <div class="kuiTableRowCell__liner">
+            <a class="kuiLink" href="#">Alligator</a>
+          </div>
         </td>
         <td class="kuiTableRowCell">
-          <div class="kuiIcon kuiIcon--success fa-check"></div>
+          <div class="kuiTableRowCell__liner">
+            <div class="kuiIcon kuiIcon--success fa-check"></div>
+          </div>
         </td>
         <td class="kuiTableRowCell">
           <div class="kuiTableRowCell__liner">
@@ -89,13 +95,19 @@
 
       <tr class="kuiTableRow">
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-          <input type="checkbox" class="kuiCheckBox">
+          <div class="kuiTableRowCell__liner">
+            <input type="checkbox" class="kuiCheckBox">
+          </div>
         </td>
         <td class="kuiTableRowCell">
-          <a class="kuiLink" href="#">Boomerang</a>
+          <div class="kuiTableRowCell__liner">
+            <a class="kuiLink" href="#">Boomerang</a>
+          </div>
         </td>
         <td class="kuiTableRowCell">
-          <div class="kuiIcon kuiIcon--success fa-check"></div>
+          <div class="kuiTableRowCell__liner">
+            <div class="kuiIcon kuiIcon--success fa-check"></div>
+          </div>
         </td>
         <td class="kuiTableRowCell">
           <div class="kuiTableRowCell__liner">
@@ -111,13 +123,19 @@
 
       <tr class="kuiTableRow">
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-          <input type="checkbox" class="kuiCheckBox">
+          <div class="kuiTableRowCell__liner">
+            <input type="checkbox" class="kuiCheckBox">
+          </div>
         </td>
         <td class="kuiTableRowCell">
-          <a class="kuiLink" href="#">Celebration</a>
+          <div class="kuiTableRowCell__liner">
+            <a class="kuiLink" href="#">Celebration</a>
+          </div>
         </td>
         <td class="kuiTableRowCell">
-          <div class="kuiIcon kuiIcon--warning fa-bolt"></div>
+          <div class="kuiTableRowCell__liner">
+            <div class="kuiIcon kuiIcon--warning fa-bolt"></div>
+          </div>
         </td>
         <td class="kuiTableRowCell">
           <div class="kuiTableRowCell__liner">
@@ -133,13 +151,19 @@
 
       <tr class="kuiTableRow">
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-          <input type="checkbox" class="kuiCheckBox">
+          <div class="kuiTableRowCell__liner">
+            <input type="checkbox" class="kuiCheckBox">
+          </div>
         </td>
         <td class="kuiTableRowCell">
-          <a class="kuiLink" href="#">Dog</a>
+          <div class="kuiTableRowCell__liner">
+            <a class="kuiLink" href="#">Dog</a>
+          </div>
         </td>
         <td class="kuiTableRowCell">
-          <div class="kuiIcon kuiIcon--error fa-warning"></div>
+          <div class="kuiTableRowCell__liner">
+            <div class="kuiIcon kuiIcon--error fa-warning"></div>
+          </div>
         </td>
         <td class="kuiTableRowCell">
           <div class="kuiTableRowCell__liner">
diff --git a/ui_framework/doc_site/src/views/table/table.html b/ui_framework/doc_site/src/views/table/table.html
index 536bcf0e08b84..e1659e1dcf6b0 100644
--- a/ui_framework/doc_site/src/views/table/table.html
+++ b/ui_framework/doc_site/src/views/table/table.html
@@ -26,13 +26,19 @@
   <tbody>
     <tr class="kuiTableRow">
       <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-        <input type="checkbox" class="kuiCheckBox">
+        <div class="kuiTableRowCell__liner">
+          <input type="checkbox" class="kuiCheckBox">
+        </div>
       </td>
       <td class="kuiTableRowCell">
-        <a class="kuiLink" href="#">Alligator</a>
+        <div class="kuiTableRowCell__liner">
+          <a class="kuiLink" href="#">Alligator</a>
+        </div>
       </td>
       <td class="kuiTableRowCell">
-        <div class="kuiIcon kuiIcon--success fa-check"></div>
+        <div class="kuiTableRowCell__liner">
+          <div class="kuiIcon kuiIcon--success fa-check"></div>
+        </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
@@ -48,13 +54,19 @@
 
     <tr class="kuiTableRow">
       <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-        <input type="checkbox" class="kuiCheckBox">
+        <div class="kuiTableRowCell__liner">
+          <input type="checkbox" class="kuiCheckBox">
+        </div>
       </td>
       <td class="kuiTableRowCell">
-        <a class="kuiLink" href="#">Boomerang</a>
+        <div class="kuiTableRowCell__liner">
+          <a class="kuiLink" href="#">Boomerang</a>
+        </div>
       </td>
       <td class="kuiTableRowCell">
-        <div class="kuiIcon kuiIcon--success fa-check"></div>
+        <div class="kuiTableRowCell__liner">
+          <div class="kuiIcon kuiIcon--success fa-check"></div>
+        </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
@@ -70,13 +82,19 @@
 
     <tr class="kuiTableRow">
       <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-        <input type="checkbox" class="kuiCheckBox">
+        <div class="kuiTableRowCell__liner">
+          <input type="checkbox" class="kuiCheckBox">
+        </div>
       </td>
       <td class="kuiTableRowCell">
-        <a class="kuiLink" href="#">Celebration</a>
+        <div class="kuiTableRowCell__liner">
+          <a class="kuiLink" href="#">Celebration</a>
+        </div>
       </td>
       <td class="kuiTableRowCell">
-        <div class="kuiIcon kuiIcon--warning fa-bolt"></div>
+        <div class="kuiTableRowCell__liner">
+          <div class="kuiIcon kuiIcon--warning fa-bolt"></div>
+        </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
@@ -92,13 +110,19 @@
 
     <tr class="kuiTableRow">
       <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-        <input type="checkbox" class="kuiCheckBox">
+        <div class="kuiTableRowCell__liner">
+          <input type="checkbox" class="kuiCheckBox">
+        </div>
       </td>
       <td class="kuiTableRowCell">
-        <a class="kuiLink" href="#">Dog</a>
+        <div class="kuiTableRowCell__liner">
+          <a class="kuiLink" href="#">Dog</a>
+        </div>
       </td>
       <td class="kuiTableRowCell">
-        <div class="kuiIcon kuiIcon--error fa-warning"></div>
+        <div class="kuiTableRowCell__liner">
+          <div class="kuiIcon kuiIcon--error fa-warning"></div>
+        </div>
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">

From 9b447c53c1e79a8585def96582d394d7325899d4 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 15 Feb 2017 08:29:49 -0800
Subject: [PATCH 004/150] Fix position of button tooltips in the Dashboard and
 Visualize listing tables. (#10358)

* Fix position of button tooltips in the Dashboard and Visualize listing tables.

* Remove redundant CSS from ToolBarSearch.
---
 .../kibana/public/dashboard/listing/dashboard_listing.html      | 2 ++
 .../kibana/public/visualize/listing/visualize_listing.html      | 2 ++
 ui_framework/components/tool_bar/_tool_bar_search.scss          | 1 -
 ui_framework/dist/ui_framework.css                              | 1 -
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
index b5c49ad7eb7f1..c4f930bda5a71 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -39,6 +39,7 @@
           aria-label="Delete selected objects"
           ng-if="listingController.getSelectedItemsCount() > 0"
           tooltip="Delete selected dashboards"
+          tooltip-append-to-body="true"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
         </button>
@@ -51,6 +52,7 @@
           data-test-subj="newDashboardLink"
           ng-if="listingController.getSelectedItemsCount() === 0"
           tooltip="Create new dashboard"
+          tooltip-append-to-body="true"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
         </a>
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
index a9885114f9b27..f4eb808c75d20 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -38,6 +38,7 @@
           ng-if="listingController.getSelectedItemsCount() > 0"
           ng-click="listingController.deleteSelectedItems()"
           tooltip="Delete selected visualizations"
+          tooltip-append-to-body="true"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
         </button>
@@ -49,6 +50,7 @@
           aria-label="Create new visualization"
           ng-if="listingController.getSelectedItemsCount() === 0"
           tooltip="Create new visualization"
+          tooltip-append-to-body="true"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
         </a>
diff --git a/ui_framework/components/tool_bar/_tool_bar_search.scss b/ui_framework/components/tool_bar/_tool_bar_search.scss
index 20905bcd93233..0bbc80dbf9f83 100644
--- a/ui_framework/components/tool_bar/_tool_bar_search.scss
+++ b/ui_framework/components/tool_bar/_tool_bar_search.scss
@@ -35,7 +35,6 @@
     top: 0.5em;
     left: 0.7em;
     font-size: 1em;
-    font-size: 14px;
     color: #ACACAC;
   }
 
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 7a285748e2159..0a4c9aa4fa5ab 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1672,7 +1672,6 @@ body {
   top: 0.5em;
   left: 0.7em;
   font-size: 1em;
-  font-size: 14px;
   color: #ACACAC; }
 
 /**

From 4c85fd4954b2f7bdb9a02e2d1cbc3e3b752f7444 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Wed, 15 Feb 2017 17:54:42 +0100
Subject: [PATCH 005/150] Vislib Point Series Charts (#9642)

* adding vislib chart grid

* updating vislib to correctly render all new features

* adding new options to kibana visualizations

* update vis icon on save

* updating documentation

* fixing unit tests

* cleaning up

* updating based on UI review

* adding visualize editor unit tests

* selenium tests

* additional option tabs

* some more changes to the tabs/options [thanks CJ]

* going back from Category/Value axis to X/Y axis

* fixing unselected dropdown options

* updating based on last UI review

* updating based on last review

* updating based on last review

* fixing issue with axis titles

* allowing to specify only upper or only lower data bound

* updating based on brandons review

* fixing horizontal bar chart labels

* fixing test

* adding backward compatibility

* updating based on last review

* fixing selenium tests
---
 docs/visualize.asciidoc                       |  11 +-
 docs/visualize/area.asciidoc                  |  76 -----
 docs/visualize/line.asciidoc                  |  69 -----
 docs/visualize/vertbar.asciidoc               |  78 ------
 docs/visualize/xychart.asciidoc               | 126 +++++++++
 .../kbn_vislib_vis_types/public/area.js       | 117 ++++++--
 .../controls/point_series/category_axis.html  | 113 ++++++++
 .../controls/point_series/category_axis.js    |  32 +++
 .../public/controls/point_series/grid.html    |  48 ++++
 .../public/controls/point_series/grid.js      |  15 +
 .../public/controls/point_series/index.js     |   4 +
 .../public/controls/point_series/series.html  | 118 ++++++++
 .../public/controls/point_series/series.js    |  83 ++++++
 .../controls/point_series/value_axes.html     | 261 ++++++++++++++++++
 .../controls/point_series/value_axes.js       | 161 +++++++++++
 .../public/editors/__tests__/point_series.js  | 111 ++++++++
 .../public/editors/area.html                  |  11 -
 .../public/editors/histogram.html             |  13 -
 .../public/editors/line.html                  |  23 --
 .../public/editors/point_series.html          |  57 ++++
 .../kbn_vislib_vis_types/public/histogram.js  | 114 ++++++--
 .../public/horizontal_bar.js                  | 157 +++++++++++
 .../public/kbn_vislib_vis_types.js            |   2 +
 .../kbn_vislib_vis_types/public/line.js       |  86 ++++--
 .../public/visualize/editor/editor.html       |   2 +-
 .../kibana/public/visualize/editor/editor.js  |   1 +
 .../public/visualize/editor/sidebar.html      |  16 +-
 .../public/visualize/editor/vis_options.js    |   3 +-
 .../point_series/__tests__/_add_to_siri.js    |   8 +-
 .../point_series/__tests__/_get_series.js     |   4 +-
 .../agg_response/point_series/_add_to_siri.js |   5 +-
 .../agg_response/point_series/_get_series.js  |   4 +-
 src/ui/public/styles/base.less                |  10 +
 src/ui/public/vis/__tests__/_vis.js           |   1 -
 src/ui/public/vis/vis_type.js                 |   6 +
 .../public/vislib/__tests__/lib/axis/axis.js  | 228 +++++++++++++++
 src/ui/public/vislib/lib/axis/axis.js         | 140 ++--------
 src/ui/public/vislib/lib/axis/axis_config.js  |   7 +-
 src/ui/public/vislib/lib/axis/axis_labels.js  |  37 ++-
 src/ui/public/vislib/lib/axis/axis_title.js   |   9 +-
 src/ui/public/vislib/lib/chart_grid.js        |  79 ++++++
 src/ui/public/vislib/lib/data.js              |   9 +-
 src/ui/public/vislib/lib/handler.js           |   3 +
 src/ui/public/vislib/lib/types/index.js       |   1 +
 .../public/vislib/lib/types/point_series.js   |  50 +++-
 src/ui/public/vislib/lib/vis_config.js        |   3 +-
 src/ui/public/vislib/styles/_layout.less      |   4 +
 src/ui/public/vislib/styles/_svg.less         |   7 +-
 .../vislib/visualizations/point_series.js     |  11 +-
 .../point_series/_point_series.js             |   6 +-
 .../visualizations/point_series/area_chart.js |   5 +-
 .../point_series/column_chart.js              |   8 +-
 .../visualizations/point_series/line_chart.js |   6 +-
 .../public/vislib_vis_type/vislib_vis_type.js |  40 +++
 .../functional/apps/visualize/_chart_types.js |   2 +-
 .../apps/visualize/_metric_chart.js           |  18 +-
 .../apps/visualize/_point_series_options.js   | 192 +++++++++++++
 .../apps/visualize/_vertical_bar_chart.js     |   2 +-
 test/functional/apps/visualize/index.js       |   1 +
 test/support/page_objects/index.js            |   7 +
 test/support/page_objects/visualize_page.js   |  30 +-
 .../visualize_point_series_options.js         | 171 ++++++++++++
 62 files changed, 2461 insertions(+), 561 deletions(-)
 delete mode 100644 docs/visualize/area.asciidoc
 delete mode 100644 docs/visualize/line.asciidoc
 delete mode 100644 docs/visualize/vertbar.asciidoc
 create mode 100644 docs/visualize/xychart.asciidoc
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.js
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.js
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/index.js
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js
 delete mode 100644 src/core_plugins/kbn_vislib_vis_types/public/editors/area.html
 delete mode 100644 src/core_plugins/kbn_vislib_vis_types/public/editors/histogram.html
 delete mode 100644 src/core_plugins/kbn_vislib_vis_types/public/editors/line.html
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html
 create mode 100644 src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
 create mode 100644 src/ui/public/vislib/__tests__/lib/axis/axis.js
 create mode 100644 src/ui/public/vislib/lib/chart_grid.js
 create mode 100644 test/functional/apps/visualize/_point_series_options.js
 create mode 100644 test/support/page_objects/visualize_point_series_options.js

diff --git a/docs/visualize.asciidoc b/docs/visualize.asciidoc
index d624b252897a8..36c7b713356cb 100644
--- a/docs/visualize.asciidoc
+++ b/docs/visualize.asciidoc
@@ -25,10 +25,8 @@ To create a visualization:
 . Choose the visualization type:
 +
 [horizontal]
-<<area-chart,Area chart>>:: Visualize the total contribution of several
-different series.
+<<xy-chart,Line, Area and Bar chart>>:: Compare different series in X/Y charts.
 <<data-table,Data table>>:: Display the raw data of a composed aggregation.
-<<line-chart,Line chart>>:: Compare different series.
 <<markdown-widget,Markdown widget>>:: Display free-form information or
 instructions.
 <<metric-chart,Metric>>:: Display a single number.
@@ -38,7 +36,6 @@ instructions.
 locations.
 Timeseries:: Compute and combine data from multiple time series
 data sets.
-<<vertical-bar-chart,Vertical bar chart>>:: Graph values in a bar chart.
 
 . Specify a search query to retrieve the data for your visualization:
 ** To enter new search criteria, select the index pattern for the indices that
@@ -104,12 +101,10 @@ For more information about working with sub aggregations, see
 https://www.elastic.co/blog/kibana-aggregation-execution-order-and-you[Kibana,
 Aggregation Execution Order, and You].
 
-include::visualize/area.asciidoc[]
+include::visualize/xychart.asciidoc[]
 
 include::visualize/datatable.asciidoc[]
 
-include::visualize/line.asciidoc[]
-
 include::visualize/markdown.asciidoc[]
 
 include::visualize/metric.asciidoc[]
@@ -118,8 +113,6 @@ include::visualize/pie.asciidoc[]
 
 include::visualize/tilemap.asciidoc[]
 
-include::visualize/vertbar.asciidoc[]
-
 include::visualize/tagcloud.asciidoc[]
 
 include::visualize/heatmap.asciidoc[]
diff --git a/docs/visualize/area.asciidoc b/docs/visualize/area.asciidoc
deleted file mode 100644
index a0124c67e4cd9..0000000000000
--- a/docs/visualize/area.asciidoc
+++ /dev/null
@@ -1,76 +0,0 @@
-[[area-chart]]
-== Area Charts
-
-This chart's Y axis is the _metrics_ axis. The following aggregations are available for this axis:
-
-*Count*:: The {es-ref}search-aggregations-metrics-valuecount-aggregation.html[_count_] aggregation returns a raw count of
-the elements in the selected index pattern.
-*Average*:: This aggregation returns the {es-ref}search-aggregations-metrics-avg-aggregation.html[_average_] of a numeric
-field. Select a field from the drop-down.
-*Sum*:: The {es-ref}search-aggregations-metrics-sum-aggregation.html[_sum_] aggregation returns the total sum of a numeric
-field. Select a field from the drop-down.
-*Min*:: The {es-ref}search-aggregations-metrics-min-aggregation.html[_min_] aggregation returns the minimum value of a
-numeric field. Select a field from the drop-down.
-*Max*:: The {es-ref}search-aggregations-metrics-max-aggregation.html[_max_] aggregation returns the maximum value of a
-numeric field. Select a field from the drop-down.
-*Unique Count*:: The {es-ref}search-aggregations-metrics-cardinality-aggregation.html[_cardinality_] aggregation returns
-the number of unique values in a field. Select a field from the drop-down.
-*Percentiles*:: The {es-ref}search-aggregations-metrics-percentile-aggregation.html[_percentile_] aggregation divides the
-values in a numeric field into percentile bands that you specify. Select a field from the drop-down, then specify one
-or more ranges in the *Percentiles* fields. Click the *X* to remove a percentile field. Click *+ Add* to add a
-percentile field.
-*Percentile Rank*:: The {es-ref}search-aggregations-metrics-percentile-rank-aggregation.html[_percentile ranks_]
-aggregation returns the percentile rankings for the values in the numeric field you specify. Select a numeric field
-from the drop-down, then specify one or more percentile rank values in the *Values* fields. Click the *X* to remove a
-values field. Click *+Add* to add a values field.
-
-You can add an aggregation by clicking the *+ Add Metrics* button.
-
-include::x-axis-aggs.asciidoc[]
-For example, a chart of dates with incident counts can display dates in chronological order, or you can raise the
-priority of the incident-reporting aggregation to show the most active dates first. The chronological order might show
-a time-dependent pattern in incident count, and sorting by active dates can reveal particular outliers in your data.
-
-include::color-picker.asciidoc[]
-
-You can click the *Advanced* link to display more customization options for your metrics or bucket aggregation:
-
-*Exclude Pattern*:: Specify a pattern in this field to exclude from the results.
-*Include Pattern*:: Specify a pattern in this field to include in the results.
-*JSON Input*:: A text field where you can add specific JSON-formatted properties to merge with the aggregation
-definition, as in the following example:
-
-[source,shell]
-{ "script" : "doc['grade'].value * 1.2" }
-
-NOTE: In Elasticsearch releases 1.4.3 and later, this functionality requires you to enable
-{es-ref}modules-scripting.html[dynamic Groovy scripting].
-
-The availability of these options varies depending on the aggregation you choose.
-
-Select the *Options* tab to change the following aspects of the chart:
-
-*Chart Mode*:: When you have multiple Y-axis aggregations defined for your chart, you can use this drop-down to affect
-how the aggregations display on the chart:
-
-_stacked_:: Stacks the aggregations on top of each other.
-_overlap_:: The aggregations overlap, with translucency indicating areas of overlap.
-_wiggle_:: Displays the aggregations as a https://en.wikipedia.org/wiki/Streamgraph[streamgraph].
-_percentage_:: Displays each aggregation as a proportion of the total.
-_silhouette_:: Displays each aggregation as variance from a central line.
-
-Checkboxes are available to enable and disable the following behaviors:
-
-*Line Mode*:: You can choose between straight line, smoothed line and stepped line.
-*Set Y-Axis Extents*:: Check this box and enter values in the *y-max* and *y-min* fields to set the Y axis to specific
-values.
-*Scale Y-Axis to Data Bounds*:: The default Y axis bounds are zero and the maximum value returned in the data. Check
-this box to change both upper and lower bounds to match the values returned in the data.
-*Order buckets by descending sum*:: Check this box to enforce sorting of buckets by descending sum in the visualization
-*Show Tooltip*:: Check this box to enable the display of tooltips.
-
-[float]
-[[area-viewing-detailed-information]]
-==== Viewing Detailed Information
-
-include::visualization-raw-data.asciidoc[]
diff --git a/docs/visualize/line.asciidoc b/docs/visualize/line.asciidoc
deleted file mode 100644
index 490b6bcb95d5f..0000000000000
--- a/docs/visualize/line.asciidoc
+++ /dev/null
@@ -1,69 +0,0 @@
-[[line-chart]]
-== Line Charts
-
-This chart's Y axis is the _metrics_ axis. The following aggregations are available for this axis:
-
-include::y-axis-aggs.asciidoc[]
-
-Before you choose a buckets aggregation, specify if you are splitting slices within a single chart or splitting into
-multiple charts. A multiple chart split must run before any other aggregations. When you split a chart, you can change
-if the splits are displayed in a row or a column by clicking the *Rows | Columns* selector.
-
-include::x-axis-aggs.asciidoc[]
-
-include::color-picker.asciidoc[]
-
-You can click the *Advanced* link to display more customization options for your metrics or bucket aggregation:
-
-*Exclude Pattern*:: Specify a pattern in this field to exclude from the results.
-*Exclude Pattern Flags*:: A standard set of Java flags for the exclusion pattern.
-*Include Pattern*:: Specify a pattern in this field to include in the results.
-*Include Pattern Flags*:: A standard set of Java flags for the inclusion pattern.
-*JSON Input*:: A text field where you can add specific JSON-formatted properties to merge with the aggregation
-definition, as in the following example:
-
-[source,shell]
-{ "script" : "doc['grade'].value * 1.2" }
-
-NOTE: In Elasticsearch releases 1.4.3 and later, this functionality requires you to enable
-{es-ref}modules-scripting.html[dynamic Groovy scripting].
-
-The availability of these options varies depending on the aggregation you choose.
-
-Select the *Options* tab to change the following aspects of the chart:
-
-*Y-Axis Scale*:: You can select *linear*, *log*, or *square root* scales for the chart's Y axis. You can use a log
-scale to display data that varies exponentially, such as a compounding interest chart, or a square root scale to
-regularize the display of data sets with variabilities that are themselves highly variable. This kind of data, where
-the variability is itself variable over the domain being examined, is known as _heteroscedastic_ data. For example, if
-a data set of height versus weight has a relatively narrow range of variability at the short end of height, but a wider
-range at the taller end, the data set is heteroscedastic.
-*Line Mode*:: You can choose between straight line, smoothed line and stepped line.
-*Show Connecting Lines*:: Check this box to draw lines between the points on the chart.
-*Show Circles*:: Check this box to draw each data point on the chart as a small circle.
-*Current time marker*:: For charts of time-series data, check this box to draw a red line on the current time.
-*Set Y-Axis Extents*:: Check this box and enter values in the *y-max* and *y-min* fields to set the Y axis to specific
-values.
-*Show Tooltip*:: Check this box to enable the display of tooltips.
-*Scale Y-Axis to Data Bounds*:: The default Y-axis bounds are zero and the maximum value returned in the data. Check
-this box to change both upper and lower bounds to match the values returned in the data.
-*Order buckets by descending sum*:: Check this box to enforce sorting of buckets by descending sum in the visualization
-
-After changing options, click the  *Apply changes* button to update your visualization, or the grey *Discard
-changes* button to keep your visualization in its current state.
-
-[float]
-[[bubble-chart]]
-==== Bubble Charts
-You can convert a line chart visualization to a bubble chart by performing the following steps:
-
-. Click *Add Metrics* for the visualization's Y axis, then select *Dot Size*.
-. Select a metric aggregation from the drop-down list.
-. In the *Options* tab, uncheck the *Show Connecting Lines* box.
-. Click the *Apply changes* button.
-
-[float]
-[[line-viewing-detailed-information]]
-==== Viewing Detailed Information
-
-include::visualization-raw-data.asciidoc[]
diff --git a/docs/visualize/vertbar.asciidoc b/docs/visualize/vertbar.asciidoc
deleted file mode 100644
index 35b0ea471a17a..0000000000000
--- a/docs/visualize/vertbar.asciidoc
+++ /dev/null
@@ -1,78 +0,0 @@
-[[vertical-bar-chart]]
-== Vertical Bar Charts
-
-This chart's Y axis is the _metrics_ axis. The following aggregations are available for this axis:
-
-*Count*:: The {es-ref}search-aggregations-metrics-valuecount-aggregation.html[_count_] aggregation returns a raw count of
-the elements in the selected index pattern.
-*Average*:: This aggregation returns the {es-ref}search-aggregations-metrics-avg-aggregation.html[_average_] of a numeric
-field. Select a field from the drop-down.
-*Sum*:: The {es-ref}search-aggregations-metrics-sum-aggregation.html[_sum_] aggregation returns the total sum of a numeric
-field. Select a field from the drop-down.
-*Min*:: The {es-ref}search-aggregations-metrics-min-aggregation.html[_min_] aggregation returns the minimum value of a
-numeric field. Select a field from the drop-down.
-*Max*:: The {es-ref}search-aggregations-metrics-max-aggregation.html[_max_] aggregation returns the maximum value of a
-numeric field. Select a field from the drop-down.
-*Unique Count*:: The {es-ref}search-aggregations-metrics-cardinality-aggregation.html[_cardinality_] aggregation returns
-the number of unique values in a field. Select a field from the drop-down.
-*Percentiles*:: The {es-ref}search-aggregations-metrics-percentile-aggregation.html[_percentile_] aggregation divides the
-values in a numeric field into percentile bands that you specify. Select a field from the drop-down, then specify one
-or more ranges in the *Percentiles* fields. Click the *X* to remove a percentile field. Click *+ Add* to add a
-percentile field.
-*Percentile Rank*:: The {es-ref}search-aggregations-metrics-percentile-rank-aggregation.html[_percentile ranks_]
-aggregation returns the percentile rankings for the values in the numeric field you specify. Select a numeric field
-from the drop-down, then specify one or more percentile rank values in the *Values* fields. Click the *X* to remove a
-values field. Click *+Add* to add a values field.
-
-You can add an aggregation by clicking the *+ Add Aggregation* button.
-
-Enter a string in the *Custom Label* field to change the display label.
-
-The _buckets_ aggregations determine what information is being retrieved from your data set.
-
-Before you choose a buckets aggregation, specify if you are splitting slices within a single chart or splitting into
-multiple charts. A multiple chart split must run before any other aggregations. When you split a chart, you can change
-if the splits are displayed in a row or a column by clicking the *Rows | Columns* selector.
-
-include::x-axis-aggs.asciidoc[]
-
-include::color-picker.asciidoc[]
-
-Enter a string in the *Custom Label* field to change the display label.
-
-You can click the *Advanced* link to display more customization options for your metrics or bucket aggregation:
-
-*Exclude Pattern*:: Specify a pattern in this field to exclude from the results.
-*Include Pattern*:: Specify a pattern in this field to include in the results.
-*JSON Input*:: A text field where you can add specific JSON-formatted properties to merge with the aggregation
-definition, as in the following example:
-
-[source,shell]
-{ "script" : "doc['grade'].value * 1.2" }
-
-NOTE: In Elasticsearch releases 1.4.3 and later, this functionality requires you to enable
-{es-ref}modules-scripting.html[dynamic Groovy scripting].
-
-The availability of these options varies depending on the aggregation you choose.
-
-Select the *Options* to change the following aspects of the table:
-
-*Bar Mode*:: When you have multiple Y-axis aggregations defined for your chart, you can use this drop-down to affect
-how the aggregations display on the chart:
-
-_stacked_:: Stacks the aggregations on top of each other.
-_percentage_:: Displays each aggregation as a proportion of the total.
-_grouped_:: Groups the results horizontally by the lowest-priority sub-aggregation.
-
-Checkboxes are available to enable and disable the following behaviors:
-
-*Show Tooltip*:: Check this box to enable the display of tooltips.
-*Scale Y-Axis to Data Bounds*:: The default Y axis bounds are zero and the maximum value returned in the data. Check
-this box to change both upper and lower bounds to match the values returned in the data.
-*Order buckets by descending sum*:: Check this box to enforce sorting of buckets by descending sum in the visualization
-
-[float]
-[[vertbar-viewing-detailed-information]]
-==== Viewing Detailed Information
-
-include::visualization-raw-data.asciidoc[]
diff --git a/docs/visualize/xychart.asciidoc b/docs/visualize/xychart.asciidoc
new file mode 100644
index 0000000000000..b33666b38210a
--- /dev/null
+++ b/docs/visualize/xychart.asciidoc
@@ -0,0 +1,126 @@
+[[xy-chart]]
+== X/Y Charts
+X/Y charts refer to Area, Line and Bar charts which allow you to plot your data on X/Y axis.
+
+First you need to select your _metrics_ which define Value axis. The following aggregations are available for this axis:
+
+*Count*:: The {es-ref}search-aggregations-metrics-valuecount-aggregation.html[_count_] aggregation returns a raw count of
+the elements in the selected index pattern.
+*Average*:: This aggregation returns the {es-ref}search-aggregations-metrics-avg-aggregation.html[_average_] of a numeric
+field. Select a field from the drop-down.
+*Sum*:: The {es-ref}search-aggregations-metrics-sum-aggregation.html[_sum_] aggregation returns the total sum of a numeric
+field. Select a field from the drop-down.
+*Min*:: The {es-ref}search-aggregations-metrics-min-aggregation.html[_min_] aggregation returns the minimum value of a
+numeric field. Select a field from the drop-down.
+*Max*:: The {es-ref}search-aggregations-metrics-max-aggregation.html[_max_] aggregation returns the maximum value of a
+numeric field. Select a field from the drop-down.
+*Unique Count*:: The {es-ref}search-aggregations-metrics-cardinality-aggregation.html[_cardinality_] aggregation returns
+the number of unique values in a field. Select a field from the drop-down.
+*Percentiles*:: The {es-ref}search-aggregations-metrics-percentile-aggregation.html[_percentile_] aggregation divides the
+values in a numeric field into percentile bands that you specify. Select a field from the drop-down, then specify one
+or more ranges in the *Percentiles* fields. Click the *X* to remove a percentile field. Click *+ Add* to add a
+percentile field.
+*Percentile Rank*:: The {es-ref}search-aggregations-metrics-percentile-rank-aggregation.html[_percentile ranks_]
+aggregation returns the percentile rankings for the values in the numeric field you specify. Select a numeric field
+from the drop-down, then specify one or more percentile rank values in the *Values* fields. Click the *X* to remove a
+values field. Click *+Add* to add a values field.
+
+You can add an aggregation by clicking the *+ Add Aggregation* button.
+
+Enter a string in the *Custom Label* field to change the display label.
+
+The _buckets_ aggregations determine what information is being retrieved from your data set.
+
+Before you choose a buckets aggregation, specify if you are splitting slices within a single chart or splitting into
+multiple charts. A multiple chart split must run before any other aggregations. When you split a chart, you can change
+if the splits are displayed in a row or a column by clicking the *Rows | Columns* selector.
+
+include::x-axis-aggs.asciidoc[]
+
+include::color-picker.asciidoc[]
+
+Enter a string in the *Custom Label* field to change the display label.
+
+You can click the *Advanced* link to display more customization options for your metrics or bucket aggregation:
+
+*Exclude Pattern*:: Specify a pattern in this field to exclude from the results.
+*Include Pattern*:: Specify a pattern in this field to include in the results.
+*JSON Input*:: A text field where you can add specific JSON-formatted properties to merge with the aggregation
+definition, as in the following example:
+
+[source,shell]
+{ "script" : "doc['grade'].value * 1.2" }
+
+NOTE: In Elasticsearch releases 1.4.3 and later, this functionality requires you to enable
+{es-ref}modules-scripting.html[dynamic Groovy scripting].
+
+The availability of these options varies depending on the aggregation you choose.
+
+=== Options
+
+Select the *Options* tab to change the way your data is visualized. Customization options are grouped into areas to provide easier access:
+
+==== General Settings
+
+*Legend Position*:: Allows you to move your legend to the *left*, *right*, *top* or *bottom*
+*Show Tooltip*:: Enables or disables the display of tooltip on hovering over chart objects
+*Order buckets by descending sum*:: Check this box to enforce sorting of buckets by descending sum in the visualization
+
+==== Category Axis
+The category axis is defined by the bucket aggregation you chose under Data tab. Here you can customize how its displayed:
+
+*Show*:: You can chose if you want to display category axis or not
+*Position*:: You can choose where you want to display category axis. If you position your category axis on the left or right the chart will turn to the horizontal type.
+*Advanced Options*::
+*Labels - Show Labels*:::: Allows you to hide axis labels
+*Labels - Filter Labels*:::: If filter labels is enabled some labels will be hidden in case there is not enough space to display them
+*Labels - Rotate*:::: You can enter the number in degrees for how much you want to rotate labels
+*Labels - Truncate*:::: You can enter the size in pixels to which the label is truncated
+
+==== Grid
+You can enable grid on the chart. By default grid is displayed on the category axis only.
+
+*Category Lines*:: You can disable the display of grid lines on category axis
+*Value Axis*:: You can choose on which (if any) of the value axes you want to display grid lines
+*Color*:: You can specify the color for gird lines 
+
+==== Value Axes
+By default one value axis is defined on a chart, but you can add as much as you need. Clicking on the + sign will create a new value axis.
+
+Each value axis has this options:
+
+*Show*:: You can decide to hide the value axis completely
+*Label*:: Allows to define a custom label
+*Position*:: Options for position depend on the position of your category axis. If category axis is positioned on the top or bottom you can position value axis on the left or right. In the opposite case you can position your value axis on the top or bottom.
+*Mode*:: Mode allows you to define how value axis represents the values. You can choose among the following:
+_wiggle_:::: Displays the aggregations as a https://en.wikipedia.org/wiki/Streamgraph[streamgraph].
+_percentage_:::: Displays each aggregation as a proportion of the total.
+_silhouette_:::: Displays each aggregation as variance from a central line.
+*Scale Type*:: Allows you to choose between *linear*, *square root* and *log* scale
+
+*Advanced Options*::
+*Labels - Show Labels*:::: Allows you to hide axis labels
+*Labels - Filter Labels*:::: If filter labels is enabled some labels will be hidden in case there is not enough spave to display them
+*Labels - Rotate*:::: You can enter the number in degrees for how much you want to rotate labels
+*Labels - Truncate*:::: You can enter the size in pixels to which the label is truncated
+*Scale to Data Bounds*:::: The default Y axis bounds are zero and the maximum value returned in the data. Check
+                           this box to change both upper and lower bounds to match the values returned in the data.
+*Custom Extents*:::: You can define custom minimum and maximum for each axis
+
+==== Series
+Each of the *Series* represents a metric you added in the data tab. For each Series you can define the following options:
+
+*Show*:: Allows you to hide specific series.
+*Type*:: Allows you to choose between *Area*, *Line* and *Histogram* types. This allows you to show each metrics as a different chart type.
+*Mode*:: Allows you to choose how your values are showed on the chart. 
+_stacked_:::: Values for this series will be stacked. Stacking happens per value axis. This means that if you have two series on one value axis and both modes are set to stacked they will be stacked on top of each other. If one of the series modes is set to normal the other series values (in case series are split) will be split and the second series will be grouped next to them. If you want both series to be stacked but not to be stacked on top of each other you will want to plot them on separate value axes.
+_normal_:::: In normal mode values will not be stacked.
+*Value Axis*:: You can define to which value axis this series belongs. If you dont select a value it will belong to the first value axis.
+
+Additional options might be available depending the on the *type* selected. For Area and Line types you can decide to smooth the lines. And for Line chart you can decide to not show lines or circles.
+
+[float]
+[[vertbar-viewing-detailed-information]]
+== Viewing Detailed Information
+
+include::visualization-raw-data.asciidoc[]
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/src/core_plugins/kbn_vislib_vis_types/public/area.js
index 15db616bf203b..bd2175ac09db4 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/area.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/area.js
@@ -1,8 +1,8 @@
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
-import areaTemplate from 'plugins/kbn_vislib_vis_types/editors/area.html';
+import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html';
 
-export default function HistogramVisType(Private) {
+export default function PointSeriesVisType(Private) {
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
@@ -11,35 +11,87 @@ export default function HistogramVisType(Private) {
     title: 'Area chart',
     icon: 'fa-area-chart',
     description: 'Great for stacked timelines in which the total of all series is more important ' +
-      'than comparing any two or more series. Less useful for assessing the relative change of ' +
-      'unrelated data points as changes in a series lower down the stack will have a difficult to gauge ' +
-      'effect on the series above it.',
+    'than comparing any two or more series. Less useful for assessing the relative change of ' +
+    'unrelated data points as changes in a series lower down the stack will have a difficult to gauge ' +
+    'effect on the series above it.',
     params: {
       defaults: {
+        grid: {
+          categoryLines: false,
+          style: {
+            color: '#eee'
+          }
+        },
+        categoryAxes: [
+          {
+            id: 'CategoryAxis-1',
+            type: 'category',
+            position: 'bottom',
+            show: true,
+            style: {
+            },
+            scale: {
+              type: 'linear'
+            },
+            labels: {
+              show: true,
+              truncate: 100
+            },
+            title: {}
+          }
+        ],
+        valueAxes: [
+          {
+            id: 'ValueAxis-1',
+            name: 'LeftAxis-1',
+            type: 'value',
+            position: 'left',
+            show: true,
+            style: {
+            },
+            scale: {
+              type: 'linear',
+              mode: 'normal'
+            },
+            labels: {
+              show: true,
+              rotate: 0,
+              filter: false,
+              truncate: 100
+            },
+            title: {}
+          }
+        ],
+        seriesParams: [{
+          show: 'true',
+          type: 'area',
+          mode: 'stacked',
+          data: {
+            label: 'Count'
+          },
+          drawLinesBetweenPoints: true,
+          showCircles: true,
+          interpolate: 'linear',
+          valueAxis: 'ValueAxis-1'
+        }],
         addTooltip: true,
         addLegend: true,
         legendPosition: 'right',
-        scale: 'linear',
+        showCircles: true,
         interpolate: 'linear',
-        mode: 'stacked',
+        scale: 'linear',
+        drawLinesBetweenPoints: true,
+        radiusRatio: 9,
         times: [],
         addTimeMarker: false,
         defaultYExtents: false,
         setYExtents: false
       },
-      legendPositions: [{
-        value: 'left',
-        text: 'left',
-      }, {
-        value: 'right',
-        text: 'right',
-      }, {
-        value: 'top',
-        text: 'top',
-      }, {
-        value: 'bottom',
-        text: 'bottom',
-      }],
+      positions: ['top', 'left', 'right', 'bottom'],
+      chartTypes: ['line', 'area', 'histogram'],
+      axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
+      scaleTypes: ['linear', 'log', 'square root'],
+      chartModes: ['normal', 'stacked'],
       interpolationModes: [{
         value: 'linear',
         text: 'straight',
@@ -50,22 +102,35 @@ export default function HistogramVisType(Private) {
         value: 'step-after',
         text: 'stepped',
       }],
-      scales: ['linear', 'log', 'square root'],
-      modes: ['stacked', 'overlap', 'percentage', 'wiggle', 'silhouette'],
-      editor: areaTemplate
+      editor: pointSeriesTemplate,
+      optionTabs: [
+        {
+          name: 'advanced',
+          title: 'Metrics & Axes',
+          editor: '<div><vislib-series></vislib-series><vislib-value-axes>' +
+          '</vislib-value-axes><vislib-category-axis></vislib-category-axis></div>'
+        },
+        { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate },
+      ],
     },
-    implementsRenderComplete: true,
     schemas: new Schemas([
       {
         group: 'metrics',
         name: 'metric',
         title: 'Y-Axis',
         min: 1,
-        aggFilter: '!std_dev',
         defaults: [
           { schema: 'metric', type: 'count' }
         ]
       },
+      {
+        group: 'metrics',
+        name: 'radius',
+        title: 'Dot Size',
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality']
+      },
       {
         group: 'buckets',
         name: 'segment',
@@ -77,7 +142,7 @@ export default function HistogramVisType(Private) {
       {
         group: 'buckets',
         name: 'group',
-        title: 'Split Area',
+        title: 'Split Series',
         min: 0,
         max: 1,
         aggFilter: '!geohash_grid'
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
new file mode 100644
index 0000000000000..d52dff6461f05
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
@@ -0,0 +1,113 @@
+<div class="kuiSideBarSection kuiSideBarSection__main">
+  <div class="kuiSideBarSectionTitle">
+    <div class="kuiSideBarSectionTitle__text">
+      X-Axis
+    </div>
+  </div>
+
+  <!-- General -->
+  <div class="kuiSideBarSection">
+    <div class="kuiSideBarFormRow">
+      <label class="kuiSideBarFormRow__label" for="categoryAxisShow">
+        Show
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="vis.params.categoryAxes[0].show">
+      </div>
+    </div>
+
+    <div class="kuiSideBarFormRow">
+      <label class="kuiSideBarFormRow__label" for="categoryAxisPosition">
+        Position
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <select
+          id="categoryAxisPosition"
+          class="kuiSelect kuiSideBarSelect"
+          ng-model="vis.params.categoryAxes[0].position"
+          ng-options="mode for mode in vis.type.params.positions"
+        ></select>
+      </div>
+    </div>
+  </div>
+
+  <!-- Advanced options -->
+  <div class="kuiSideBarSection">
+    <a
+      href=""
+      class="kuiSideBarOptionsLink"
+      ng-click="isCategoryAxisAdvancedOptionsOpen = !isCategoryAxisAdvancedOptionsOpen"
+    >
+      <span
+        aria-hidden="true"
+        ng-class="{ 'fa-caret-down': isCategoryAxisAdvancedOptionsOpen, 'fa-caret-right': !isCategoryAxisAdvancedOptionsOpen }"
+        class="fa fa-caret-right kuiSideBarOptionsLink__caret"
+      ></span>
+      <span class="kuiSideBarOptionsLink__text">
+        <span ng-show="!isCategoryAxisAdvancedOptionsOpen">
+          Show
+        </span>
+        <span ng-show="isCategoryAxisAdvancedOptionsOpen">
+          Hide
+        </span>
+        Advanced Options
+      </span>
+    </a>
+
+    <div ng-show="isCategoryAxisAdvancedOptionsOpen">
+      <!-- Labels -->
+      <div class="kuiSideBarSection">
+        <h6 class="kuiSideBarFormSectionTitle">
+          Labels
+        </h6>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="showLabels">
+            Show Labels
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.categoryAxes[0].labels.show">
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="showFilter">
+            Filter Labels
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <input class="kuiCheckBox" id="showFilter" type="checkbox" ng-model="vis.params.categoryAxes[0].labels.filter">
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="rotateLabels">
+            Rotate
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="rotateLabels"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="vis.params.categoryAxes[0].labels.rotate"
+              ng-options="mode.value as mode.name for mode in rotateOptions"
+            ></select>
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="truncateLabels">
+            Truncate
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <input
+              id="truncateLabels"
+              class="kuiInput kuiSideBarInput"
+              type="number"
+              ng-model="vis.params.categoryAxes[0].labels.truncate"
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.js
new file mode 100644
index 0000000000000..c54951c9c183c
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.js
@@ -0,0 +1,32 @@
+import uiModules from 'ui/modules';
+import vislibValueAxesTemplate from 'plugins/kbn_vislib_vis_types/controls/point_series/category_axis.html';
+const module = uiModules.get('kibana');
+
+module.directive('vislibCategoryAxis', function () {
+  return {
+    restrict: 'E',
+    template: vislibValueAxesTemplate,
+    replace: true,
+    link: function ($scope) {
+      $scope.rotateOptions = [
+        { name: 'horizontal', value: 0 },
+        { name: 'vertical', value: 90 },
+        { name: 'angled', value: 75 },
+      ];
+
+      let lastAxisTitle = '';
+      $scope.$watch(() => {
+        return $scope.vis.aggs.map(agg => {
+          return agg.params.field ? agg.makeLabel() : '';
+        }).join();
+      }, () => {
+        const agg = $scope.vis.aggs.find(agg => agg.schema.name === 'segment');
+        const label = agg ? agg.makeLabel() : '';
+        if (lastAxisTitle !== label) {
+          lastAxisTitle = label;
+          $scope.vis.params.categoryAxes[0].title.text = label;
+        }
+      });
+    }
+  };
+});
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html
new file mode 100644
index 0000000000000..9dc1b16cd5812
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html
@@ -0,0 +1,48 @@
+<div>
+  <div class="kuiSideBarCollapsibleTitle">
+    <div
+      class="kuiSideBarCollapsibleTitle__label"
+      ng-click="isGridOpen = !isGridOpen"
+    >
+      <span
+        aria-hidden="true"
+        ng-class="{ 'fa-caret-down': isGridOpen, 'fa-caret-right': !isGridOpen }"
+        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+      ></span>
+      <span class="kuiSideBarCollapsibleTitle__text">
+        Grid
+      </span>
+    </div>
+  </div>
+
+  <div ng-show="isGridOpen" class="kuiSideBarCollapsibleSection">
+    <!-- General -->
+    <div class="kuiSideBarSection">
+      <div class="kuiSideBarFormRow">
+        <label class="kuiSideBarFormRow__label" for="showCategoryLines">
+          X-Axis Lines
+        </label>
+        <div class="kuiSideBarFormRow__control">
+          <input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="vis.params.grid.categoryLines">
+        </div>
+      </div>
+
+      <div class="kuiSideBarFormRow">
+        <label class="kuiSideBarFormRow__label" for="gridAxis">
+          Y-Axis Lines
+        </label>
+        <div class="kuiSideBarFormRow__control">
+          <select
+            id="gridAxis"
+            class="kuiSelect kuiSideBarSelect"
+            ng-model="vis.params.grid.valueAxis"
+            ng-options="axis.id as axis.name for axis in vis.params.valueAxes"
+          >
+            <option value="">Don't show</option>
+          </select>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.js
new file mode 100644
index 0000000000000..3a4fdb35f4b32
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.js
@@ -0,0 +1,15 @@
+import uiModules from 'ui/modules';
+import vislibGridTemplate from 'plugins/kbn_vislib_vis_types/controls/point_series/grid.html';
+const module = uiModules.get('kibana');
+
+module.directive('vislibGrid', function () {
+  return {
+    restrict: 'E',
+    template: vislibGridTemplate,
+    replace: true,
+    link: function ($scope) {
+
+      $scope.isGridOpen = true;
+    }
+  };
+});
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/index.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/index.js
new file mode 100644
index 0000000000000..8ac21c0b03421
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/index.js
@@ -0,0 +1,4 @@
+import 'plugins/kbn_vislib_vis_types/controls/point_series/value_axes.js';
+import 'plugins/kbn_vislib_vis_types/controls/point_series/category_axis.js';
+import 'plugins/kbn_vislib_vis_types/controls/point_series/series.js';
+import 'plugins/kbn_vislib_vis_types/controls/point_series/grid.js';
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
new file mode 100644
index 0000000000000..3b9a68327e6d1
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
@@ -0,0 +1,118 @@
+<div class="kuiSideBarSection kuiSideBarSection__main">
+  <div class="kuiSideBarSectionTitle">
+    <div class="kuiSideBarSectionTitle__text">
+      Metrics
+    </div>
+  </div>
+
+  <div
+    ng-repeat="chart in vis.params.seriesParams track by $index"
+    class="kuiSideBarSection"
+  >
+    <div class="kuiSideBarCollapsibleTitle">
+      <div
+        class="kuiSideBarCollapsibleTitle__label"
+        ng-click="isSeriesOpen = !isSeriesOpen"
+      >
+        <span
+          aria-hidden="true"
+          ng-class="{ 'fa-caret-down': isSeriesOpen, 'fa-caret-right': !isSeriesOpen }"
+          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+        ></span>
+        <span class="kuiSideBarCollapsibleTitle__text">
+          {{chart.data.label}}
+        </span>
+      </div>
+    </div>
+
+    <div ng-show="isSeriesOpen" class="kuiSideBarCollapsibleSection">
+      <!-- General -->
+      <div class="kuiSideBarSection">
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'seriesType' + $index }}">
+            Type
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="{{ 'seriesType' + $index }}"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="chart.type"
+              ng-options="mode for mode in vis.type.params.chartTypes"
+            ></select>
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'seriesMode' + $index }}">
+            Mode
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="{{ 'seriesMode' + $index }}"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="chart.mode"
+              ng-options="mode for mode in vis.type.params.chartModes"
+            ></select>
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'seriesValueAxis' + $index }}">
+            Value Axis
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="{{ 'seriesValueAxis' + $index }}"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="chart.valueAxis"
+              ng-change="changeValueAxis($index)"
+            >
+              <option ng-repeat="axis in vis.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
+              <option value="new">New Axis ...</option>
+            </select>
+          </div>
+        </div>
+
+        <div ng-show="chart.type == 'line' || chart.type == 'area'">
+          <div class="kuiSideBarFormRow">
+            <label class="kuiSideBarFormRow__label" for="{{ 'lineMode' + $index }}">
+              Line Mode
+            </label>
+            <div class="kuiSideBarFormRow__control">
+              <select
+                id="{{ 'lineMode' + $index }}"
+                class="kuiSelect kuiSideBarSelect"
+                ng-model="chart.interpolate"
+                ng-options="mode.value as mode.text for mode in vis.type.params.interpolationModes"
+              >
+              </select>
+            </div>
+          </div>
+        </div>
+        <div ng-show="chart.type == 'line'">
+          <div class="kuiSideBarFormRow">
+            <label class="kuiSideBarFormRow__label" for="{{ 'drawLines' + $index }}">
+              Show Line
+            </label>
+            <div class="kuiSideBarFormRow__control">
+              <input class="kuiCheckBox" id="{{ 'drawLines' + $index }}" type="checkbox" ng-model="chart.drawLinesBetweenPoints">
+            </div>
+          </div>
+
+          <div class="kuiSideBarFormRow">
+            <label class="kuiSideBarFormRow__label" for="{{ 'showCircles' + $index }}">
+              Show Circles
+            </label>
+            <div class="kuiSideBarFormRow__control">
+              <input class="kuiCheckBox" id="{{ 'showCircles' + $index }}" type="checkbox" ng-model="chart.showCircles">
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div style="height: 10px"></div>
+</div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js
new file mode 100644
index 0000000000000..74bb2c44d15dc
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js
@@ -0,0 +1,83 @@
+import _ from 'lodash';
+import uiModules from 'ui/modules';
+import vislibSeriesTemplate from 'plugins/kbn_vislib_vis_types/controls/point_series/series.html';
+const module = uiModules.get('kibana');
+
+module.directive('vislibSeries', function () {
+  return {
+    restrict: 'E',
+    template: vislibSeriesTemplate,
+    replace: true,
+    link: function ($scope) {
+      function makeSerie(label) {
+        const last = $scope.series[$scope.series.length - 1];
+        return {
+          show: true,
+          mode: last ? last.mode : 'normal',
+          type: last ? last.type : 'line',
+          drawLinesBetweenPoints: true,
+          showCircles: true,
+          interpolate: 'linear',
+          data: {
+            label: label
+          },
+          valueAxis: $scope.vis.params.valueAxes[0].id
+        };
+      }
+
+      $scope.series = $scope.vis.params.seriesParams;
+      $scope.$watch(() => {
+        return $scope.vis.aggs.map(agg => {
+          try {
+            return agg.makeLabel();
+          } catch (e) {
+            return '';
+          }
+        }).join();
+      }, () => {
+        const schemaTitle = $scope.vis.type.schemas.metrics[0].title;
+
+        const metrics = $scope.vis.aggs.filter(agg => {
+          const isMetric = agg.type && agg.type.type === 'metrics';
+          return isMetric && agg.schema.title === schemaTitle;
+        });
+
+        // update labels for existing params or create new one
+        $scope.vis.params.seriesParams = metrics.map((agg, i) => {
+          const params = $scope.vis.params.seriesParams[i];
+          if (params) {
+            params.data.label = agg.makeLabel();
+            return params;
+          } else {
+            const series = makeSerie(agg.makeLabel());
+            return series;
+          }
+        });
+      });
+
+      $scope.$watch(() => {
+        return $scope.vis.params.seriesParams.map(series => series.type).join();
+      }, () => {
+        const types = _.uniq(_.map($scope.vis.params.seriesParams, 'type'));
+        $scope.savedVis.type = types.length === 1 ? types[0] : 'histogram';
+      });
+
+      $scope.$watch('vis.params.valueAxes.length', () => {
+        $scope.vis.params.seriesParams.forEach(series => {
+          if (!$scope.vis.params.valueAxes.find(axis => axis.id === series.valueAxis)) {
+            series.valueAxis = $scope.vis.params.valueAxes[0].id;
+          }
+        });
+      });
+
+      $scope.changeValueAxis = (index) => {
+        const series = $scope.vis.params.seriesParams[index];
+        $scope.updateAxisTitle();
+        if (series.valueAxis === 'new') {
+          const axis = $scope.addValueAxis();
+          series.valueAxis = axis.id;
+        }
+      };
+    }
+  };
+});
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
new file mode 100644
index 0000000000000..0b41d1ac81648
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
@@ -0,0 +1,261 @@
+<div class="kuiSideBarSection kuiSideBarSection__main">
+  <div class="kuiSideBarSectionTitle">
+    <div class="kuiSideBarSectionTitle__text">
+      Y-Axes
+    </div>
+
+    <button
+      aria-label="Add value axis"
+      ng-click="addValueAxis()"
+      tooltip="Add value axis"
+      tooltip-append-to-body="true"
+      type="button"
+      class="fa fa-plus kuiSideBarSectionTitle__action"
+    ></button>
+  </div>
+
+  <div
+    ng-repeat="axis in vis.params.valueAxes track by axis.id"
+    class="kuiSideBarSection"
+  >
+    <div class="kuiSideBarCollapsibleTitle">
+      <div
+        class="kuiSideBarCollapsibleTitle__label"
+        ng-click="isValueAxisOpen = !isValueAxisOpen"
+      >
+        <span
+          aria-hidden="true"
+          ng-class="{ 'fa-caret-down': isValueAxisOpen, 'fa-caret-right': !isValueAxisOpen }"
+          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+        ></span>
+        <span class="kuiSideBarCollapsibleTitle__text">
+          {{axis.name}}
+        </span>
+      </div>
+
+      <div tooltip="{{getSeries(axis)}}">{{getSeriesShort(axis)}}</div>
+
+      <button
+        ng-hide="vis.params.valueAxes.length === 1"
+        aria-label="Remove value axis"
+        ng-click="removeValueAxis(axis)"
+        tooltip="Remove value axis"
+        tooltip-append-to-body="true"
+        type="button"
+        class="fa fa-remove kuiSideBarCollapsibleTitle__action"
+      ></button>
+    </div>
+
+    <div ng-show="isValueAxisOpen" class="kuiSideBarCollapsibleSection">
+      <!-- General -->
+      <div class="kuiSideBarSection">
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{ 'valueAxisShow' + $index }">
+            Show
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <input class="kuiCheckBox" id="{ 'valueAxisShow' + $index }" type="checkbox" ng-model="axis.show">
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisTitle' + $index }}">
+            Title
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <input
+              id="{{ 'valueAxisTitle' + $index }}"
+              class="kuiInput kuiSideBarInput"
+              type="text"
+              ng-model="axis.title.text"
+            >
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisPosition' + $index }}">
+            Position
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="{{ 'valueAxisPosition' + $index }}"
+              class="kuiSelect kuiSideBarSelect"
+              ng-change="updateAxisName(axis)"
+              ng-model="axis.position"
+              ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.params.positions"
+            ></select>
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisMode' + $index }}">
+            Mode
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="{{ 'valueAxisMode' + $index }}"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="axis.scale.mode"
+              ng-options="mode for mode in vis.type.params.axisModes"
+            ></select>
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="{{ 'valueAxisScaleType' + $index }}">
+            Scale Type
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="{{ 'valueAxisScaleType' + $index }}"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="axis.scale.type"
+              ng-options="type for type in vis.type.params.scaleTypes"
+            ></select>
+          </div>
+        </div>
+      </div>
+
+      <!-- Advanced options -->
+      <div class="kuiSideBarSection">
+        <a
+          href=""
+          class="kuiSideBarOptionsLink"
+          ng-click="isValueAxisAdvancedOptionsOpen = !isValueAxisAdvancedOptionsOpen"
+        >
+          <span
+            aria-hidden="true"
+            ng-class="{ 'fa-caret-down': isValueAxisAdvancedOptionsOpen, 'fa-caret-right': !isValueAxisAdvancedOptionsOpen }"
+            class="fa fa-caret-right kuiSideBarOptionsLink__caret"
+          ></span>
+          <span class="kuiSideBarOptionsLink__text">
+            <span ng-show="!isValueAxisAdvancedOptionsOpen">
+              Show
+            </span>
+            <span ng-show="isValueAxisAdvancedOptionsOpen">
+              Hide
+            </span>
+            Advanced Options
+          </span>
+        </a>
+
+        <div ng-show="isValueAxisAdvancedOptionsOpen">
+
+          <!-- Labels -->
+          <div class="kuiSideBarSection">
+            <h6 class="kuiSideBarFormSectionTitle">
+              Labels
+            </h6>
+
+            <div class="kuiSideBarFormRow">
+              <label class="kuiSideBarFormRow__label" for="showLabels">
+                Show Labels
+              </label>
+              <div class="kuiSideBarFormRow__control">
+                <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="axis.labels.show">
+              </div>
+            </div>
+
+            <div class="kuiSideBarFormRow">
+              <label class="kuiSideBarFormRow__label" for="showFilter">
+                Filter Labels
+              </label>
+              <div class="kuiSideBarFormRow__control">
+                <input class="kuiCheckBox" id="showFilter" type="checkbox" ng-model="axis.labels.filter">
+              </div>
+            </div>
+
+            <div class="kuiSideBarFormRow">
+              <label class="kuiSideBarFormRow__label" for="rotateLabels">
+                Rotate
+              </label>
+              <div class="kuiSideBarFormRow__control">
+                <select
+                  id="rotateLabels"
+                  class="kuiSelect kuiSideBarSelect"
+                  ng-model="axis.labels.rotate"
+                  ng-options="mode.value as mode.name for mode in rotateOptions"
+                ></select>
+              </div>
+            </div>
+
+            <div class="kuiSideBarFormRow">
+              <label class="kuiSideBarFormRow__label" for="truncateLabels">
+                Truncate
+              </label>
+              <div class="kuiSideBarFormRow__control">
+                <input
+                  id="truncateLabels"
+                  class="kuiInput kuiSideBarInput"
+                  type="number"
+                  ng-model="axis.labels.truncate"
+                >
+              </div>
+            </div>
+          </div>
+
+          <!-- Custom Extents -->
+          <div class="kuiSideBarSection">
+            <h6 class="kuiSideBarFormSectionTitle">
+              Custom Extents
+            </h6>
+
+            <div class="kuiSideBarFormRow">
+              <label class="kuiSideBarFormRow__label" for="{ 'defaultYExtents' + $index }">
+                Scale to Data Bounds
+              </label>
+              <div class="kuiSideBarFormRow__control">
+                <input class="kuiCheckBox" id="{ 'defaultYExtents' + $index }" type="checkbox" ng-model="axis.scale.defaultYExtents">
+              </div>
+            </div>
+
+            <div class="kuiSideBarFormRow">
+              <label class="kuiSideBarFormRow__label" for="{ 'setYExtents' + $index }">
+                Set Axis Extents
+              </label>
+              <div class="kuiSideBarFormRow__control">
+                <input class="kuiCheckBox" id="{ 'setYExtents' + $index }" type="checkbox" ng-model="axis.scale.setYExtents" ng-change="updateExtents(axis)">
+              </div>
+            </div>
+
+            <div ng-if="axis.scale.setYExtents">
+              <div class="kuiSideBarFormRow">
+                <label class="kuiSideBarFormRow__label">
+                  Max
+                </label>
+                <div class="kuiSideBarFormRow__control">
+                  <input name="yMax"
+                         class="kuiInput kuiSideBarInput"
+                         type="number"
+                         step="0.1"
+                         ng-model="axis.scale.max"
+                  >
+                </div>
+              </div>
+
+              <div class="kuiSideBarFormRow">
+                <label class="kuiSideBarFormRow__label">
+                  Min
+                </label>
+                <div class="kuiSideBarFormRow__control">
+                  <input name="yMin"
+                         class="kuiInput kuiSideBarInput"
+                         type="number"
+                         step="0.1"
+                         greater-than="{{axis.scale.type === 'log' ? 0 : ''}}"
+                         ng-model="axis.scale.min"
+                  >
+                </div>
+              </div>
+              <div ng-show="axis.scale.type === 'log' && axis.scale.min <= 0">
+                <span class="text-danger">Min must exceed 0 when a log scale is selected</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div style="height: 10px"></div>
+</div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js
new file mode 100644
index 0000000000000..2452294118545
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js
@@ -0,0 +1,161 @@
+import _ from 'lodash';
+import uiModules from 'ui/modules';
+import vislibValueAxesTemplate from 'plugins/kbn_vislib_vis_types/controls/point_series/value_axes.html';
+const module = uiModules.get('kibana');
+
+module.directive('vislibValueAxes', function () {
+  return {
+    restrict: 'E',
+    template: vislibValueAxesTemplate,
+    replace: true,
+    link: function ($scope) {
+      let isCategoryAxisHorizontal = true;
+
+      function mapPosition(position) {
+        switch (position) {
+          case 'bottom': return 'left';
+          case 'top': return 'right';
+          case 'left': return 'bottom';
+          case 'right': return 'top';
+        }
+      }
+
+      function mapPositionOposite(position) {
+        switch (position) {
+          case 'bottom': return 'top';
+          case 'top': return 'bottom';
+          case 'left': return 'right';
+          case 'right': return 'left';
+        }
+      }
+
+      $scope.rotateOptions = [
+        { name: 'horizontal', value: 0 },
+        { name: 'vertical', value: 90 },
+        { name: 'angled', value: 75 },
+      ];
+
+      $scope.$watch('vis.params.categoryAxes[0].position', position => {
+        isCategoryAxisHorizontal = ['top', 'bottom'].includes(position);
+        $scope.vis.params.valueAxes.forEach(axis => {
+          const axisIsHorizontal = ['top', 'bottom'].includes(axis.position);
+          if (axisIsHorizontal === isCategoryAxisHorizontal) {
+            axis.position = mapPosition(axis.position);
+            $scope.updateAxisName(axis);
+          }
+        });
+      });
+
+      $scope.getSeries = function (axis) {
+        const isFirst = $scope.vis.params.valueAxes[0] === axis;
+        const series = _.filter($scope.vis.params.seriesParams, series => {
+          return series.valueAxis === axis.id || (isFirst && !series.valueAxis);
+        });
+        return series.map(series => series.data.label).join(', ');
+      };
+
+      $scope.getSeriesShort = function (axis) {
+        const maxStringLength = 30;
+        return $scope.getSeries(axis).substring(0, maxStringLength);
+      };
+
+      $scope.isPositionDisabled = function (position) {
+        if (isCategoryAxisHorizontal) {
+          return ['top', 'bottom'].includes(position);
+        }
+        return ['left', 'right'].includes(position);
+      };
+
+      $scope.addValueAxis = function () {
+        const firstAxis = $scope.vis.params.valueAxes[0];
+        const newAxis = _.cloneDeep(firstAxis);
+        newAxis.id = 'ValueAxis-' + $scope.vis.params.valueAxes.reduce((value, axis) => {
+          if (axis.id.substr(0, 10) === 'ValueAxis-') {
+            const num = parseInt(axis.id.substr(10));
+            if (num >= value) value = num + 1;
+          }
+          return value;
+        }, 1);
+
+        newAxis.position = mapPositionOposite(firstAxis.position);
+        const axisName = _.capitalize(newAxis.position) + 'Axis-';
+        newAxis.name = axisName + $scope.vis.params.valueAxes.reduce((value, axis) => {
+          if (axis.name.substr(0, axisName.length) === axisName) {
+            const num = parseInt(axis.name.substr(axisName.length));
+            if (num >= value) value = num + 1;
+          }
+          return value;
+        }, 1);
+
+        $scope.vis.params.valueAxes.push(newAxis);
+        return newAxis;
+      };
+
+      $scope.removeValueAxis = function (axis) {
+        if ($scope.vis.params.valueAxes.length > 1) {
+          _.remove($scope.vis.params.valueAxes, function (valAxis) {
+            return valAxis.id === axis.id;
+          });
+        }
+      };
+
+      $scope.updateExtents = function (axis) {
+        if (!axis.scale.setYExtents) {
+          delete axis.scale.min;
+          delete axis.scale.max;
+        }
+      };
+
+      $scope.updateAxisName = function (axis) {
+        const axisName = _.capitalize(axis.position) + 'Axis-';
+        axis.name = axisName + $scope.vis.params.valueAxes.reduce((value, axis) => {
+          if (axis.name.substr(0, axisName.length) === axisName) {
+            const num = parseInt(axis.name.substr(axisName.length));
+            if (num >= value) value = num + 1;
+          }
+          return value;
+        }, 1);
+      };
+
+      const lastAxisTitles = {};
+      $scope.updateAxisTitle = function () {
+        $scope.vis.params.valueAxes.forEach((axis, axisNumber) => {
+          let label = '';
+          const isFirst = axisNumber === 0;
+          const matchingSeries = [];
+          $scope.vis.params.seriesParams.forEach((series, i) => {
+            const isMatchingSeries = (isFirst && !series.valueAxis) || (series.valueAxis === axis.id);
+            if (isMatchingSeries) {
+              let seriesNumber = 0;
+              $scope.vis.aggs.forEach(agg => {
+                if (agg.schema.name === 'metric') {
+                  if (seriesNumber === i) matchingSeries.push(agg);
+                  seriesNumber++;
+                }
+              });
+            }
+          });
+          if (matchingSeries.length === 1) {
+            label = matchingSeries[0].makeLabel();
+          }
+          if (lastAxisTitles[axis.id] !== label) {
+            lastAxisTitles[axis.id] = label;
+            axis.title.text = label;
+          }
+        });
+      };
+
+      $scope.$watch(() => {
+        return $scope.vis.aggs.map(agg => {
+          try {
+            return agg.makeLabel();
+          } catch (e) {
+            return '';
+          }
+        }).join();
+      }, () => {
+        $scope.updateAxisTitle();
+      });
+    }
+  };
+});
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js b/src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js
new file mode 100644
index 0000000000000..9fa111489cc12
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js
@@ -0,0 +1,111 @@
+import angular from 'angular';
+import _ from 'lodash';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import $ from 'jquery';
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+import LineVisTypeProvider from 'plugins/kbn_vislib_vis_types/line';
+import VisProvider from 'ui/vis';
+import AggConfigProvider from 'ui/vis/agg_config';
+
+describe('point series editor', function () {
+  let $parentScope;
+  let $scope;
+  let $container;
+  let $elem;
+  let lineVisType;
+  let Vis;
+  let indexPattern;
+  let AggConfig;
+
+  function makeConfig() {
+    return {
+      type: 'line',
+      params: lineVisType.params.defaults,
+      aggs: [
+        { type: 'count', schema: 'metric', params: { field: 'bytes' } },
+        { type: 'terms', schema: 'segment', params: { field: 'machine.os' } },
+      ],
+      listeners: { click: _.noop }
+    };
+  }
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function ($rootScope, $compile, Private) {
+    AggConfig = Private(AggConfigProvider);
+    lineVisType = Private(LineVisTypeProvider);
+    Vis = Private(VisProvider);
+    indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
+    $parentScope = $rootScope;
+    $parentScope.vis = new Vis(indexPattern, makeConfig());
+    $parentScope.savedVis = {};
+
+    // share the scope
+    //_.defaults($parentScope, $rootScope, Object.getPrototypeOf($rootScope));
+
+    $container = $(document.createElement('div'))
+      .appendTo('body');
+    // make the element
+    $elem = angular.element('<div><vislib-series></vislib-series><vislib-value-axes>' +
+      '</vislib-value-axes><vislib-category-axis></vislib-category-axis></div>');
+    $container.append($elem);
+
+    // compile the html
+    $compile($elem)($parentScope);
+
+    // Digest everything
+    $elem.scope().$digest();
+
+    // give us a scope to work with
+    $scope = $elem.isolateScope();
+  }));
+
+  afterEach(function () {
+    $container.remove();
+  });
+
+  it('should show correct series', function () {
+    expect($parentScope.vis.params.seriesParams.length).to.be(1);
+    expect($parentScope.vis.params.seriesParams[0].data.label).to.be('Count');
+  });
+
+  it('should update series when new agg is added', function () {
+    const aggConfig = new AggConfig($parentScope.vis, { type: 'avg', schema: 'metric', params: { field: 'bytes' } });
+    $parentScope.vis.aggs.push(aggConfig);
+    $parentScope.$digest();
+    expect($parentScope.vis.params.seriesParams.length).to.be(2);
+  });
+
+  it('should only allow left and right value axis position when category axis is horizontal', function () {
+    expect($parentScope.isPositionDisabled('top')).to.be(true);
+    expect($parentScope.isPositionDisabled('bottom')).to.be(true);
+    expect($parentScope.isPositionDisabled('left')).to.be(false);
+    expect($parentScope.isPositionDisabled('right')).to.be(false);
+  });
+
+  it('should only allow top and bottom value axis position when category axis is vertical', function () {
+    $parentScope.vis.params.categoryAxes[0].position = 'left';
+    $parentScope.$digest();
+    expect($parentScope.vis.params.valueAxes[0].position).to.be('bottom');
+    expect($parentScope.isPositionDisabled('top')).to.be(false);
+    expect($parentScope.isPositionDisabled('bottom')).to.be(false);
+    expect($parentScope.isPositionDisabled('left')).to.be(true);
+    expect($parentScope.isPositionDisabled('right')).to.be(true);
+  });
+
+  it('should add value axis', function () {
+    $parentScope.addValueAxis();
+    expect($parentScope.vis.params.valueAxes.length).to.be(2);
+  });
+
+  it('should remove value axis', function () {
+    $parentScope.addValueAxis();
+    $parentScope.removeValueAxis({ id: 'ValueAxis-2' });
+    expect($parentScope.vis.params.valueAxes.length).to.be(1);
+  });
+
+  it('should not allow to remove the last value axis', function () {
+    $parentScope.removeValueAxis({ id: 'ValueAxis-1' });
+    expect($parentScope.vis.params.valueAxes.length).to.be(1);
+  });
+});
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/editors/area.html b/src/core_plugins/kbn_vislib_vis_types/public/editors/area.html
deleted file mode 100644
index d19d6aa99953b..0000000000000
--- a/src/core_plugins/kbn_vislib_vis_types/public/editors/area.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- vis type specific options -->
-<div>
-  <label>
-    Chart Mode
-    <select class="form-control" ng-model="vis.params.mode"
-            ng-options="mode for mode in vis.type.params.modes"></select>
-  </label>
-</div>
-<line-interpolation-option></line-interpolation-option>
-<point-series-options></point-series-options>
-<vislib-basic-options></vislib-basic-options>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/editors/histogram.html b/src/core_plugins/kbn_vislib_vis_types/public/editors/histogram.html
deleted file mode 100644
index c25ae123fa84d..0000000000000
--- a/src/core_plugins/kbn_vislib_vis_types/public/editors/histogram.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- vis type specific options -->
-<div class="vis-option-item form-group">
-  <label>
-    Bar Mode
-  </label>
-  <select class="form-control" ng-model="vis.params.mode" ng-options="mode for mode in vis.type.params.modes"></select>
-  <label>
-    Y-Axis Scale
-  </label>
-  <select class="form-control" ng-model="vis.params.scale" ng-options="mode for mode in vis.type.params.scales"></select>
-</div>
-<point-series-options></point-series-options>
-<vislib-basic-options></vislib-basic-options>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/editors/line.html b/src/core_plugins/kbn_vislib_vis_types/public/editors/line.html
deleted file mode 100644
index d15895327efc6..0000000000000
--- a/src/core_plugins/kbn_vislib_vis_types/public/editors/line.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<div>
-  <label>
-    Y-Axis Scale
-  </label>
-  <select class="form-control" ng-model="vis.params.scale" ng-options="mode for mode in vis.type.params.scales"></select>
-<!-- vis type specific options -->
-<line-interpolation-option></line-interpolation-option>
-<div class="vis-option-item">
-  <div>
-    <label>
-      <input type="checkbox" value="{{drawLinesBetweenPoints}}" ng-disabled="!vis.params.showCircles" ng-model="vis.params.drawLinesBetweenPoints" name="drawLinesBetweenPoints" ng-checked="vis.params.drawLinesBetweenPoints">
-      Show Connecting Lines
-    </label>
-  </div>
-  <div>
-    <label>
-      <input type="checkbox" value="{{showCircles}}" ng-disabled="!vis.params.drawLinesBetweenPoints" ng-model="vis.params.showCircles" name="showCircles"  ng-checked="vis.params.showCircles">
-      Show Circles
-    </label>
-  </div>
-</div>
-<point-series-options></point-series-options>
-<vislib-basic-options></vislib-basic-options>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html b/src/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html
new file mode 100644
index 0000000000000..7b41658b81da9
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html
@@ -0,0 +1,57 @@
+<div>
+  <!-- Global settings -->
+  <div class="kuiSideBarSection">
+    <div class="kuiSideBarSectionTitle">
+      <div class="kuiSideBarSectionTitle__text">
+        Settings
+      </div>
+    </div>
+
+    <div class="kuiSideBarFormRow">
+      <label class="kuiSideBarFormRow__label" for="legendPosition">
+        Legend Position
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <select
+          id="legendPosition"
+          class="kuiSelect kuiSideBarSelect"
+          ng-model="vis.params.legendPosition"
+          ng-options="position for position in ['top', 'left', 'right', 'bottom']"
+        ></select>
+      </div>
+    </div>
+
+    <div class="kuiSideBarFormRow">
+      <label class="kuiSideBarFormRow__label" for="showCursor">
+        Show Tooltip
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <input class="kuiCheckBox" id="showCursor" type="checkbox" ng-model="vis.params.addTooltip">
+      </div>
+    </div>
+
+    <div class="kuiSideBarFormRow" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
+      <label class="kuiSideBarFormRow__label" for="currentTimeMarker">
+        Current Time Marker
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <input class="kuiCheckBox" id="currentTimeMarker" type="checkbox"
+               ng-model="vis.params.addTimeMarker"
+               ng-checked="vis.params.addTimeMarker"
+        >
+      </div>
+    </div>
+
+    <div class="kuiSideBarFormRow" ng-show="!vis.hasSchemaAgg('segment', 'date_histogram')">
+      <label class="kuiSideBarFormRow__label" for="orderBuckets">
+        Order Buckets by Sum
+      </label>
+      <div class="kuiSideBarFormRow__control">
+        <input class="kuiCheckBox" id="orderBuckets" type="checkbox" ng-model="vis.params.orderBucketsBySum">
+      </div>
+    </div>
+
+    <vislib-grid></vislib-grid>
+  </div>
+
+</div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js
index 5790e9ce98280..5bcea96fb5da3 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js
@@ -1,8 +1,8 @@
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
-import histogramTemplate from 'plugins/kbn_vislib_vis_types/editors/histogram.html';
+import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html';
 
-export default function HistogramVisType(Private) {
+export default function PointSeriesVisType(Private) {
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
@@ -14,45 +14,121 @@ export default function HistogramVisType(Private) {
     'exact numbers or percentages. If you are not sure which chart you need, you could do worse than to start here.',
     params: {
       defaults: {
+        grid: {
+          categoryLines: false,
+          style: {
+            color: '#eee'
+          }
+        },
+        categoryAxes: [
+          {
+            id: 'CategoryAxis-1',
+            type: 'category',
+            position: 'bottom',
+            show: true,
+            style: {
+            },
+            scale: {
+              type: 'linear'
+            },
+            labels: {
+              show: true,
+              truncate: 100
+            },
+            title: {}
+          }
+        ],
+        valueAxes: [
+          {
+            id: 'ValueAxis-1',
+            name: 'LeftAxis-1',
+            type: 'value',
+            position: 'left',
+            show: true,
+            style: {
+            },
+            scale: {
+              type: 'linear',
+              mode: 'normal'
+            },
+            labels: {
+              show: true,
+              rotate: 0,
+              filter: false,
+              truncate: 100
+            },
+            title: {}
+          }
+        ],
+        seriesParams: [
+          {
+            show: 'true',
+            type: 'histogram',
+            mode: 'stacked',
+            data: {
+              label: 'Count'
+            },
+            drawLinesBetweenPoints: true,
+            showCircles: true
+          }
+        ],
         addTooltip: true,
         addLegend: true,
         legendPosition: 'right',
+        showCircles: true,
+        interpolate: 'linear',
         scale: 'linear',
-        mode: 'stacked',
+        drawLinesBetweenPoints: true,
+        radiusRatio: 9,
         times: [],
         addTimeMarker: false,
         defaultYExtents: false,
         setYExtents: false
       },
-      legendPositions: [{
-        value: 'left',
-        text: 'left',
+      positions: ['top', 'left', 'right', 'bottom'],
+      chartTypes: ['line', 'area', 'histogram'],
+      axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
+      scaleTypes: ['linear', 'log', 'square root'],
+      chartModes: ['normal', 'stacked'],
+      interpolationModes: [{
+        value: 'linear',
+        text: 'straight',
       }, {
-        value: 'right',
-        text: 'right',
+        value: 'cardinal',
+        text: 'smoothed',
       }, {
-        value: 'top',
-        text: 'top',
-      }, {
-        value: 'bottom',
-        text: 'bottom',
+        value: 'step-after',
+        text: 'stepped',
       }],
-      scales: ['linear', 'log', 'square root'],
-      modes: ['stacked', 'percentage', 'grouped'],
-      editor: histogramTemplate
+      editor: pointSeriesTemplate,
+      optionTabs: [
+        {
+          name: 'advanced',
+          title: 'Metrics & Axes',
+          editor: '<div><vislib-series></vislib-series><vislib-value-axes>' +
+          '</vislib-value-axes><vislib-category-axis></vislib-category-axis></div>'
+        },
+        { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate },
+      ],
     },
-    implementsRenderComplete: true,
     schemas: new Schemas([
       {
         group: 'metrics',
         name: 'metric',
         title: 'Y-Axis',
         min: 1,
-        aggFilter: '!std_dev',
         defaults: [
           { schema: 'metric', type: 'count' }
         ]
       },
+      {
+        group: 'metrics',
+        name: 'radius',
+        title: 'Dot Size',
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality']
+      },
       {
         group: 'buckets',
         name: 'segment',
@@ -64,7 +140,7 @@ export default function HistogramVisType(Private) {
       {
         group: 'buckets',
         name: 'group',
-        title: 'Split Bars',
+        title: 'Split Series',
         min: 0,
         max: 1,
         aggFilter: '!geohash_grid'
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
new file mode 100644
index 0000000000000..56da8ae6ab042
--- /dev/null
+++ b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
@@ -0,0 +1,157 @@
+import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
+import VisSchemasProvider from 'ui/vis/schemas';
+import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html';
+
+export default function PointSeriesVisType(Private) {
+  const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
+  const Schemas = Private(VisSchemasProvider);
+
+  return new VislibVisType({
+    name: 'horizontal_bar',
+    title: 'Horizontal bar chart',
+    icon: 'fa-bars',
+    description: 'Like histogram chart but with horizontal bars.',
+    params: {
+      defaults: {
+        grid: {
+          categoryLines: false,
+          style: {
+            color: '#eee'
+          }
+        },
+        categoryAxes: [
+          {
+            id: 'CategoryAxis-1',
+            type: 'category',
+            position: 'left',
+            show: true,
+            style: {
+            },
+            scale: {
+              type: 'linear'
+            },
+            labels: {
+              show: true,
+              rotate: 0,
+              filter: false,
+              truncate: 200
+            },
+            title: {}
+          }
+        ],
+        valueAxes: [
+          {
+            id: 'ValueAxis-1',
+            name: 'LeftAxis-1',
+            type: 'value',
+            position: 'bottom',
+            show: true,
+            style: {
+            },
+            scale: {
+              type: 'linear',
+              mode: 'normal'
+            },
+            labels: {
+              show: true,
+              rotate: 75,
+              filter: true,
+              truncate: 100
+            },
+            title: {}
+          }
+        ],
+        seriesParams: [{
+          show: true,
+          type: 'histogram',
+          mode: 'normal',
+          data: {
+            label: 'Count'
+          },
+          drawLinesBetweenPoints: true,
+          showCircles: true
+        }],
+        addTooltip: true,
+        addLegend: true,
+        legendPosition: 'right',
+        showCircles: true,
+        interpolate: 'linear',
+        scale: 'linear',
+        drawLinesBetweenPoints: true,
+        radiusRatio: 9,
+        times: [],
+        addTimeMarker: false,
+        defaultYExtents: false,
+        setYExtents: false
+      },
+      positions: ['top', 'left', 'right', 'bottom'],
+      chartTypes: ['line', 'area', 'histogram'],
+      axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
+      scaleTypes: ['linear', 'log', 'square root'],
+      chartModes: ['normal', 'stacked'],
+      interpolationModes: [{
+        value: 'linear',
+        text: 'straight',
+      }, {
+        value: 'cardinal',
+        text: 'smoothed',
+      }, {
+        value: 'step-after',
+        text: 'stepped',
+      }],
+      editor: pointSeriesTemplate,
+      optionTabs: [
+        {
+          name: 'advanced',
+          title: 'Metrics & Axes',
+          editor: '<div><vislib-series></vislib-series><vislib-value-axes>' +
+          '</vislib-value-axes><vislib-category-axis></vislib-category-axis></div>'
+        },
+        { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate },
+      ],
+    },
+    schemas: new Schemas([
+      {
+        group: 'metrics',
+        name: 'metric',
+        title: 'Y-Axis',
+        min: 1,
+        defaults: [
+          { schema: 'metric', type: 'count' }
+        ]
+      },
+      {
+        group: 'metrics',
+        name: 'radius',
+        title: 'Dot Size',
+        min: 0,
+        max: 1,
+        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality']
+      },
+      {
+        group: 'buckets',
+        name: 'segment',
+        title: 'X-Axis',
+        min: 0,
+        max: 1,
+        aggFilter: '!geohash_grid'
+      },
+      {
+        group: 'buckets',
+        name: 'group',
+        title: 'Split Series',
+        min: 0,
+        max: 1,
+        aggFilter: '!geohash_grid'
+      },
+      {
+        group: 'buckets',
+        name: 'split',
+        title: 'Split Chart',
+        min: 0,
+        max: 1,
+        aggFilter: '!geohash_grid'
+      }
+    ])
+  });
+}
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js b/src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js
index 1761907b85d47..05b23e39f17ac 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js
@@ -6,6 +6,7 @@ import pieVisTypeProvider from 'plugins/kbn_vislib_vis_types/pie';
 import areaVisTypeProvider from 'plugins/kbn_vislib_vis_types/area';
 import tileMapVisTypeProvider from 'plugins/kbn_vislib_vis_types/tile_map';
 import heatmapVisTypeProvider from 'plugins/kbn_vislib_vis_types/heatmap';
+import horizontalBarVisTypeProvider from 'plugins/kbn_vislib_vis_types/horizontal_bar';
 
 visTypes.register(histogramVisTypeProvider);
 visTypes.register(lineVisTypeProvider);
@@ -13,3 +14,4 @@ visTypes.register(pieVisTypeProvider);
 visTypes.register(areaVisTypeProvider);
 visTypes.register(tileMapVisTypeProvider);
 visTypes.register(heatmapVisTypeProvider);
+visTypes.register(horizontalBarVisTypeProvider);
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/line.js b/src/core_plugins/kbn_vislib_vis_types/public/line.js
index 2f74f681a5d3d..861b2e0e5cf89 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/line.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/line.js
@@ -1,8 +1,8 @@
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
-import lineTemplate from 'plugins/kbn_vislib_vis_types/editors/line.html';
+import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html';
 
-export default function HistogramVisType(Private) {
+export default function PointSeriesVisType(Private) {
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
@@ -11,9 +11,56 @@ export default function HistogramVisType(Private) {
     title: 'Line chart',
     icon: 'fa-line-chart',
     description: 'Often the best chart for high density time series. Great for comparing one series to another. ' +
-      'Be careful with sparse sets as the connection between points can be misleading.',
+    'Be careful with sparse sets as the connection between points can be misleading.',
     params: {
       defaults: {
+        grid: {
+          categoryLines: false,
+          style: {
+            color: '#eee'
+          }
+        },
+        categoryAxes: [
+          {
+            id: 'CategoryAxis-1',
+            type: 'category',
+            position: 'bottom',
+            show: true,
+            style: {
+            },
+            scale: {
+              type: 'linear'
+            },
+            labels: {
+              show: true,
+              truncate: 100
+            },
+            title: {}
+          }
+        ],
+        valueAxes: [
+          {
+            id: 'ValueAxis-1',
+            name: 'LeftAxis-1',
+            type: 'value',
+            position: 'left',
+            show: true,
+            style: {
+            },
+            scale: {
+              type: 'linear',
+              mode: 'normal'
+            },
+            labels: {
+              show: true,
+              rotate: 0,
+              filter: false,
+              truncate: 100
+            },
+            title: {}
+          }
+        ],
+        seriesParams: [],
         addTooltip: true,
         addLegend: true,
         legendPosition: 'right',
@@ -27,19 +74,11 @@ export default function HistogramVisType(Private) {
         defaultYExtents: false,
         setYExtents: false
       },
-      legendPositions: [{
-        value: 'left',
-        text: 'left',
-      }, {
-        value: 'right',
-        text: 'right',
-      }, {
-        value: 'top',
-        text: 'top',
-      }, {
-        value: 'bottom',
-        text: 'bottom',
-      }],
+      positions: ['top', 'left', 'right', 'bottom'],
+      chartTypes: ['line', 'area', 'histogram'],
+      axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
+      scaleTypes: ['linear', 'log', 'square root'],
+      chartModes: ['normal', 'stacked'],
       interpolationModes: [{
         value: 'linear',
         text: 'straight',
@@ -50,10 +89,17 @@ export default function HistogramVisType(Private) {
         value: 'step-after',
         text: 'stepped',
       }],
-      scales: ['linear', 'log', 'square root'],
-      editor: lineTemplate
+      editor: pointSeriesTemplate,
+      optionTabs: [
+        {
+          name: 'advanced',
+          title: 'Metrics & Axes',
+          editor: '<div><vislib-series></vislib-series><vislib-value-axes>' +
+          '</vislib-value-axes><vislib-category-axis></vislib-category-axis></div>'
+        },
+        { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate },
+      ],
     },
-    implementsRenderComplete: true,
     schemas: new Schemas([
       {
         group: 'metrics',
@@ -83,7 +129,7 @@ export default function HistogramVisType(Private) {
       {
         group: 'buckets',
         name: 'group',
-        title: 'Split Lines',
+        title: 'Split Series',
         min: 0,
         max: 1,
         aggFilter: '!geohash_grid'
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index 93021aaf27f49..db4e89fcffec0 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -75,7 +75,7 @@
                             class="vis-editor-full-options"></vis-editor-vis-options>
 
     <div class="collapsible-sidebar" ng-if="!vis.type.fullEditor && chrome.getVisible()" >
-      <vis-editor-sidebar class="vis-editor-sidebar"></vis-editor-sidebar>
+      <vis-editor-sidebar vis="editableVis" class="vis-editor-sidebar"></vis-editor-sidebar>
     </div>
 
     <div class="vis-editor-canvas" ng-if="!vis.type.fullEditor" ng-class="{ embedded: !chrome.getVisible() }">
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.js b/src/core_plugins/kibana/public/visualize/editor/editor.js
index 0d4904fea9556..54fdbbcda634d 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.js
@@ -293,6 +293,7 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
   $scope.doSave = function () {
     // vis.title was not bound and it's needed to reflect title into visState
     $state.vis.title = savedVis.title;
+    $state.vis.type = savedVis.type || $state.vis.type;
     savedVis.visState = $state.vis;
     savedVis.uiStateJSON = angular.toJson($scope.uiState.getChanges());
 
diff --git a/src/core_plugins/kibana/public/visualize/editor/sidebar.html b/src/core_plugins/kibana/public/visualize/editor/sidebar.html
index b7c5627e56f92..2037f40234e05 100644
--- a/src/core_plugins/kibana/public/visualize/editor/sidebar.html
+++ b/src/core_plugins/kibana/public/visualize/editor/sidebar.html
@@ -1,7 +1,7 @@
 <div class="sidebar-container">
   <form
     class="sidebar-list"
-    ng-submit="visualizeEditor.$invalid ? dontApply() : stageEditableVis()"
+    ng-submit="visualizeEditor.$invalid ? stageEditableVis(false) : stageEditableVis()"
     name="visualizeEditor"
     novalidate
   ><!-- see http://goo.gl/9kgz5w -->
@@ -24,13 +24,13 @@
               Data
             </a>
           </li>
-          <li ng-class="{active: sidebar.section == 'options'}">
+          <li ng-repeat="tab in vis.type.params.optionTabs" ng-class="{active: sidebar.section == tab.name}">
             <a
               class="vis-editor-subnav-link"
-              ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == 'options'}"
-              ng-click="sidebar.section='options'"
+              ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == tab.name}"
+              ng-click="sidebar.section=tab.name"
             >
-              Options
+              {{tab.title}}
             </a>
           </li>
         </ul>
@@ -86,11 +86,9 @@
       <vis-editor-agg-group ng-if="vis.type.schemas.buckets" group-name="buckets"></vis-editor-agg-group>
     </div>
 
-    <div class="vis-editor-config" ng-show="sidebar.section == 'options'">
-      <!-- vis options -->
-      <vis-editor-vis-options vis="vis" saved-vis="savedVis" ui-state="uiState"></vis-editor-vis-options>
+    <div class="vis-editor-config" ng-repeat="tab in vis.type.params.optionTabs" ng-show="sidebar.section == tab.name">
+      <vis-editor-vis-options vis="vis" saved-vis="savedVis" ui-state="uiState" editor="tab.editor"></vis-editor-vis-options>
     </div>
 
-
   </form>
 </div>
diff --git a/src/core_plugins/kibana/public/visualize/editor/vis_options.js b/src/core_plugins/kibana/public/visualize/editor/vis_options.js
index 1b8163f159b28..ae94d781a2d68 100644
--- a/src/core_plugins/kibana/public/visualize/editor/vis_options.js
+++ b/src/core_plugins/kibana/public/visualize/editor/vis_options.js
@@ -13,10 +13,11 @@ uiModules
       vis: '=',
       savedVis: '=',
       uiState: '=',
+      editor: '='
     },
     link: function ($scope, $el) {
       const $optionContainer = $el.find('.visualization-options');
-      const $editor = $compile($scope.vis.type.params.editor)($scope);
+      const $editor = $compile($scope.editor)($scope);
       $optionContainer.append($editor);
 
       $scope.$watch('vis.type.schemas.all.length', function (len) {
diff --git a/src/ui/public/agg_response/point_series/__tests__/_add_to_siri.js b/src/ui/public/agg_response/point_series/__tests__/_add_to_siri.js
index c07780bfbf0a2..5b23af025bd0e 100644
--- a/src/ui/public/agg_response/point_series/__tests__/_add_to_siri.js
+++ b/src/ui/public/agg_response/point_series/__tests__/_add_to_siri.js
@@ -13,7 +13,7 @@ describe('addToSiri', function () {
     const series = new Map();
     const point = {};
     const id = 'id';
-    addToSiri(series, point, id);
+    addToSiri(series, point, id, id, { id: id });
 
     expect(series.has(id)).to.be(true);
     expect(series.get(id)).to.be.an('object');
@@ -27,10 +27,10 @@ describe('addToSiri', function () {
     const id = 'id';
 
     const point = {};
-    addToSiri(series, point, id);
+    addToSiri(series, point, id, id, { id: id });
 
     const point2 = {};
-    addToSiri(series, point2, id);
+    addToSiri(series, point2, id, id, { id: id });
 
     expect(series.has(id)).to.be(true);
     expect(series.get(id)).to.be.an('object');
@@ -45,7 +45,7 @@ describe('addToSiri', function () {
     const id = 'id';
     const label = 'label';
     const point = {};
-    addToSiri(series, point, id, label);
+    addToSiri(series, point, id, label, { id: id });
 
     expect(series.has(id)).to.be(true);
     expect(series.get(id)).to.be.an('object');
diff --git a/src/ui/public/agg_response/point_series/__tests__/_get_series.js b/src/ui/public/agg_response/point_series/__tests__/_get_series.js
index 5c1ac921ce870..d906e4db6e541 100644
--- a/src/ui/public/agg_response/point_series/__tests__/_get_series.js
+++ b/src/ui/public/agg_response/point_series/__tests__/_get_series.js
@@ -31,7 +31,7 @@ describe('getSeries', function () {
     const chart = {
       aspects: {
         x: { i: 0 },
-        y: { i: 1, col: yCol },
+        y: { i: 1, col: yCol, agg: { id: 'id' } },
         z: { i: 2 }
       }
     };
@@ -119,7 +119,7 @@ describe('getSeries', function () {
       aspects: {
         x: { i: -1 },
         series: { i: 0, agg: agg },
-        y: { i: 1, col: { title: '0' } }
+        y: { i: 1, col: { title: '0' }, agg: agg }
       }
     };
 
diff --git a/src/ui/public/agg_response/point_series/_add_to_siri.js b/src/ui/public/agg_response/point_series/_add_to_siri.js
index 1ed56b53c3557..079dc4c6b962a 100644
--- a/src/ui/public/agg_response/point_series/_add_to_siri.js
+++ b/src/ui/public/agg_response/point_series/_add_to_siri.js
@@ -1,5 +1,5 @@
 export default function PointSeriesAddToSiri() {
-  return function addToSiri(series, point, id, label) {
+  return function addToSiri(series, point, id, label, agg) {
     id = id == null ? '' : id + '';
 
     if (series.has(id)) {
@@ -9,6 +9,9 @@ export default function PointSeriesAddToSiri() {
 
     series.set(id, {
       label: label == null ? id : label,
+      aggLabel: agg.type ? agg.type.makeLabel(agg) : label,
+      aggId: agg.parentId ? agg.parentId : agg.id,
+      count: 0,
       values: [point]
     });
   };
diff --git a/src/ui/public/agg_response/point_series/_get_series.js b/src/ui/public/agg_response/point_series/_get_series.js
index 20a1fc9fa1e27..1119f324e5069 100644
--- a/src/ui/public/agg_response/point_series/_get_series.js
+++ b/src/ui/public/agg_response/point_series/_get_series.js
@@ -15,7 +15,7 @@ export default function PointSeriesGetSeries(Private) {
     .transform(function (series, row) {
       if (!multiY) {
         const point = partGetPoint(row, aspects.y, aspects.z);
-        if (point) addToSiri(series, point, point.series);
+        if (point) addToSiri(series, point, point.series, point.series, aspects.y.agg);
         return;
       }
 
@@ -35,7 +35,7 @@ export default function PointSeriesGetSeries(Private) {
           seriesLabel = prefix + seriesLabel;
         }
 
-        addToSiri(series, point, seriesId, seriesLabel);
+        addToSiri(series, point, seriesId, seriesLabel, y.agg);
       });
 
     }, new Map())
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 4da92ce29b6d4..843aa58fba443 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -903,6 +903,7 @@ fieldset {
 .kuiSideBarSelect {
   // TODO: @include kuiSelect styles when this is moved to the UI Framework and we're using SASS.
   height: 24px;
+  width: 100%;
   font-size: 12px;
   padding: 0 15px;
 }
@@ -923,6 +924,10 @@ fieldset {
   margin-bottom: 6px;
 }
 
+.kuiSideBarSection__main {
+  margin-bottom: 25px;
+}
+
 .kuiSideBarSectionTitle {
   display: flex;
   justify-content: space-between;
@@ -931,6 +936,11 @@ fieldset {
   border-bottom: 1px solid #D4D4D4;
 }
 
+.kuiSideBarSection__main .kuiSideBarSectionTitle {
+  background-color: #E4E4E4;
+  padding: 2px 10px;
+}
+
 .kuiSideBarSectionTitle__text {
   font-size: 14px;
   font-weight: 700;
diff --git a/src/ui/public/vis/__tests__/_vis.js b/src/ui/public/vis/__tests__/_vis.js
index 0dd724a06458c..8b6fb55001312 100644
--- a/src/ui/public/vis/__tests__/_vis.js
+++ b/src/ui/public/vis/__tests__/_vis.js
@@ -92,7 +92,6 @@ describe('Vis Class', function () {
       expect(vis).to.have.property('params');
       expect(vis.params).to.have.property('addLegend', true);
       expect(vis.params).to.have.property('addTooltip', true);
-      expect(vis.params).to.have.property('mode', 'stacked');
     });
   });
 
diff --git a/src/ui/public/vis/vis_type.js b/src/ui/public/vis/vis_type.js
index 011e92b4ed06d..626e57eabd771 100644
--- a/src/ui/public/vis/vis_type.js
+++ b/src/ui/public/vis/vis_type.js
@@ -17,6 +17,12 @@ export default function VisTypeFactory(Private) {
     this.requiresSearch = opts.requiresSearch == null ? true : opts.requiresSearch; // Default to true unless otherwise specified
     this.fullEditor = opts.fullEditor == null ? false : opts.fullEditor;
     this.implementsRenderComplete = opts.implementsRenderComplete || false;
+
+    if (!this.params.optionTabs) {
+      this.params.optionTabs = [
+        { name: 'options', title: 'Options', editor: this.params.editor }
+      ];
+    }
   }
 
   VisType.prototype.createRenderbot = function (vis, $el, uiState) {
diff --git a/src/ui/public/vislib/__tests__/lib/axis/axis.js b/src/ui/public/vislib/__tests__/lib/axis/axis.js
new file mode 100644
index 0000000000000..5795163058400
--- /dev/null
+++ b/src/ui/public/vislib/__tests__/lib/axis/axis.js
@@ -0,0 +1,228 @@
+import d3 from 'd3';
+import _ from 'lodash';
+import ngMock from 'ng_mock';
+import expect from 'expect.js';
+import $ from 'jquery';
+import VislibLibDataProvider from 'ui/vislib/lib/data';
+import 'ui/persisted_state';
+import VislibLibAxisProvider from 'ui/vislib/lib/axis';
+import VislibVisConfig from 'ui/vislib/lib/vis_config';
+
+describe('Vislib Axis Class Test Suite', function () {
+  let Axis;
+  let Data;
+  let persistedState;
+  let yAxis;
+  let el;
+  let fixture;
+  let VisConfig;
+  let seriesData;
+
+  const data = {
+    hits: 621,
+    ordered: {
+      date: true,
+      interval: 30000,
+      max: 1408734982458,
+      min: 1408734082458
+    },
+    series: [
+      {
+        label: 'Count',
+        values: [
+          {
+            x: 1408734060000,
+            y: 8
+          },
+          {
+            x: 1408734090000,
+            y: 23
+          },
+          {
+            x: 1408734120000,
+            y: 30
+          },
+          {
+            x: 1408734130000,
+            y: 30
+          },
+          {
+            x: 1408734150000,
+            y: 28
+          }
+        ]
+      },
+      {
+        label: 'Count2',
+        values: [
+          {
+            x: 1408734060000,
+            y: 8
+          },
+          {
+            x: 1408734090000,
+            y: 23
+          },
+          {
+            x: 1408734120000,
+            y: 30
+          },
+          {
+            x: 1408734140000,
+            y: 30
+          },
+          {
+            x: 1408734150000,
+            y: 28
+          }
+        ]
+      }
+    ],
+    xAxisFormatter: function (thing) {
+      return new Date(thing);
+    },
+    xAxisLabel: 'Date Histogram',
+    yAxisLabel: 'Count'
+  };
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function (Private, $injector) {
+    Data = Private(VislibLibDataProvider);
+    persistedState = new ($injector.get('PersistedState'))();
+    Axis = Private(VislibLibAxisProvider);
+    VisConfig = Private(VislibVisConfig);
+
+    el = d3.select('body').append('div')
+      .attr('class', 'x-axis-wrapper')
+      .style('height', '40px');
+
+    fixture = el.append('div')
+      .attr('class', 'x-axis-div');
+
+    const visConfig = new VisConfig({
+      type: 'histogram'
+    }, data, persistedState, $('.x-axis-div')[0]);
+    yAxis = new Axis(visConfig, {
+      type: 'value',
+      id: 'ValueAxis-1'
+    });
+
+    seriesData = data.series.map(series => {
+      return series.values;
+    });
+  }));
+
+  afterEach(function () {
+    fixture.remove();
+    el.remove();
+  });
+
+  describe('_stackNegAndPosVals Method', function () {
+
+    it('should correctly stack positive values', function () {
+      const expectedResult = [
+        {
+          x: 1408734060000,
+          y: 8,
+          y0: 8
+        },
+        {
+          x: 1408734090000,
+          y: 23,
+          y0: 23
+        },
+        {
+          x: 1408734120000,
+          y: 30,
+          y0: 30
+        },
+        {
+          x: 1408734140000,
+          y: 30,
+          y0: 0
+        },
+        {
+          x: 1408734150000,
+          y: 28,
+          y0: 28
+        }
+      ];
+      const stackedData = yAxis._stackNegAndPosVals(seriesData);
+      expect(stackedData[1]).to.eql(expectedResult);
+    });
+
+    it('should correctly stack pos and neg values', function () {
+      const expectedResult = [
+        {
+          x: 1408734060000,
+          y: 8,
+          y0: 0
+        },
+        {
+          x: 1408734090000,
+          y: 23,
+          y0: 0
+        },
+        {
+          x: 1408734120000,
+          y: 30,
+          y0: 0
+        },
+        {
+          x: 1408734140000,
+          y: 30,
+          y0: 0
+        },
+        {
+          x: 1408734150000,
+          y: 28,
+          y0: 0
+        }
+      ];
+      const dataClone = _.cloneDeep(seriesData);
+      dataClone[0].forEach(value => {
+        value.y = -value.y;
+      });
+      const stackedData = yAxis._stackNegAndPosVals(dataClone);
+      expect(stackedData[1]).to.eql(expectedResult);
+    });
+
+    it('should correctly stack mixed pos and neg values', function () {
+      const expectedResult = [
+        {
+          x: 1408734060000,
+          y: 8,
+          y0: 8
+        },
+        {
+          x: 1408734090000,
+          y: 23,
+          y0: 0
+        },
+        {
+          x: 1408734120000,
+          y: 30,
+          y0: 30
+        },
+        {
+          x: 1408734140000,
+          y: 30,
+          y0: 0
+        },
+        {
+          x: 1408734150000,
+          y: 28,
+          y0: 28
+        }
+      ];
+      const dataClone = _.cloneDeep(seriesData);
+      dataClone[0].forEach((value, i) => {
+        if ((i % 2) === 1) value.y = -value.y;
+      });
+      const stackedData = yAxis._stackNegAndPosVals(dataClone);
+      expect(stackedData[1]).to.eql(expectedResult);
+    });
+
+  });
+
+});
diff --git a/src/ui/public/vislib/lib/axis/axis.js b/src/ui/public/vislib/lib/axis/axis.js
index a08bf1a99ff5b..8edd61a3c75fe 100644
--- a/src/ui/public/vislib/lib/axis/axis.js
+++ b/src/ui/public/vislib/lib/axis/axis.js
@@ -43,124 +43,21 @@ export default function AxisFactory(Private) {
 
       const stackedMode = ['normal', 'grouped'].includes(this.axisConfig.get('scale.mode'));
       if (stackedMode) {
-        this.stack.out((d, y0, y) => {
-          return this._stackNegAndPosVals(d, y0, y);
-        });
+        const self = this;
+        this.stack = this._stackNegAndPosVals;
       }
     }
 
-    /**
-     * Returns true for positive numbers
-     */
-    _isPositive(num) {
-      return num >= 0;
-    }
-
-    /**
-     * Returns true for negative numbers
-     */
-    _isNegative(num) {
-      return num < 0;
-    }
-
-    /**
-     * Adds two input values
-     */
-    _addVals(a, b) {
-      return a + b;
-    }
-
-    /**
-     * Returns the results of the addition of numbers in a filtered array.
-     */
-    _sumYs(arr, callback) {
-      const filteredArray = arr.filter(callback);
-
-      return (filteredArray.length) ? filteredArray.reduce(this._addVals) : 0;
-    }
-
-    /**
-     * Calculates the d.y0 value for stacked data in D3.
-     */
-    _calcYZero(y, arr) {
-      if (y === 0 && this._lastY0) return this._sumYs(arr, this._lastY0 > 0 ? this._isPositive : this._isNegative);
-      if (y >= 0) return this._sumYs(arr, this._isPositive);
-      return this._sumYs(arr, this._isNegative);
-    }
-
-    _getCounts(i, j) {
-      const data = this.visConfig.data.chartData();
-      const dataLengths = {};
-
-      dataLengths.charts = data.length;
-      dataLengths.stacks = dataLengths.charts ? data[i].series.length : 0;
-      dataLengths.values = dataLengths.stacks ? data[i].series[j].values.length : 0;
-
-      return dataLengths;
-    }
-
-    _createCache() {
-      const cache = {
-        index: {
-          chart: 0,
-          stack: 0,
-          value: 0
-        },
-        yValsArr: []
-      };
-
-      cache.count = this._getCounts(cache.index.chart, cache.index.stack);
-
-      return cache;
-    }
-    /**
-     * Stacking function passed to the D3 Stack Layout `.out` API.
-     * See: https://github.com/mbostock/d3/wiki/Stack-Layout
-     * It is responsible for calculating the correct d.y0 value for
-     * mixed datasets containing both positive and negative values.
-     */
-    _stackNegAndPosVals(d, y0, y) {
-      const data = this.visConfig.data.chartData();
-
-      // Storing counters and data characteristics needed to stack values properly
-      if (!this._cache) {
-        this._cache = this._createCache();
-      }
-
-      d.y0 = this._calcYZero(y, this._cache.yValsArr);
-      if (d.y0 > 0) this._lastY0 = 1;
-      if (d.y0 < 0) this._lastY0 = -1;
-      ++this._cache.index.stack;
-
-
-      // last stack, or last value, reset the stack count and y value array
-      const lastStack = (this._cache.index.stack >= this._cache.count.stacks);
-      if (lastStack) {
-        this._cache.index.stack = 0;
-        ++this._cache.index.value;
-        this._cache.yValsArr = [];
-        // still building the stack collection, push v value to array
-      } else if (y !== 0) {
-        this._cache.yValsArr.push(y);
-      }
-
-      // last value, prepare for the next chart, if one exists
-      const lastValue = (this._cache.index.value >= this._cache.count.values);
-      if (lastValue) {
-        this._cache.index.value = 0;
-        ++this._cache.index.chart;
-
-        // no more charts, reset the queue and finish
-        if (this._cache.index.chart >= this._cache.count.charts) {
-          this._cache = this._createCache();
-          return;
-        }
-
-        // get stack and value count for next chart
-        const chartSeries = data[this._cache.index.chart].series;
-        this._cache.count.stacks = chartSeries.length;
-        this._cache.count.values = chartSeries.length ? chartSeries[this._cache.index.stack].values.length : 0;
-      }
+    _stackNegAndPosVals(data) {
+      const cache = {};
+      data.forEach(series => {
+        series.forEach(value => {
+          if (!cache[value.x]) cache[value.x] = [0, 0];
+          value.y0 = cache[value.x][value.y < 0 ? 0 : 1];
+          cache[value.x][value.y < 0 ? 0 : 1] += value.y;
+        });
+      });
+      return data;
     }
 
     render() {
@@ -173,6 +70,7 @@ export default function AxisFactory(Private) {
       const elSelector = this.axisConfig.get('elSelector');
       const rootEl = this.axisConfig.get('rootEl');
       $(rootEl).find(elSelector).find('svg').remove();
+      this.axisTitle.destroy();
     }
 
     getAxis(length) {
@@ -271,13 +169,14 @@ export default function AxisFactory(Private) {
     }
 
     draw() {
+      let svg;
       const self = this;
       const config = this.axisConfig;
       const style = config.get('style');
 
       return function (selection) {
         const n = selection[0].length;
-        if (config.get('show') && self.axisTitle) {
+        if (config.get('show') && self.axisTitle && ['left', 'top'].includes(config.get('position'))) {
           self.axisTitle.render(selection);
         }
         selection.each(function () {
@@ -292,7 +191,7 @@ export default function AxisFactory(Private) {
           const axis = self.getAxis(length);
 
           if (config.get('show')) {
-            const svg = div.append('svg')
+            svg = div.append('svg')
             .attr('width', width)
             .attr('height', height);
 
@@ -313,9 +212,14 @@ export default function AxisFactory(Private) {
               .style('stroke-opacity', style.opacity);
             }
             if (self.axisLabels) self.axisLabels.render(svg);
-            svg.call(self.adjustSize());
           }
         });
+
+        if (self.axisTitle && ['right', 'bottom'].includes(config.get('position'))) {
+          self.axisTitle.render(selection);
+        }
+
+        if (svg) svg.call(self.adjustSize());
       };
     }
   }
diff --git a/src/ui/public/vislib/lib/axis/axis_config.js b/src/ui/public/vislib/lib/axis/axis_config.js
index c85f13db2fbb0..ea31c89797d72 100644
--- a/src/ui/public/vislib/lib/axis/axis_config.js
+++ b/src/ui/public/vislib/lib/axis/axis_config.js
@@ -42,7 +42,7 @@ export default function AxisConfigFactory() {
     },
     title: {
       text: '',
-      elSelector: '.axis-wrapper-{pos} .axis-title'
+      elSelector: '.axis-wrapper-{pos} .axis-div',
     }
   };
 
@@ -77,8 +77,11 @@ export default function AxisConfigFactory() {
       const typeDefaults = axisConfigArgs.type === 'category' ? categoryDefaults : valueDefaults;
       // _.defaultsDeep mutates axisConfigArgs nested values so we clone it first
       const axisConfigArgsClone = _.cloneDeep(axisConfigArgs);
+      const isCategoryAxis = axisConfigArgsClone.type === 'category';
+      const isHorizontal = axisConfigArgsClone.position && ['top', 'bottom'].includes(axisConfigArgsClone.position);
+
+      _.merge(typeDefaults, isHorizontal || isCategoryAxis ? horizontalDefaults : verticalDefaults);
       this._values = _.defaultsDeep({}, axisConfigArgsClone, typeDefaults, defaults);
-      _.merge(this._values, this.isHorizontal() ? horizontalDefaults : verticalDefaults);
 
       this._values.elSelector = this._values.elSelector.replace('{pos}', this._values.position);
       this._values.rootEl = chartConfig.get('el');
diff --git a/src/ui/public/vislib/lib/axis/axis_labels.js b/src/ui/public/vislib/lib/axis/axis_labels.js
index a525f35514117..a39f2a721d457 100644
--- a/src/ui/public/vislib/lib/axis/axis_labels.js
+++ b/src/ui/public/vislib/lib/axis/axis_labels.js
@@ -1,6 +1,5 @@
 import d3 from 'd3';
 import $ from 'jquery';
-import _ from 'lodash';
 export default function AxisLabelsFactory(Private) {
   class AxisLabels {
     constructor(axisConfig, scale) {
@@ -19,29 +18,37 @@ export default function AxisLabelsFactory(Private) {
 
         if (config.get('labels.rotate')) {
           text
-          .style('text-anchor', function () {
-            return config.get('labels.rotateAnchor') === 'center' ? 'center' : 'end';
-          })
-          .attr('dy', function () {
-            if (config.isHorizontal()) {
-              if (config.get('position') === 'top') return '-0.9em';
-              else return '0.3em';
+          .style('text-anchor', function (d, i) {
+            const currentValue = $(this).css('text-anchor');
+            const rotateDeg = config.get('labels.rotate');
+            if (!rotateDeg) return currentValue;
+            else {
+              const position = config.get('position');
+              switch (position) {
+                case 'top': return 'end';
+                case 'bottom': return 'end';
+                default:
+                  if (rotateDeg === 90 || rotateDeg === -90) return 'middle';
+                  return currentValue;
+              }
             }
-            return '0';
           })
-          .attr('dx', function () {
-            return config.isHorizontal() ? '-0.9em' : '0';
+          .attr('dy', function () {
+            return config.isHorizontal() ? '0.3em' : '0';
           })
           .attr('transform', function rotate(d, j) {
-            let rotateDeg = config.get('labels.rotate');
-            if (config.get('labels.rotateAnchor') === 'center') {
+            const position = config.get('position');
+            const rotateDeg = position === 'top' ? config.get('labels.rotate') : -config.get('labels.rotate');
+
+            if ($(this).css('text-anchor') === 'middle') {
               const coord = text[0][j].getBBox();
               const transX = ((coord.x) + (coord.width / 2));
               const transY = ((coord.y) + (coord.height / 2));
               return `rotate(${rotateDeg}, ${transX}, ${transY})`;
             } else {
-              rotateDeg = config.get('position') === 'top' ? rotateDeg : -rotateDeg;
-              return `rotate(${rotateDeg})`;
+              const transX = this.attributes.x.nodeValue;
+              const transY = this.attributes.y.nodeValue;
+              return `rotate(${rotateDeg}, ${transX}, ${transY})`;
             }
           });
         }
diff --git a/src/ui/public/vislib/lib/axis/axis_title.js b/src/ui/public/vislib/lib/axis/axis_title.js
index c0e15bf0fb78c..6b299f8dc87f6 100644
--- a/src/ui/public/vislib/lib/axis/axis_title.js
+++ b/src/ui/public/vislib/lib/axis/axis_title.js
@@ -12,6 +12,10 @@ export default function AxisTitleFactory(Private) {
       d3.select(this.axisConfig.get('rootEl')).selectAll(this.elSelector).call(this.draw());
     }
 
+    destroy() {
+      $(this.axisConfig.get('rootEl')).find(this.elSelector).find('svg').remove();
+    }
+
     draw() {
       const config = this.axisConfig;
 
@@ -23,6 +27,7 @@ export default function AxisTitleFactory(Private) {
           const div = d3.select(el);
           const width = $(el).width();
           const height = $(el).height();
+          const titlePadding = 15;
 
           const svg = div.append('svg')
           .attr('width', width)
@@ -31,9 +36,9 @@ export default function AxisTitleFactory(Private) {
           const bbox = svg.append('text')
           .attr('transform', function () {
             if (config.isHorizontal()) {
-              return 'translate(' + width / 2 + ',11)';
+              return `translate(${width / 2},${titlePadding})`;
             }
-            return 'translate(11,' + height / 2 + ') rotate(270)';
+            return `translate(${titlePadding},${height / 2}) rotate(270)`;
           })
           .attr('text-anchor', 'middle')
           .text(config.get('title.text'))
diff --git a/src/ui/public/vislib/lib/chart_grid.js b/src/ui/public/vislib/lib/chart_grid.js
new file mode 100644
index 0000000000000..ede01269b8639
--- /dev/null
+++ b/src/ui/public/vislib/lib/chart_grid.js
@@ -0,0 +1,79 @@
+import d3 from 'd3';
+import _ from 'lodash';
+export default function ChartTitleFactory(Private) {
+
+  const defaults = {
+    style: {
+      color: '#eee'
+    },
+    categoryLines: false,
+    valueAxis: undefined,
+  };
+
+  class ChartGrid {
+    constructor(handler, gridConfig) {
+      if (!gridConfig) return;
+      this._handler = handler;
+      this._values = _.defaultsDeep({}, gridConfig, defaults);
+    }
+
+    drawLine(svg, tick, axis, width, height) {
+      const isHorizontal = axis.axisConfig.isHorizontal();
+      const scale = axis.getScale();
+      svg.append('path')
+        .attr('d', () => {
+          const x0 = isHorizontal ? tick : 0;
+          const x1 = isHorizontal ? tick : width;
+          const y0 = !isHorizontal ? tick : 0;
+          const y1 = !isHorizontal ? tick : height;
+          const d3Line = d3.svg.line()
+            .x(d => isHorizontal ? scale(d[0]) : d[0])
+            .y(d => !isHorizontal ? scale(d[1]) : d[1]);
+          return d3Line([[x0, y0], [x1, y1]]);
+        })
+        .attr('fill', 'none')
+        .attr('stroke', this.get('style.color'))
+        .attr('stroke-width', 1);
+    }
+
+    drawCategoryLines(svg, width, height) {
+      const axis = this._handler.categoryAxes[0];
+      axis.getScale().ticks().forEach(tick => {
+        this.drawLine(svg, tick, axis, width, height);
+      });
+    }
+
+    drawValueLines(svg, width, height) {
+      const axis = this._handler.valueAxes.find(axis => axis.axisConfig.get('id') === this.get('valueAxis'));
+      axis.getScale().ticks().forEach(tick => {
+        this.drawLine(svg, tick, axis, width, height);
+      });
+    }
+
+    draw(width, height) {
+      const self = this;
+      return function (selection) {
+        if (!self._values) return;
+        selection.each(function () {
+          if (self.get('categoryLines')) self.drawCategoryLines(d3.select(this), width, height);
+          if (self.get('valueAxis', false)) self.drawValueLines(d3.select(this), width, height);
+        });
+      };
+    }
+
+    get(property, defaults) {
+      if (_.has(this._values, property) || typeof defaults !== 'undefined') {
+        return _.get(this._values, property, defaults);
+      } else {
+        throw new Error(`Accessing invalid config property: ${property}`);
+        return defaults;
+      }
+    }
+
+    set(property, value) {
+      return _.set(this._values, property, value);
+    }
+  }
+
+  return ChartGrid;
+}
diff --git a/src/ui/public/vislib/lib/data.js b/src/ui/public/vislib/lib/data.js
index 639fa5e9457bc..2a093cee533cb 100644
--- a/src/ui/public/vislib/lib/data.js
+++ b/src/ui/public/vislib/lib/data.js
@@ -41,6 +41,8 @@ export default function DataFactory(Private) {
             newData[key] = data[key].map(seri => {
               return {
                 label: seri.label,
+                aggLabel: seri.aggLabel,
+                aggId: seri.aggId,
                 values: seri.values.map(val => {
                   const newVal = _.clone(val);
                   newVal.aggConfig = val.aggConfig;
@@ -111,11 +113,7 @@ export default function DataFactory(Private) {
 
     shouldBeStacked(seriesConfig) {
       if (!seriesConfig) return false;
-      const isHistogram = (seriesConfig.type === 'histogram');
-      const isArea = (seriesConfig.type === 'area');
-      const stacked = (seriesConfig.mode === 'stacked');
-
-      return (isHistogram || isArea) && stacked;
+      return (seriesConfig.mode === 'stacked');
     }
 
     getStackedSeries(chartConfig, axis, series, first = false) {
@@ -135,6 +133,7 @@ export default function DataFactory(Private) {
         const id = axis.axisConfig.get('id');
         stackedData[id] = this.getStackedSeries(chartConfig, axis, data, i === 0);
         stackedData[id] = this.injectZeros(stackedData[id], handler.visConfig.get('orderBucketsBySum', false));
+        axis.axisConfig.set('stackedSeries', stackedData[id].length);
         axis.stack(_.map(stackedData[id], 'values'));
       });
       return stackedData;
diff --git a/src/ui/public/vislib/lib/handler.js b/src/ui/public/vislib/lib/handler.js
index 2e20650965ea0..6045c9b6f51eb 100644
--- a/src/ui/public/vislib/lib/handler.js
+++ b/src/ui/public/vislib/lib/handler.js
@@ -7,6 +7,7 @@ import VislibLibLayoutLayoutProvider from './layout/layout';
 import VislibLibChartTitleProvider from './chart_title';
 import VislibLibAlertsProvider from './alerts';
 import VislibAxisProvider from './axis/axis';
+import VislibGridProvider from './chart_grid';
 import VislibVisualizationsVisTypesProvider from '../visualizations/vis_types';
 
 export default function HandlerBaseClass(Private) {
@@ -15,6 +16,7 @@ export default function HandlerBaseClass(Private) {
   const ChartTitle = Private(VislibLibChartTitleProvider);
   const Alerts = Private(VislibLibAlertsProvider);
   const Axis = Private(VislibAxisProvider);
+  const Grid = Private(VislibGridProvider);
 
   /**
    * Handles building all the components of the visualization
@@ -39,6 +41,7 @@ export default function HandlerBaseClass(Private) {
       this.valueAxes = visConfig.get('valueAxes').map(axisArgs => new Axis(visConfig, axisArgs));
       this.chartTitle = new ChartTitle(visConfig);
       this.alerts = new Alerts(this, visConfig.get('alerts'));
+      this.grid = new Grid(this, visConfig.get('grid'));
 
       if (visConfig.get('type') === 'point_series') {
         this.data.stackData(this);
diff --git a/src/ui/public/vislib/lib/types/index.js b/src/ui/public/vislib/lib/types/index.js
index 350aa123bf60e..23a090293040b 100644
--- a/src/ui/public/vislib/lib/types/index.js
+++ b/src/ui/public/vislib/lib/types/index.js
@@ -11,6 +11,7 @@ export default function TypeFactory(Private) {
    */
   return {
     histogram: pointSeries.column,
+    horizontal_bar: pointSeries.column,
     line: pointSeries.line,
     pie: Private(VislibLibTypesPieProvider),
     area: pointSeries.area,
diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js
index 558b9dd68f977..c08ff9eb992d2 100644
--- a/src/ui/public/vislib/lib/types/point_series.js
+++ b/src/ui/public/vislib/lib/types/point_series.js
@@ -1,27 +1,49 @@
 import _ from 'lodash';
-import errors from 'ui/errors';
 
 export default function ColumnHandler(Private) {
 
-  const createSeries = (cfg, series) => {
-    const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(cfg.mode);
-    let interpolate = cfg.interpolate;
+  const createSerieFromParams = (cfg, seri) => {
+    const matchingSeriParams = cfg.seriesParams ? cfg.seriesParams.find(seriConfig => {
+      return seri.aggLabel === seriConfig.data.label;
+    }) : null;
+
+
+    let interpolate = matchingSeriParams ? matchingSeriParams.interpolate : cfg.interpolate;
     // for backward compatibility when loading URLs or configs we need to check smoothLines
     if (cfg.smoothLines) interpolate = 'cardinal';
 
+    if (!matchingSeriParams) {
+      const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(cfg.mode);
+      return {
+        show: true,
+        type: cfg.type || 'line',
+        mode: stacked ? 'stacked' : 'normal',
+        interpolate: interpolate,
+        drawLinesBetweenPoints: cfg.drawLinesBetweenPoints,
+        showCircles: cfg.showCircles,
+        radiusRatio: cfg.radiusRatio,
+        data: seri
+      };
+    }
+
+    return {
+      show: matchingSeriParams.show,
+      type: matchingSeriParams.type,
+      mode: matchingSeriParams.mode,
+      interpolate: interpolate,
+      valueAxis: matchingSeriParams.valueAxis,
+      drawLinesBetweenPoints: matchingSeriParams.drawLinesBetweenPoints,
+      showCircles: matchingSeriParams.showCircles,
+      radiusRatio: matchingSeriParams.radiusRatio,
+      data: seri
+    };
+  };
+
+  const createSeries = (cfg, series) => {
     return {
       type: 'point_series',
       series: _.map(series, (seri) => {
-        return {
-          show: true,
-          type: cfg.type || 'line',
-          mode: stacked ? 'stacked' : 'normal',
-          interpolate: interpolate,
-          drawLinesBetweenPoints: cfg.drawLinesBetweenPoints,
-          showCircles: cfg.showCircles,
-          radiusRatio: cfg.radiusRatio,
-          data: seri
-        };
+        return createSerieFromParams(cfg, seri);
       })
     };
   };
diff --git a/src/ui/public/vislib/lib/vis_config.js b/src/ui/public/vislib/lib/vis_config.js
index 7d1d70507bd11..16d1bda6d90ba 100644
--- a/src/ui/public/vislib/lib/vis_config.js
+++ b/src/ui/public/vislib/lib/vis_config.js
@@ -15,7 +15,8 @@ export default function VisConfigFactory(Private) {
     },
     alerts: [],
     categoryAxes: [],
-    valueAxes: []
+    valueAxes: [],
+    grid: {}
   };
 
 
diff --git a/src/ui/public/vislib/styles/_layout.less b/src/ui/public/vislib/styles/_layout.less
index 3b6076c9333b9..8429a5f353427 100644
--- a/src/ui/public/vislib/styles/_layout.less
+++ b/src/ui/public/vislib/styles/_layout.less
@@ -187,6 +187,10 @@
   width: 100%;
 }
 
+.x-axis-div svg {
+  float: left; /* for some reason svg wont get positioned in top left corner of container div without this */
+}
+
 .axis-wrapper-top .axis-div svg {
   margin-bottom: -5px;
 }
diff --git a/src/ui/public/vislib/styles/_svg.less b/src/ui/public/vislib/styles/_svg.less
index ae2fd14a73792..a1fd676b93f0f 100644
--- a/src/ui/public/vislib/styles/_svg.less
+++ b/src/ui/public/vislib/styles/_svg.less
@@ -28,7 +28,6 @@
 
 /* SVG Element Default Styling */
 rect {
-  stroke: none;
   opacity: 1;
 
   &:hover {
@@ -50,6 +49,12 @@ circle {
   opacity: 0.6;
 }
 
+.series > path,
+.series > rect {
+  fill-opacity: 0.6;
+  stroke-opacity: 1;
+}
+
 .blur_shape {
   opacity: 0.3 !important;
 }
diff --git a/src/ui/public/vislib/visualizations/point_series.js b/src/ui/public/vislib/visualizations/point_series.js
index 1847df56875cd..f9155f140ced9 100644
--- a/src/ui/public/vislib/visualizations/point_series.js
+++ b/src/ui/public/vislib/visualizations/point_series.js
@@ -55,6 +55,14 @@ export default function PointSeriesFactory(Private) {
       .attr('class', 'background');
     }
 
+    addGrid(svg) {
+      const { width, height } = svg.node().getBBox();
+      return svg
+        .append('g')
+        .attr('class', 'grid')
+        .call(this.handler.grid.draw(width, height));
+    }
+
     addClipPath(svg) {
       const { width, height } = svg.node().getBBox();
       const startX = 0;
@@ -219,6 +227,7 @@ export default function PointSeriesFactory(Private) {
           .attr('height', height);
 
           self.addBackground(svg, width, height);
+          self.addGrid(svg);
           self.addClipPath(svg);
           self.addEvents(svg);
           self.createEndZones(svg);
@@ -227,7 +236,7 @@ export default function PointSeriesFactory(Private) {
           self.series = [];
           _.each(self.chartConfig.series, (seriArgs, i) => {
             if (!seriArgs.show) return;
-            const SeriClass = seriTypes[seriArgs.type || self.handler.visConfig.get('chart.type')];
+            const SeriClass = seriTypes[seriArgs.type || self.handler.visConfig.get('chart.type')] || seriTypes.line;
             const series = new SeriClass(self.handler, svg, data.series[i], seriArgs);
             series.events = self.events;
             svg.call(series.draw());
diff --git a/src/ui/public/vislib/visualizations/point_series/_point_series.js b/src/ui/public/vislib/visualizations/point_series/_point_series.js
index 00ea55ed73585..063c4501de232 100644
--- a/src/ui/public/vislib/visualizations/point_series/_point_series.js
+++ b/src/ui/public/vislib/visualizations/point_series/_point_series.js
@@ -29,8 +29,8 @@ export default function PointSeriesProvider(Private) {
 
     getGroupedCount() {
       const stacks = [];
-      return this.baseChart.chartConfig.series.reduce(function (sum, series) {
-        const valueAxis = series.valueAxis;
+      return this.baseChart.chartConfig.series.reduce((sum, series) => {
+        const valueAxis = series.valueAxis || this.baseChart.handler.valueAxes[0].id;
         const isStacked = series.mode === 'stacked';
         const isHistogram = series.type === 'histogram';
         if (!isHistogram) return sum;
@@ -53,7 +53,7 @@ export default function PointSeriesProvider(Private) {
       let i = 0;
       const stacks = [];
       for (const seri of this.baseChart.chartConfig.series) {
-        const valueAxis = seri.valueAxis;
+        const valueAxis = seri.valueAxis || this.baseChart.handler.valueAxes[0].id;
         const isStacked = seri.mode === 'stacked';
         if (!isStacked) {
           if (seri.data === data) return i;
diff --git a/src/ui/public/vislib/visualizations/point_series/area_chart.js b/src/ui/public/vislib/visualizations/point_series/area_chart.js
index fc073de6c5ddf..1742dd78e3629 100644
--- a/src/ui/public/vislib/visualizations/point_series/area_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/area_chart.js
@@ -79,9 +79,8 @@ export default function AreaChartFactory(Private) {
       // Append path
       const path = layer.append('path')
       .attr('data-label', data.label)
-      .style('fill', () => {
-        return color(data.label);
-      })
+      .style('fill', () => color(data.label))
+      .style('stroke', () => color(data.label))
       .classed('overlap_area', function () {
         return isOverlapping;
       })
diff --git a/src/ui/public/vislib/visualizations/point_series/column_chart.js b/src/ui/public/vislib/visualizations/point_series/column_chart.js
index 74b74212e554d..54b6db3bb6c58 100644
--- a/src/ui/public/vislib/visualizations/point_series/column_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/column_chart.js
@@ -34,7 +34,7 @@ export default function ColumnChartFactory(Private) {
       const isTooltip = this.handler.visConfig.get('tooltip.show');
 
       const layer = svg.append('g')
-      .attr('class', 'series')
+      .attr('class', 'series histogram')
       .attr('clip-path', 'url(#' + this.baseChart.clipPathId + ')');
 
       const bars = layer.selectAll('rect')
@@ -50,9 +50,8 @@ export default function ColumnChartFactory(Private) {
       .enter()
       .append('rect')
       .attr('data-label', data.label)
-      .attr('fill', () => {
-        return color(data.label);
-      });
+      .attr('fill', () => color(data.label))
+      .attr('stroke', () => color(data.label));
 
       self.updateBars(bars);
 
@@ -117,7 +116,6 @@ export default function ColumnChartFactory(Private) {
         if ((isHorizontal && d.y < 0) || (!isHorizontal && d.y > 0)) {
           return yScale(d.y0);
         }
-        /*if (!isHorizontal && d.y < 0) return yScale(d.y);*/
         return yScale(d.y0 + d.y);
       }
 
diff --git a/src/ui/public/vislib/visualizations/point_series/line_chart.js b/src/ui/public/vislib/visualizations/point_series/line_chart.js
index 9e629c429c126..afdba40ae6340 100644
--- a/src/ui/public/vislib/visualizations/point_series/line_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/line_chart.js
@@ -69,8 +69,9 @@ export default function LineChartFactory(Private) {
       }
 
       function cy(d) {
+        const y0 = d.y0 || 0;
         const y = d.y || 0;
-        return yScale(y);
+        return yScale(y0 + y);
       }
 
       function cColor(d) {
@@ -158,7 +159,8 @@ export default function LineChartFactory(Private) {
 
       function cy(d) {
         const y = d.y || 0;
-        return yScale(y);
+        const y0 = d.y0 || 0;
+        return yScale(y0 + y);
       }
 
       line.append('path')
diff --git a/src/ui/public/vislib_vis_type/vislib_vis_type.js b/src/ui/public/vislib_vis_type/vislib_vis_type.js
index 9b01cb23b6d42..d5272aba2710a 100644
--- a/src/ui/public/vislib_vis_type/vislib_vis_type.js
+++ b/src/ui/public/vislib_vis_type/vislib_vis_type.js
@@ -4,6 +4,7 @@ import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';
 import 'plugins/kbn_vislib_vis_types/controls/point_series_options';
 import 'plugins/kbn_vislib_vis_types/controls/line_interpolation_option';
 import 'plugins/kbn_vislib_vis_types/controls/heatmap_options';
+import 'plugins/kbn_vislib_vis_types/controls/point_series';
 import VisSchemasProvider from 'ui/vis/schemas';
 import VisVisTypeProvider from 'ui/vis/vis_type';
 import AggResponsePointSeriesPointSeriesProvider from 'ui/agg_response/point_series/point_series';
@@ -15,6 +16,44 @@ export default function VislibVisTypeFactory(Private) {
   const pointSeries = Private(AggResponsePointSeriesPointSeriesProvider);
   const VislibRenderbot = Private(VislibVisTypeVislibRenderbotProvider);
 
+  const updateParams = function (params) {
+    if (!params.seriesParams || !params.seriesParams.length) return;
+
+    const updateIfSet = (from, to, prop, func) => {
+      if (from[prop]) {
+        to[prop] = func ? func(from[prop]) : from[prop];
+      }
+    };
+
+    updateIfSet(params, params.seriesParams[0], 'drawLinesBetweenPoints');
+    updateIfSet(params, params.seriesParams[0], 'showCircles');
+    updateIfSet(params, params.seriesParams[0], 'radiusRatio');
+    updateIfSet(params, params.seriesParams[0], 'interpolate');
+    updateIfSet(params, params.seriesParams[0], 'type');
+
+    if (params.mode) {
+      const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(params.mode);
+      params.seriesParams[0].mode = stacked ? 'stacked' : 'normal';
+      const axisMode = ['stacked', 'overlap'].includes(params.mode) ? 'norlal' : params.mode;
+      params.valueAxes[0].scale.mode = axisMode;
+      delete params.mode;
+    }
+
+    if (params.smoothLines) {
+      params.seriesParams[0].interpolate = 'cardinal';
+      delete params.smoothLines;
+    }
+
+    updateIfSet(params, params.valueAxes[0].scale, 'setYExtents');
+    updateIfSet(params, params.valueAxes[0].scale, 'defaultYExtents');
+
+    if (params.scale) {
+      params.valueAxes[0].scale.type = params.scale;
+      delete params.scale;
+    }
+
+    updateIfSet(params, params.categoryAxes[0], 'expandLastBucket');
+  };
 
   _.class(VislibVisType).inherits(VisType);
   function VislibVisType(opts = {}) {
@@ -28,6 +67,7 @@ export default function VislibVisTypeFactory(Private) {
   }
 
   VislibVisType.prototype.createRenderbot = function (vis, $el, uiState) {
+    updateParams(vis.params);
     return new VislibRenderbot(vis, $el, uiState);
   };
 
diff --git a/test/functional/apps/visualize/_chart_types.js b/test/functional/apps/visualize/_chart_types.js
index 76e265c99fbd1..8bb90b0445292 100644
--- a/test/functional/apps/visualize/_chart_types.js
+++ b/test/functional/apps/visualize/_chart_types.js
@@ -16,7 +16,7 @@ bdd.describe('visualize app', function describeIndexTests() {
   bdd.describe('chart types', function indexPatternCreation() {
     bdd.it('should show the correct chart types', function () {
       const expectedChartTypes = [
-        'Area chart', 'Data table', 'Heatmap chart', 'Line chart', 'Markdown widget',
+        'Area chart', 'Data table', 'Heatmap chart', 'Horizontal bar chart', 'Line chart', 'Markdown widget',
         'Metric', 'Pie chart', 'Tag cloud', 'Tile map', 'Timeseries', 'Vertical bar chart'
       ];
       // find all the chart types and make sure there all there
diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js
index 2a864126435c8..245419b70f87a 100644
--- a/test/functional/apps/visualize/_metric_chart.js
+++ b/test/functional/apps/visualize/_metric_chart.js
@@ -52,7 +52,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       })
       .then(function selectField() {
         PageObjects.common.debug('Field = machine.ram');
-        return PageObjects.visualize.selectField('machine.ram');
+        return PageObjects.visualize.selectField('machine.ram', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -73,7 +73,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Sum')
       .then(function selectField() {
         PageObjects.common.debug('Field = phpmemory');
-        return PageObjects.visualize.selectField('phpmemory');
+        return PageObjects.visualize.selectField('phpmemory', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -95,7 +95,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Median')
       .then(function selectField() {
         PageObjects.common.debug('Field = bytes');
-        return PageObjects.visualize.selectField('bytes');
+        return PageObjects.visualize.selectField('bytes', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -117,7 +117,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Min')
       .then(function selectField() {
         PageObjects.common.debug('Field = @timestamp');
-        return PageObjects.visualize.selectField('@timestamp');
+        return PageObjects.visualize.selectField('@timestamp', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -138,7 +138,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Max')
       .then(function selectField() {
         PageObjects.common.debug('Field = relatedContent.article:modified_time');
-        return PageObjects.visualize.selectField('relatedContent.article:modified_time');
+        return PageObjects.visualize.selectField('relatedContent.article:modified_time', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -162,7 +162,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Standard Deviation')
       .then(function selectField() {
         PageObjects.common.debug('Field = bytes');
-        return PageObjects.visualize.selectField('bytes');
+        return PageObjects.visualize.selectField('bytes', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -183,7 +183,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Unique Count')
       .then(function selectField() {
         PageObjects.common.debug('Field = clientip');
-        return PageObjects.visualize.selectField('clientip');
+        return PageObjects.visualize.selectField('clientip', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -220,7 +220,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Percentiles')
       .then(function selectField() {
         PageObjects.common.debug('Field =  machine.ram');
-        return PageObjects.visualize.selectField('machine.ram');
+        return PageObjects.visualize.selectField('machine.ram', 'metrics');
       })
       .then(function clickGo() {
         return PageObjects.visualize.clickGo();
@@ -241,7 +241,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       return PageObjects.visualize.selectAggregation('Percentile Ranks')
       .then(function selectField() {
         PageObjects.common.debug('Field =  bytes');
-        return PageObjects.visualize.selectField('memory');
+        return PageObjects.visualize.selectField('memory', 'metrics');
       })
       .then(function selectField() {
         PageObjects.common.debug('Values =  99');
diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js
new file mode 100644
index 0000000000000..ee19dc45fe5da
--- /dev/null
+++ b/test/functional/apps/visualize/_point_series_options.js
@@ -0,0 +1,192 @@
+import expect from 'expect.js';
+
+import {
+  bdd,
+} from '../../../support';
+
+import PageObjects from '../../../support/page_objects';
+
+bdd.describe('visualize app', function describeIndexTests() {
+  bdd.before(function () {
+    const fromTime = '2015-09-19 06:31:44.000';
+    const toTime = '2015-09-23 18:31:44.000';
+
+    PageObjects.common.debug('navigateToApp visualize');
+    return PageObjects.common.navigateToUrl('visualize', 'new')
+    .then(function () {
+      PageObjects.common.debug('clickLineChart');
+      return PageObjects.visualize.clickLineChart();
+    })
+    .then(function clickNewSearch() {
+      return PageObjects.visualize.clickNewSearch();
+    })
+    .then(function setAbsoluteRange() {
+      PageObjects.common.debug('Set absolute time range from \"' + fromTime + '\" to \"' + toTime + '\"');
+      return PageObjects.header.setAbsoluteRange(fromTime, toTime);
+    })
+    .then(function clickBucket() {
+      PageObjects.common.debug('Bucket = X-Axis');
+      return PageObjects.visualize.clickBucket('X-Axis');
+    })
+    .then(function selectAggregation() {
+      PageObjects.common.debug('Aggregation = Date Histogram');
+      return PageObjects.visualize.selectAggregation('Date Histogram');
+    })
+    .then(function selectField() {
+      PageObjects.common.debug('Field = @timestamp');
+      return PageObjects.visualize.selectField('@timestamp');
+    })
+    // add another metrics
+    .then(function clickAddMetrics() {
+      PageObjects.common.debug('Add Metric');
+      return PageObjects.visualize.clickAddMetric();
+    })
+    .then(function () {
+      PageObjects.common.debug('Metric = Value Axis');
+      return PageObjects.visualize.clickBucket('Y-Axis');
+    })
+    .then(function selectAggregation() {
+      PageObjects.common.debug('Aggregation = Average');
+      return PageObjects.visualize.selectAggregation('Average');
+    })
+    .then(function selectField() {
+      PageObjects.common.debug('Field = memory');
+      return PageObjects.visualize.selectField('machine.ram', 'metrics');
+    })
+    // go to options page
+    .then(function gotoAxisOptions() {
+      PageObjects.common.debug('Going to axis options');
+      return PageObjects.visualizeOptions.clickAxisOptions();
+    })
+    // add another value axis
+    .then(function addAxis() {
+      PageObjects.common.debug('adding axis');
+      return PageObjects.visualizeOptions.clickAddAxis();
+    })
+    // set average count to use second value axis
+    .then(function setAxis() {
+      return PageObjects.visualizeOptions.toggleCollapsibleTitle('Average machine.ram')
+        .then(function () {
+          PageObjects.common.debug('Average memory value axis - ValueAxis-2');
+          return PageObjects.visualizeOptions.setSeriesAxis(1, 'ValueAxis-2');
+        });
+    })
+    .then(function clickGo() {
+      return PageObjects.visualize.clickGo();
+    })
+    .then(function () {
+      return PageObjects.header.isGlobalLoadingIndicatorHidden();
+    });
+  });
+
+  bdd.describe('secondary value axis', function () {
+
+    bdd.it('should show correct chart, take screenshot', function () {
+      const expectedChartValues = [
+        [ 37, 202, 740, 1437, 1371, 751, 188, 31, 42, 202, 683,
+          1361, 1415, 707, 177, 27, 32, 175, 707, 1408, 1355, 726, 201, 29 ],
+        [ 14018296036, 13284815935, 13198764883, 13093365683, 13067752146, 12976598848,
+          13561826081, 14339648875, 14011021362, 12775336396, 13304506791, 12988890398,
+          13143466970, 13244378772, 12154757448, 15907286281, 13757317120, 13022240959,
+          12807319386, 13375732998, 13190755620, 12627508458, 12731510199, 13153337344  ],
+      ];
+
+      // Most recent failure on Jenkins usually indicates the bar chart is still being drawn?
+      // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function
+      // try sleeping a bit before getting that data
+      return PageObjects.common.sleep(2000)
+        .then(function () {
+          return PageObjects.visualize.getLineChartData('fill="#6eadc1"');
+        })
+        .then(function showData(data) {
+          PageObjects.common.debug('count data=' + data);
+          PageObjects.common.debug('data.length=' + data.length);
+          PageObjects.common.saveScreenshot('Visualize-secondary-value-axis');
+          expect(data).to.eql(expectedChartValues[0]);
+        })
+        .then(function () {
+          return PageObjects.visualize.getLineChartData('fill="#57c17b"', 'ValueAxis-2');
+        })
+        .then(function showData(data) {
+          PageObjects.common.debug('average memory data=' + data);
+          PageObjects.common.debug('data.length=' + data.length);
+          expect(data).to.eql(expectedChartValues[1]);
+        });
+    });
+
+    bdd.it('should put secondary axis on the right', function () {
+      PageObjects.visualizeOptions.getRightValueAxes().then(length => {
+        expect(length).to.be(1);
+      });
+    });
+  });
+
+  bdd.describe('multiple chart types', function () {
+    bdd.it('should change average series type to histogram', function () {
+      return PageObjects.visualizeOptions.toggleCollapsibleTitle('RightAxis-1')
+        .then(function () {
+          return PageObjects.visualizeOptions.setSeriesType(1, 'histogram');
+        })
+        .then(function () {
+          return PageObjects.visualize.clickGo();
+        })
+        .then(function () {
+          return PageObjects.common.sleep(2000);
+        })
+        .then(function checkSeriesTypes() {
+          PageObjects.visualizeOptions.getHistogramSeries().then(length => {
+            expect(length).to.be(1);
+          });
+        });
+    });
+  });
+
+  bdd.describe('grid lines', function () {
+    bdd.before(function () {
+      return PageObjects.visualizeOptions.clickOptions();
+    });
+
+    bdd.it('should show category grid lines', function () {
+      return PageObjects.visualizeOptions.toggleGridCategoryLines()
+        .then(function () {
+          return PageObjects.visualize.clickGo();
+        })
+        .then(function () {
+          return PageObjects.common.sleep(2000);
+        })
+        .then(function () {
+          return PageObjects.visualizeOptions.getGridLines();
+        })
+        .then(function checkGridLines(gridLines) {
+          expect(gridLines.length).to.be(9);
+          gridLines.forEach(gridLine => {
+            expect(gridLine.y).to.be(0);
+          });
+
+        });
+    });
+
+    bdd.it('should show value axis grid lines', function () {
+      return PageObjects.visualizeOptions.setGridValueAxis('ValueAxis-2')
+        .then(function () {
+          return PageObjects.visualizeOptions.toggleGridCategoryLines();
+        })
+        .then(function () {
+          return PageObjects.visualize.clickGo();
+        })
+        .then(function () {
+          return PageObjects.common.sleep(5000);
+        })
+        .then(function () {
+          return PageObjects.visualizeOptions.getGridLines();
+        })
+        .then(function checkGridLines(gridLines) {
+          expect(gridLines.length).to.be(9);
+          gridLines.forEach(gridLine => {
+            expect(gridLine.x).to.be(0);
+          });
+        });
+    });
+  });
+
+});
diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js
index a6cfbdf6c57fc..3333792f39374 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart.js
@@ -81,7 +81,7 @@ bdd.describe('visualize app', function describeIndexTests() {
       // Most recent failure on Jenkins usually indicates the bar chart is still being drawn?
       // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function
       // try sleeping a bit before getting that data
-      return PageObjects.common.sleep(5000)
+      return PageObjects.common.sleep(50000)
       .then(function () {
         return PageObjects.visualize.getBarChartData();
       })
diff --git a/test/functional/apps/visualize/index.js b/test/functional/apps/visualize/index.js
index e30e83200c543..521d541620b26 100644
--- a/test/functional/apps/visualize/index.js
+++ b/test/functional/apps/visualize/index.js
@@ -41,4 +41,5 @@ bdd.describe('visualize app', function () {
   require('./_tile_map');
   require('./_vertical_bar_chart');
   require('./_heatmap_chart');
+  require('./_point_series_options');
 });
diff --git a/test/support/page_objects/index.js b/test/support/page_objects/index.js
index 50f88057df38f..9566525c4f24e 100644
--- a/test/support/page_objects/index.js
+++ b/test/support/page_objects/index.js
@@ -7,6 +7,7 @@ import HeaderPage from './header_page';
 import SettingsPage from './settings_page';
 import ShieldPage from './shield_page';
 import VisualizePage from './visualize_page';
+import VisualizePointSeriesOptions from './visualize_point_series_options';
 import MonitoringPage from './monitoring_page';
 
 const common = new Common();
@@ -17,6 +18,7 @@ const headerPage = new HeaderPage();
 const settingsPage = new SettingsPage();
 const shieldPage = new ShieldPage();
 const visualizePage = new VisualizePage();
+const visualizePointSeriesOptions = new VisualizePointSeriesOptions();
 const monitoringPage = new MonitoringPage();
 
 class PageObjects {
@@ -37,6 +39,7 @@ class PageObjects {
     settingsPage.init(remote);
     shieldPage.init(remote);
     visualizePage.init(remote);
+    visualizePointSeriesOptions.init(remote);
     monitoringPage.init(remote);
   }
 
@@ -79,6 +82,10 @@ class PageObjects {
     return this.assertInitialized() && visualizePage;
   }
 
+  get visualizeOptions() {
+    return this.assertInitialized() && visualizePointSeriesOptions;
+  }
+
   get monitoring() {
     return this.assertInitialized() && monitoringPage;
   }
diff --git a/test/support/page_objects/visualize_page.js b/test/support/page_objects/visualize_page.js
index e74fc8d107a97..a06115a9a3d38 100644
--- a/test/support/page_objects/visualize_page.js
+++ b/test/support/page_objects/visualize_page.js
@@ -9,6 +9,8 @@ export default class VisualizePage {
 
   init(remote) {
     this.remote = remote;
+    this.xAxisBucket = 'Category Axis';
+    this.yAxisBucket = 'Value Axis';
   }
 
   clickAreaChart() {
@@ -39,6 +41,13 @@ export default class VisualizePage {
     .click();
   }
 
+  clickAddMetric() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector('[group-name="metrics"] .vis-editor-agg-add .vis-editor-agg-wide-btn div.btn')
+      .click();
+  }
+
   clickMetric() {
     return this.remote
     .setFindTimeout(defaultFindTimeout)
@@ -220,7 +229,7 @@ export default class VisualizePage {
   selectAggregation(myString) {
     return this.remote
     .setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('option[label="' + myString + '"]')
+    .findByCssSelector('vis-editor-agg-params:not(.ng-hide) option[label="' + myString + '"]')
     .click();
   }
 
@@ -231,13 +240,13 @@ export default class VisualizePage {
     .getVisibleText();
   }
 
-  selectField(fieldValue) {
+  selectField(fieldValue, groupName = 'buckets') {
     const self = this;
     return PageObjects.common.try(function tryingForTime() {
       return self.remote
       .setFindTimeout(defaultFindTimeout)
       // the css below should be more selective
-      .findByCssSelector('option[label="' + fieldValue + '"]')
+      .findByCssSelector(`[group-name="${groupName}"] option[label="${fieldValue}"]`)
       .click();
     });
   }
@@ -474,7 +483,7 @@ export default class VisualizePage {
 
 
   // The current test shows dots, not a line.  This function gets the dots and normalizes their height.
-  getLineChartData(cssPart) {
+  getLineChartData(cssPart, axis = 'ValueAxis-1') {
     const self = this.remote;
     let yAxisLabel = 0;
     let yAxisHeight;
@@ -482,10 +491,10 @@ export default class VisualizePage {
     // 1). get the maximim chart Y-Axis marker value
     return this.remote
       .setFindTimeout(defaultFindTimeout)
-      .findByCssSelector('div.y-axis-div-wrapper > div > svg > g > g:last-of-type')
+      .findByCssSelector(`div.y-axis-div-wrapper > div > svg > g.${axis} > g:last-of-type`)
       .getVisibleText()
       .then(function (yLabel) {
-        yAxisLabel = yLabel.replace(',', '');
+        yAxisLabel = yLabel.replace(/,/g, '');
         PageObjects.common.debug('yAxisLabel = ' + yAxisLabel);
         return yLabel;
       })
@@ -505,18 +514,13 @@ export default class VisualizePage {
       .then(function getChartWrapper() {
         return self
         .setFindTimeout(defaultFindTimeout * 2)
-        .findAllByCssSelector('.chart-wrapper')
+        .findAllByCssSelector(`.chart-wrapper circle[${cssPart}]`)
         .then(function (chartTypes) {
 
           // 5). for each chart element, find the green circle, then the cy position
           function getChartType(chart) {
             return chart
-            .findByCssSelector(`circle[${cssPart}]`)
-            .then(function (circleObject) {
-              // PageObjects.common.debug('circleObject = ' + circleObject + ' yAxisHeight= ' + yAxisHeight + ' yAxisLabel= ' + yAxisLabel);
-              return circleObject
-              .getAttribute('cy');
-            })
+            .getAttribute('cy')
             .then(function (cy) {
               // PageObjects.common.debug(' yAxisHeight=' + yAxisHeight + ' yAxisLabel=' + yAxisLabel + '  cy=' + cy +
               //   ' ((yAxisHeight - cy)/yAxisHeight * yAxisLabel)=' + ((yAxisHeight - cy) / yAxisHeight * yAxisLabel));
diff --git a/test/support/page_objects/visualize_point_series_options.js b/test/support/page_objects/visualize_point_series_options.js
new file mode 100644
index 0000000000000..881e192da50c0
--- /dev/null
+++ b/test/support/page_objects/visualize_point_series_options.js
@@ -0,0 +1,171 @@
+
+import {
+  defaultFindTimeout,
+} from '../';
+
+import PageObjects from './';
+
+export default class VisualizePointSeriesOptions {
+
+  init(remote) {
+    this.remote = remote;
+  }
+
+  clickOptions() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByPartialLinkText('Panel Settings')
+      .click();
+  }
+
+  clickAxisOptions() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByPartialLinkText('Metrics & Axes')
+      .click();
+  }
+
+  clickAddAxis() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector('button[aria-label="Add value axis"]')
+      .click();
+  }
+
+  getValueAxesCount() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.kuiSideBarSection:contains("Value Axes") > .kuiSideBarSection')
+      .length;
+  }
+
+  getSeriesCount() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.kuiSideBarSection:contains("Series") > .kuiSideBarSection')
+      .length;
+  }
+
+  getRightValueAxes() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.axis-wrapper-right g.axis')
+      .then(function (data) {
+        return Promise.all([function () { return data.length; }]);
+      });
+  }
+
+  getHistogramSeries() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.series.histogram')
+      .then(function (data) {
+        return Promise.all([function () { return data.length; }]);
+      });
+  }
+
+  getGridLines() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('g.grid > path')
+      .then(function (data) {
+        function getGridLine(gridLine) {
+          return gridLine
+            .getAttribute('d')
+            .then(dAttribute => {
+              const firstPoint = dAttribute.split('L')[0].replace('M', '').split(',');
+              return { x: parseFloat(firstPoint[0]), y: parseFloat(firstPoint[1]) };
+            });
+        }
+        const promises = data.map(getGridLine);
+        return Promise.all(promises);
+      })
+      .then(function (gridLines) {
+        return gridLines;
+      });
+  }
+
+  toggleGridCategoryLines() {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector('#showCategoryLines')
+      .click();
+  }
+
+  setGridValueAxis(axis) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#gridAxis option[value="string:${axis}"]`)
+      .click();
+  }
+
+  toggleCollapsibleTitle(title) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findAllByCssSelector('.kuiSideBarCollapsibleTitle .kuiSideBarCollapsibleTitle__text')
+      .then(sidebarTitles => {
+        PageObjects.common.debug('found sidebar titles ' + sidebarTitles.length);
+        function getTitle(titleDiv) {
+          return titleDiv
+            .getVisibleText()
+            .then(titleString => {
+              PageObjects.common.debug('sidebar title ' + titleString);
+              if (titleString === title) {
+                PageObjects.common.debug('clicking sidebar title ' + titleString);
+                return titleDiv.click();
+              }
+            });
+        }
+        const sidebarTitlePromises = sidebarTitles.map(getTitle);
+        return Promise.all(sidebarTitlePromises);
+      });
+  }
+
+  setValue(newValue) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout * 2)
+      .findByCssSelector('button[ng-click="numberListCntr.add()"]')
+      .click()
+      .then(() => {
+        return this.remote
+          .setFindTimeout(defaultFindTimeout)
+          .findByCssSelector('input[ng-model="numberListCntr.getList()[$index]"]')
+          .clearValue();
+      })
+      .then(() => {
+        return this.remote
+          .setFindTimeout(defaultFindTimeout)
+          .findByCssSelector('input[ng-model="numberListCntr.getList()[$index]"]')
+          .type(newValue);
+      });
+  }
+
+  setValueAxisPosition(axis, position) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#valueAxisPosition${axis} option[label="${position}"]`)
+      .click();
+  }
+
+  setCategoryAxisPosition(newValue) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#categoryAxisPosition option[label="${newValue}"]`)
+      .click();
+  }
+
+  setSeriesAxis(series, axis) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#seriesValueAxis${series} option[value="${axis}"]`)
+      .click();
+  }
+
+  setSeriesType(series, type) {
+    return this.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector(`select#seriesType${series} option[label="${type}"]`)
+      .click();
+  }
+
+}

From c3c8e55e4d704d80c192620a54641fd88553f539 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Wed, 15 Feb 2017 18:10:04 +0100
Subject: [PATCH 006/150] fixing broken group bar chart (#10313)

* fixing broken group bar chart

* fixing test

* updating based on last review
---
 .../vislib/__tests__/visualizations/column_chart.js  | 12 ++++++++++--
 src/ui/public/vislib/lib/axis/axis_config.js         |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/ui/public/vislib/__tests__/visualizations/column_chart.js b/src/ui/public/vislib/__tests__/visualizations/column_chart.js
index 99de6f758314d..b685bcddc0cbe 100644
--- a/src/ui/public/vislib/__tests__/visualizations/column_chart.js
+++ b/src/ui/public/vislib/__tests__/visualizations/column_chart.js
@@ -69,8 +69,16 @@ dataTypesArray.forEach(function (dataType, i) {
         });
       });
 
-      it('should stack values', function () {
-        expect(isStacked).to.be(true);
+      it('should stack values when mode is stacked', function () {
+        if (mode === 'stacked') {
+          expect(isStacked).to.be(true);
+        }
+      });
+
+      it('should stack values when mode is percentage', function () {
+        if (mode === 'percentage') {
+          expect(isStacked).to.be(true);
+        }
       });
     });
 
diff --git a/src/ui/public/vislib/lib/axis/axis_config.js b/src/ui/public/vislib/lib/axis/axis_config.js
index ea31c89797d72..9589ca47295a8 100644
--- a/src/ui/public/vislib/lib/axis/axis_config.js
+++ b/src/ui/public/vislib/lib/axis/axis_config.js
@@ -141,6 +141,7 @@ export default function AxisConfigFactory() {
           break;
         case SCALE_MODES.GROUPED:
           offset = 'group';
+          stacked = false;
           break;
         case SCALE_MODES.PERCENTAGE:
           offset = 'expand';

From 723c7c15c9ee22db70094669c02d471d8a0abfdc Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Wed, 15 Feb 2017 20:03:45 +0100
Subject: [PATCH 007/150] cumulative sum, moving avg and serial diff pipeline
 aggregation metric (#10033)

* extracting to parent agg helper

* adding comulative sum agg

* adding serial diff and moving avg

* adding tests
---
 .../agg_types/__tests__/metrics/derivative.js | 128 ----------------
 .../__tests__/metrics/parent_pipeline.js      | 144 ++++++++++++++++++
 src/ui/public/agg_types/index.js              |   6 +
 .../agg_types/metrics/cumulative_sum.js       |  17 +++
 src/ui/public/agg_types/metrics/derivative.js |  51 +------
 .../metrics/lib/parent_pipeline_agg_helper.js |  61 ++++++++
 src/ui/public/agg_types/metrics/moving_avg.js |  17 +++
 .../public/agg_types/metrics/serial_diff.js   |  17 +++
 8 files changed, 265 insertions(+), 176 deletions(-)
 delete mode 100644 src/ui/public/agg_types/__tests__/metrics/derivative.js
 create mode 100644 src/ui/public/agg_types/__tests__/metrics/parent_pipeline.js
 create mode 100644 src/ui/public/agg_types/metrics/cumulative_sum.js
 create mode 100644 src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
 create mode 100644 src/ui/public/agg_types/metrics/moving_avg.js
 create mode 100644 src/ui/public/agg_types/metrics/serial_diff.js

diff --git a/src/ui/public/agg_types/__tests__/metrics/derivative.js b/src/ui/public/agg_types/__tests__/metrics/derivative.js
deleted file mode 100644
index dae886a6a5c9f..0000000000000
--- a/src/ui/public/agg_types/__tests__/metrics/derivative.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import _ from 'lodash';
-import expect from 'expect.js';
-import ngMock from 'ng_mock';
-import DerivativeProvider from 'ui/agg_types/metrics/derivative';
-import VisProvider from 'ui/vis';
-import StubbedIndexPattern from 'fixtures/stubbed_logstash_index_pattern';
-
-describe('Derivative metric', function () {
-  let aggDsl;
-  let derivativeMetric;
-  let aggConfig;
-
-  function init(settings) {
-    ngMock.module('kibana');
-    ngMock.inject(function (Private) {
-      const Vis = Private(VisProvider);
-      const indexPattern = Private(StubbedIndexPattern);
-      derivativeMetric = Private(DerivativeProvider);
-
-      const params = settings || {
-        metricAgg: '1',
-        customMetric: null
-      };
-
-      const vis = new Vis(indexPattern, {
-        title: 'New Visualization',
-        type: 'metric',
-        params: {
-          fontSize: 60,
-          handleNoResults: true
-        },
-        aggs: [
-          {
-            id: '1',
-            type: 'count',
-            schema: 'metric'
-          },
-          {
-            id: '2',
-            type: 'derivative',
-            schema: 'metric',
-            params
-          }
-        ],
-        listeners: {}
-      });
-
-      // Grab the aggConfig off the vis (we don't actually use the vis for anything else)
-      aggConfig = vis.aggs[1];
-      aggDsl = aggConfig.toDsl();
-    });
-  }
-
-  it('should return a label prefixed with Derivative of', function () {
-    init();
-    expect(derivativeMetric.makeLabel(aggConfig)).to.eql('Derivative of Count');
-  });
-
-  it('should return a label Derivative of max bytes', function () {
-    init({
-      metricAgg: 'custom',
-      customMetric: {
-        id:'1-orderAgg',
-        type: 'max',
-        params: { field: 'bytes' },
-        schema: 'orderAgg'
-      }
-    });
-    expect(derivativeMetric.makeLabel(aggConfig)).to.eql('Derivative of Max bytes');
-  });
-
-  it('should return a label prefixed with number of derivative', function () {
-    init({
-      metricAgg: 'custom',
-      customMetric: {
-        id:'2-orderAgg',
-        type: 'derivative',
-        params: {
-          buckets_path: 'custom',
-          customMetric: {
-            id:'2-orderAgg-orderAgg',
-            type: 'count',
-            schema: 'orderAgg'
-          }
-        },
-        schema: 'orderAgg'
-      }
-    });
-    expect(derivativeMetric.makeLabel(aggConfig)).to.eql('2. derivative of Count');
-  });
-
-  it('should set parent aggs', function () {
-    init({
-      metricAgg: 'custom',
-      customMetric: {
-        id:'2-metric',
-        type: 'max',
-        params: { field: 'bytes' },
-        schema: 'orderAgg'
-      }
-    });
-    expect(aggDsl.derivative.buckets_path).to.be('2-metric');
-    expect(aggDsl.parentAggs['2-metric'].max.field).to.be('bytes');
-  });
-
-  it('should set nested parent aggs', function () {
-    init({
-      metricAgg: 'custom',
-      customMetric: {
-        id:'2-metric',
-        type: 'derivative',
-        params: {
-          buckets_path: 'custom',
-          customMetric: {
-            id:'2-metric-metric',
-            type: 'max',
-            params: { field: 'bytes' },
-            schema: 'orderAgg'
-          }
-        },
-        schema: 'orderAgg'
-      }
-    });
-    expect(aggDsl.derivative.buckets_path).to.be('2-metric');
-    expect(aggDsl.parentAggs['2-metric'].derivative.buckets_path).to.be('2-metric-metric');
-  });
-
-});
diff --git a/src/ui/public/agg_types/__tests__/metrics/parent_pipeline.js b/src/ui/public/agg_types/__tests__/metrics/parent_pipeline.js
new file mode 100644
index 0000000000000..d719084d31a15
--- /dev/null
+++ b/src/ui/public/agg_types/__tests__/metrics/parent_pipeline.js
@@ -0,0 +1,144 @@
+import _ from 'lodash';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import DerivativeProvider from 'ui/agg_types/metrics/derivative';
+import CumulativeSumProvider from 'ui/agg_types/metrics/cumulative_sum';
+import MovingAvgProvider from 'ui/agg_types/metrics/moving_avg';
+import SerialDiffProvider from 'ui/agg_types/metrics/serial_diff';
+import VisProvider from 'ui/vis';
+import StubbedIndexPattern from 'fixtures/stubbed_logstash_index_pattern';
+
+const metrics = [
+  { name: 'derivative', title: 'Derivative', provider: DerivativeProvider },
+  { name: 'cumulative_sum', title: 'Cumulative Sum', provider: CumulativeSumProvider },
+  { name: 'moving_avg', title: 'Moving Avg', provider: MovingAvgProvider },
+  { name: 'serial_diff', title: 'Serial Diff', provider: SerialDiffProvider },
+];
+
+describe('parent pipeline aggs', function () {
+  metrics.forEach(metric => {
+    describe(`${metric.title} metric`, function () {
+
+      let aggDsl;
+      let metricAgg;
+      let aggConfig;
+
+      function init(settings) {
+        ngMock.module('kibana');
+        ngMock.inject(function (Private) {
+          const Vis = Private(VisProvider);
+          const indexPattern = Private(StubbedIndexPattern);
+          metricAgg = Private(metric.provider);
+
+          const params = settings || {
+            metricAgg: '1',
+            customMetric: null
+          };
+
+          const vis = new Vis(indexPattern, {
+            title: 'New Visualization',
+            type: 'metric',
+            params: {
+              fontSize: 60,
+              handleNoResults: true
+            },
+            aggs: [
+              {
+                id: '1',
+                type: 'count',
+                schema: 'metric'
+              },
+              {
+                id: '2',
+                type: metric.name,
+                schema: 'metric',
+                params
+              }
+            ],
+            listeners: {}
+          });
+
+          // Grab the aggConfig off the vis (we don't actually use the vis for anything else)
+          aggConfig = vis.aggs[1];
+          aggDsl = aggConfig.toDsl();
+        });
+      }
+
+      it(`should return a label prefixed with ${metric.title} of`, function () {
+        init();
+        expect(metricAgg.makeLabel(aggConfig)).to.eql(`${metric.title} of Count`);
+      });
+
+      it(`should return a label ${metric.title} of max bytes`, function () {
+        init({
+          metricAgg: 'custom',
+          customMetric: {
+            id:'1-orderAgg',
+            type: 'max',
+            params: { field: 'bytes' },
+            schema: 'orderAgg'
+          }
+        });
+        expect(metricAgg.makeLabel(aggConfig)).to.eql(`${metric.title} of Max bytes`);
+      });
+
+      it(`should return a label prefixed with number of ${metric.title.toLowerCase()}`, function () {
+        init({
+          metricAgg: 'custom',
+          customMetric: {
+            id:'2-orderAgg',
+            type: metric.name,
+            params: {
+              buckets_path: 'custom',
+              customMetric: {
+                id:'2-orderAgg-orderAgg',
+                type: 'count',
+                schema: 'orderAgg'
+              }
+            },
+            schema: 'orderAgg'
+          }
+        });
+        expect(metricAgg.makeLabel(aggConfig)).to.eql(`2. ${metric.title.toLowerCase()} of Count`);
+      });
+
+      it('should set parent aggs', function () {
+        init({
+          metricAgg: 'custom',
+          customMetric: {
+            id:'2-metric',
+            type: 'max',
+            params: { field: 'bytes' },
+            schema: 'orderAgg'
+          }
+        });
+        expect(aggDsl[metric.name].buckets_path).to.be('2-metric');
+        expect(aggDsl.parentAggs['2-metric'].max.field).to.be('bytes');
+      });
+
+      it('should set nested parent aggs', function () {
+        init({
+          metricAgg: 'custom',
+          customMetric: {
+            id:'2-metric',
+            type: metric.name,
+            params: {
+              buckets_path: 'custom',
+              customMetric: {
+                id:'2-metric-metric',
+                type: 'max',
+                params: { field: 'bytes' },
+                schema: 'orderAgg'
+              }
+            },
+            schema: 'orderAgg'
+          }
+        });
+        expect(aggDsl[metric.name].buckets_path).to.be('2-metric');
+        expect(aggDsl.parentAggs['2-metric'][metric.name].buckets_path).to.be('2-metric-metric');
+      });
+
+    });
+  });
+
+});
diff --git a/src/ui/public/agg_types/index.js b/src/ui/public/agg_types/index.js
index 25140ba77daf0..5f735860e0cf7 100644
--- a/src/ui/public/agg_types/index.js
+++ b/src/ui/public/agg_types/index.js
@@ -12,6 +12,9 @@ import AggTypesMetricsCardinalityProvider from 'ui/agg_types/metrics/cardinality
 import AggTypesMetricsPercentilesProvider from 'ui/agg_types/metrics/percentiles';
 import AggTypesMetricsPercentileRanksProvider from 'ui/agg_types/metrics/percentile_ranks';
 import AggTypesMetricsDerivativeProvider from 'ui/agg_types/metrics/derivative';
+import AggTypesMetricsCumulativeSumProvider from 'ui/agg_types/metrics/cumulative_sum';
+import AggTypesMetricsMovingAvgProvider from 'ui/agg_types/metrics/moving_avg';
+import AggTypesMetricsSerialDiffProvider from 'ui/agg_types/metrics/serial_diff';
 import AggTypesBucketsDateHistogramProvider from 'ui/agg_types/buckets/date_histogram';
 import AggTypesBucketsHistogramProvider from 'ui/agg_types/buckets/histogram';
 import AggTypesBucketsRangeProvider from 'ui/agg_types/buckets/range';
@@ -37,6 +40,9 @@ export default function AggTypeService(Private) {
       Private(AggTypesMetricsPercentileRanksProvider),
       Private(AggTypesMetricsTopHitProvider),
       Private(AggTypesMetricsDerivativeProvider),
+      Private(AggTypesMetricsCumulativeSumProvider),
+      Private(AggTypesMetricsMovingAvgProvider),
+      Private(AggTypesMetricsSerialDiffProvider)
     ],
     buckets: [
       Private(AggTypesBucketsDateHistogramProvider),
diff --git a/src/ui/public/agg_types/metrics/cumulative_sum.js b/src/ui/public/agg_types/metrics/cumulative_sum.js
new file mode 100644
index 0000000000000..8e7fc93ce9a31
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/cumulative_sum.js
@@ -0,0 +1,17 @@
+import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
+import ParentPipelineAggHelperProvider from './lib/parent_pipeline_agg_helper';
+import { makeNestedLabel } from './lib/make_nested_label';
+
+export default function AggTypeMetricComulativeSumProvider(Private) {
+  const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
+  const parentPipelineAggHelper = Private(ParentPipelineAggHelperProvider);
+
+  return new MetricAggType({
+    name: 'cumulative_sum',
+    title: 'Cumulative Sum',
+    makeLabel: agg => makeNestedLabel(agg, 'cumulative sum'),
+    params: [
+      ...parentPipelineAggHelper.params()
+    ]
+  });
+}
diff --git a/src/ui/public/agg_types/metrics/derivative.js b/src/ui/public/agg_types/metrics/derivative.js
index 0051908ff29b0..01f075cc9d03b 100644
--- a/src/ui/public/agg_types/metrics/derivative.js
+++ b/src/ui/public/agg_types/metrics/derivative.js
@@ -1,62 +1,17 @@
 import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
-import metricAggTemplate from 'ui/agg_types/controls/sub_agg.html';
-import _ from 'lodash';
-import VisAggConfigProvider from 'ui/vis/agg_config';
-import VisSchemasProvider from 'ui/vis/schemas';
+import ParentPipelineAggHelperProvider from './lib/parent_pipeline_agg_helper';
 import { makeNestedLabel } from './lib/make_nested_label';
-import { parentPipelineAggController } from './lib/parent_pipeline_agg_controller';
-import { parentPipelineAggWritter } from './lib/parent_pipeline_agg_writter';
 
 export default function AggTypeMetricDerivativeProvider(Private) {
   const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
-  const AggConfig = Private(VisAggConfigProvider);
-  const Schemas = Private(VisSchemasProvider);
-
-  const aggFilter = ['!top_hits', '!percentiles', '!percentile_ranks', '!median', '!std_dev'];
-  const orderAggSchema = (new Schemas([
-    {
-      group: 'none',
-      name: 'orderAgg',
-      title: 'Order Agg',
-      aggFilter: aggFilter
-    }
-  ])).all[0];
+  const parentPipelineAggHelper = Private(ParentPipelineAggHelperProvider);
 
   return new MetricAggType({
     name: 'derivative',
     title: 'Derivative',
     makeLabel: agg => makeNestedLabel(agg, 'derivative'),
     params: [
-      {
-        name: 'customMetric',
-        type: AggConfig,
-        default: null,
-        serialize: function (customMetric) {
-          return customMetric.toJSON();
-        },
-        deserialize: function (state, agg) {
-          return this.makeAgg(agg, state);
-        },
-        makeAgg: function (termsAgg, state) {
-          state = state || { type: 'count' };
-          state.schema = orderAggSchema;
-          const metricAgg = new AggConfig(termsAgg.vis, state);
-          metricAgg.id = termsAgg.id + '-metric';
-          return metricAgg;
-        },
-        write: _.noop
-      },
-      {
-        name: 'buckets_path',
-        write: _.noop
-      },
-      {
-        name: 'metricAgg',
-        editor: metricAggTemplate,
-        default: 'custom',
-        controller: parentPipelineAggController,
-        write: parentPipelineAggWritter
-      }
+      ...parentPipelineAggHelper.params()
     ]
   });
 }
diff --git a/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js b/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
new file mode 100644
index 0000000000000..12ed05b104a41
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
@@ -0,0 +1,61 @@
+import metricAggTemplate from 'ui/agg_types/controls/sub_agg.html';
+import _ from 'lodash';
+import VisAggConfigProvider from 'ui/vis/agg_config';
+import VisSchemasProvider from 'ui/vis/schemas';
+import { parentPipelineAggController } from './parent_pipeline_agg_controller';
+import { parentPipelineAggWritter } from './parent_pipeline_agg_writter';
+
+const ParentPipelineAggHelperProvider = function (Private) {
+
+  const AggConfig = Private(VisAggConfigProvider);
+  const Schemas = Private(VisSchemasProvider);
+
+  const metricAggFilter = ['!top_hits', '!percentiles', '!percentile_ranks', '!median', '!std_dev'];
+  const metricAggSchema = (new Schemas([
+    {
+      group: 'none',
+      name: 'metricAgg',
+      title: 'Metric Agg',
+      aggFilter: metricAggFilter
+    }
+  ])).all[0];
+
+  return {
+    params: function () {
+      return [
+        {
+          name: 'customMetric',
+          type: AggConfig,
+          default: null,
+          serialize: function (customMetric) {
+            return customMetric.toJSON();
+          },
+          deserialize: function (state, agg) {
+            return this.makeAgg(agg, state);
+          },
+          makeAgg: function (termsAgg, state) {
+            state = state || { type: 'count' };
+            state.schema = metricAggSchema;
+            const metricAgg = new AggConfig(termsAgg.vis, state);
+            metricAgg.id = termsAgg.id + '-metric';
+            return metricAgg;
+          },
+          write: _.noop
+        },
+        {
+          name: 'buckets_path',
+          write: _.noop
+        },
+        {
+          name: 'metricAgg',
+          editor: metricAggTemplate,
+          default: 'custom',
+          controller: parentPipelineAggController,
+          write: parentPipelineAggWritter
+        }
+      ];
+    }
+  };
+};
+
+export default ParentPipelineAggHelperProvider;
diff --git a/src/ui/public/agg_types/metrics/moving_avg.js b/src/ui/public/agg_types/metrics/moving_avg.js
new file mode 100644
index 0000000000000..520d4cc25e233
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/moving_avg.js
@@ -0,0 +1,17 @@
+import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
+import ParentPipelineAggHelperProvider from './lib/parent_pipeline_agg_helper';
+import { makeNestedLabel } from './lib/make_nested_label';
+
+export default function AggTypeMetricMovingAvgProvider(Private) {
+  const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
+  const parentPipelineAggHelper = Private(ParentPipelineAggHelperProvider);
+
+  return new MetricAggType({
+    name: 'moving_avg',
+    title: 'Moving Avg',
+    makeLabel: agg => makeNestedLabel(agg, 'moving avg'),
+    params: [
+      ...parentPipelineAggHelper.params()
+    ]
+  });
+}
diff --git a/src/ui/public/agg_types/metrics/serial_diff.js b/src/ui/public/agg_types/metrics/serial_diff.js
new file mode 100644
index 0000000000000..014c50ec2c1ea
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/serial_diff.js
@@ -0,0 +1,17 @@
+import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
+import ParentPipelineAggHelperProvider from './lib/parent_pipeline_agg_helper';
+import { makeNestedLabel } from './lib/make_nested_label';
+
+export default function AggTypeMetricSerialDiffProvider(Private) {
+  const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
+  const parentPipelineAggHelper = Private(ParentPipelineAggHelperProvider);
+
+  return new MetricAggType({
+    name: 'serial_diff',
+    title: 'Serial Diff',
+    makeLabel: agg => makeNestedLabel(agg, 'serial diff'),
+    params: [
+      ...parentPipelineAggHelper.params()
+    ]
+  });
+}

From 9b39a1985620c8cd98b2c8f7acfc294bff15f8e9 Mon Sep 17 00:00:00 2001
From: Spencer <spalger@users.noreply.github.com>
Date: Wed, 15 Feb 2017 14:14:12 -0700
Subject: [PATCH 008/150] [optimizer] use "unsafe" defaults that have proven to
 be safe enough (#10275)

* [optimizer] use "unsafe" defaults that have proven to be safe enough

* [docs] add a note to the CONTRIBUTING.md regarding potential pitfalls
---
 CONTRIBUTING.md             | 15 +++++++--------
 src/server/config/schema.js | 36 ++++++++++++++++++++++--------------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 890325db6b58c..d8a46eaad8247 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -148,14 +148,13 @@ Now you can point your web browser to https://localhost:5601 and start using Kib
 
 The `config/kibana.yml` file stores user configuration directives. Since this file is checked into source control, however, developer preferences can't be saved without the risk of accidentally committing the modified version. To make customizing configuration easier during development, the Kibana CLI will look for a `config/kibana.dev.yml` file if run with the `--dev` flag. This file behaves just like the non-dev version and accepts any of the [standard settings](https://www.elastic.co/guide/en/kibana/master/kibana-server-properties.html).
 
-The `config/kibana.dev.yml` file is very commonly used to store some opt-in/**unsafe** optimizer tweaks which can significantly increase build performance. Below is a commonly used `config/kibana.dev.yml` file, but additional options can be found [in #4611](https://github.com/elastic/kibana/pull/4611#issue-99706918).
+#### Potential Optimization Pitfalls
 
-```yaml
-optimize:
-  sourceMaps: '#cheap-source-map' # options -> http://webpack.github.io/docs/configuration.html#devtool
-  unsafeCache: true
-  lazyPrebuild: false
-```
+In development mode, Kibana runs a customized version of [Webpack](http://webpack.github.io/) with some optimizations enabled to make building the browser bundles as fast as possible. These optimizations make the build process about 2x as fast for initial builds, and about 7x faster for rebuilds, but are labeled "unsafe" by Webpack because they can sometimes cause changes to go unnoticed by the compiler. If you experience any of the scenarios below either restart the dev server, or add `optimize.unsafeCache: false` to your `config/kibana.dev.yml` file to disable these optimizations completely.
+
+ - Webpack is trying to include a file in the bundle that I deleted and is now complaining about it is missing
+ - A module id that used to resolve to a single file now resolves to a directory, but webpack isn't adapting
+ - (if you discover other scenarios, please send a PR!)
 
 #### Setting Up SSL
 
@@ -375,4 +374,4 @@ Remember, someone is blocked by a pull awaiting review, make it count. Be thorou
 1. **Hand it off** If you're the first reviewer and everything looks good but the changes are more than a few lines, hand the pull to someone else to take a second look. Again, try to find the right person to assign it to.
 1. **Merge the code** When everything looks good, put in a `LGTM` (looks good to me) comment. Merge into the target branch. Check the labels on the pull to see if backporting is required, and perform the backport if so.
 
-Thank you so much for reading our guidelines! :tada:
+Thank you so much for reading our guidelines! :tada:
\ No newline at end of file
diff --git a/src/server/config/schema.js b/src/server/config/schema.js
index d609076f5cc7a..660fcb9541cf4 100644
--- a/src/server/config/schema.js
+++ b/src/server/config/schema.js
@@ -122,20 +122,28 @@ module.exports = () => Joi.object({
     lazyPrebuild: Joi.boolean().default(false),
     lazyProxyTimeout: Joi.number().default(5 * 60000),
     useBundleCache: Joi.boolean().default(Joi.ref('$prod')),
-    unsafeCache: Joi
-      .alternatives()
-      .try(
-        Joi.boolean(),
-        Joi.string().regex(/^\/.+\/$/)
-      )
-      .default('/[\\/\\\\](node_modules|bower_components)[\\/\\\\]/'),
-    sourceMaps: Joi
-      .alternatives()
-      .try(
-        Joi.string().required(),
-        Joi.boolean()
-      )
-      .default(Joi.ref('$dev')),
+    unsafeCache: Joi.when('$prod', {
+      is: true,
+      then: Joi.boolean().valid(false),
+      otherwise: Joi
+        .alternatives()
+        .try(
+          Joi.boolean(),
+          Joi.string().regex(/^\/.+\/$/)
+        )
+        .default(true),
+    }),
+    sourceMaps: Joi.when('$prod', {
+      is: true,
+      then: Joi.boolean().valid(false),
+      otherwise: Joi
+        .alternatives()
+        .try(
+          Joi.string().required(),
+          Joi.boolean()
+        )
+        .default('#cheap-source-map'),
+    }),
     profile: Joi.boolean().default(false)
   }).default(),
 

From e2cd8ee1911e49e6be4adf5e7a935d4243ffd839 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 15 Feb 2017 14:27:07 -0800
Subject: [PATCH 009/150] Fix position and appearance of magnifying glass icon
 when opening a Saved Search in Discover. (#10383)

---
 src/ui/public/directives/saved_object_finder.js |  1 +
 src/ui/public/partials/saved_object_finder.html | 13 +++++++------
 src/ui/public/partials/saved_object_finder.less |  8 ++++++++
 3 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/ui/public/partials/saved_object_finder.less

diff --git a/src/ui/public/directives/saved_object_finder.js b/src/ui/public/directives/saved_object_finder.js
index 99c0a30db6736..816da678b40b3 100644
--- a/src/ui/public/directives/saved_object_finder.js
+++ b/src/ui/public/directives/saved_object_finder.js
@@ -4,6 +4,7 @@ import keymap from 'ui/utils/key_map';
 import SavedObjectsSavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
 import uiModules from 'ui/modules';
 import savedObjectFinderTemplate from 'ui/partials/saved_object_finder.html';
+import 'ui/partials/saved_object_finder.less';
 const module = uiModules.get('kibana');
 
 module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Private, config) {
diff --git a/src/ui/public/partials/saved_object_finder.html b/src/ui/public/partials/saved_object_finder.html
index 809f7ffb89061..ddc4906e99e41 100644
--- a/src/ui/public/partials/saved_object_finder.html
+++ b/src/ui/public/partials/saved_object_finder.html
@@ -2,8 +2,8 @@
   <div class="container-fluid">
     <div class="row">
       <div class="input-group form-group finder-form col-md-7">
-        <span class="input-group-addon">
-          <i class="fa fa-search"></i>
+        <span class="input-group-addon savedObjectFinderSearchIcon">
+          <span class="fa fa-search"></span>
         </span>
         <input
           input-focus
@@ -13,7 +13,8 @@
           class="form-control"
           name="filter"
           type="text"
-          autocomplete="off" />
+          autocomplete="off"
+        />
       </div>
       <div class="finder-hit-count col-md-2">
         <span>{{finder.hitCount}} of {{finder.hitCount}}</span>
@@ -36,10 +37,10 @@
     <li class="list-group-item" ng-click="finder.sortHits(finder.hits)">
       <span class="paginate-heading">
         Name
-        <i
+        <span
           class="fa"
           ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
-        </i>
+        </span>
       </span>
     </li>
     <li
@@ -52,7 +53,7 @@
       <a ng-href="{{finder.makeUrl(hit)}}"
           ng-blur="finder.hitBlur($event)"
           ng-click="finder.preventClick($event)">
-          <i aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></i>
+          <span aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></span>
           <span>{{hit.title}}</span>
           <p ng-if="hit.description" ng-bind="hit.description"></p>
       </a>
diff --git a/src/ui/public/partials/saved_object_finder.less b/src/ui/public/partials/saved_object_finder.less
new file mode 100644
index 0000000000000..08057af937c6c
--- /dev/null
+++ b/src/ui/public/partials/saved_object_finder.less
@@ -0,0 +1,8 @@
+/**
+ * 1. Position icon correctly and override Bootstrap styles.
+ * 2. Override Bootstrap styles.
+ */
+.savedObjectFinderSearchIcon {
+  padding: 0 10px !important; /* 1 */
+  color: #ACACAC !important; /* 2 */
+}

From 686a70944e057c5f34c6d5b77d415bf58f0ccfb3 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Thu, 16 Feb 2017 09:13:43 +0100
Subject: [PATCH 010/150] fixes error with saving hidden metrics (#10220)

* fixing pie chart tooltip custom label bug

* fixing the bug thomas found
---
 src/ui/public/visualize/visualize.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/ui/public/visualize/visualize.js b/src/ui/public/visualize/visualize.js
index 3ffbdf7b95794..81e7bdfb48575 100644
--- a/src/ui/public/visualize/visualize.js
+++ b/src/ui/public/visualize/visualize.js
@@ -142,6 +142,16 @@ uiModules
         applyClassNames();
       });
 
+      function updateVisAggs() {
+        const enabledState = $scope.editableVis.getEnabledState();
+        const shouldUpdate = enabledState.aggs.length !== $scope.vis.aggs.length;
+
+        if (shouldUpdate) {
+          $scope.vis.setState(enabledState);
+          $scope.editableVis.dirty = false;
+        }
+      }
+
       $scope.$watch('vis', prereq(function (vis, oldVis) {
         const $visEl = getVisEl();
         if (!$visEl) return;
@@ -157,6 +167,7 @@ uiModules
       }));
 
       $scope.$watchCollection('vis.params', prereq(function () {
+        updateVisAggs();
         if ($scope.renderbot) $scope.renderbot.updateParams();
       }));
 

From f002e5df890cc1958190902ca967103a5044bc99 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 16 Feb 2017 08:13:45 -0800
Subject: [PATCH 011/150] Add isFetchingItems flag to disable the
 PromptForItems when fetching items in Visualize and Dashboard listing tables.
 (#10381)

---
 .../dashboard/listing/dashboard_listing.html   |  2 +-
 .../dashboard/listing/dashboard_listing.js     | 10 +++++++---
 .../visualize/listing/visualize_listing.html   |  2 +-
 .../visualize/listing/visualize_listing.js     | 18 +++++++++++-------
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
index c4f930bda5a71..47ba74333372b 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -87,7 +87,7 @@
     <!-- PromptForItems -->
     <div
       class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
-      ng-if="!listingController.items.length && !listingController.filter"
+      ng-if="!listingController.isFetchingItems && !listingController.items.length && !listingController.filter"
     >
       <div class="kuiPromptForItems">
         <div class="kuiPromptForItems__message">
diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
index 1ae98b0637589..1f4526865699a 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -41,9 +41,12 @@ export function DashboardListingController($injector, $scope) {
     this.pageOfItems = limitTo(this.items, this.pager.pageSize, this.pager.startIndex);
   };
 
-  const fetchObjects = () => {
+  const fetchItems = () => {
+    this.isFetchingItems = true;
+
     dashboardService.find(this.filter)
       .then(result => {
+        this.isFetchingItems = false;
         this.items = result.hits;
         calculateItemsOnPage();
       });
@@ -57,6 +60,7 @@ export function DashboardListingController($injector, $scope) {
     selectedItems = this.pageOfItems.slice(0);
   };
 
+  this.isFetchingItems = false;
   this.items = [];
   this.pageOfItems = [];
   this.filter = '';
@@ -65,7 +69,7 @@ export function DashboardListingController($injector, $scope) {
 
   $scope.$watch(() => this.filter, () => {
     deselectAll();
-    fetchObjects();
+    fetchItems();
   });
 
   /**
@@ -115,7 +119,7 @@ export function DashboardListingController($injector, $scope) {
       const selectedIds = selectedItems.map(item => item.id);
 
       dashboardService.delete(selectedIds)
-        .then(fetchObjects)
+        .then(fetchItems)
         .then(() => {
           deselectAll();
         })
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
index f4eb808c75d20..70dda2a951266 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -85,7 +85,7 @@
     <!-- PromptForItems -->
     <div
       class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
-      ng-if="!listingController.items.length && !listingController.filter"
+      ng-if="!listingController.isFetchingItems && !listingController.items.length && !listingController.filter"
     >
       <div class="kuiPromptForItems">
         <div class="kuiPromptForItems__message">
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
index 0cd96bee764d9..dbfdc447d6dd4 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -42,12 +42,15 @@ export function VisualizeListingController($injector, $scope) {
     this.pageOfItems = limitTo(this.items, this.pager.pageSize, this.pager.startIndex);
   };
 
-  const fetchObjects = () => {
+  const fetchItems = () => {
+    this.isFetchingItems = true;
+
     visualizationService.find(this.filter)
-    .then(result => {
-      this.items = result.hits;
-      calculateItemsOnPage();
-    });
+      .then(result => {
+        this.isFetchingItems = false;
+        this.items = result.hits;
+        calculateItemsOnPage();
+      });
   };
 
   const deselectAll = () => {
@@ -58,6 +61,7 @@ export function VisualizeListingController($injector, $scope) {
     selectedItems = this.pageOfItems.slice(0);
   };
 
+  this.isFetchingItems = false;
   this.items = [];
   this.pageOfItems = [];
   this.filter = '';
@@ -66,7 +70,7 @@ export function VisualizeListingController($injector, $scope) {
 
   $scope.$watch(() => this.filter, () => {
     deselectAll();
-    fetchObjects();
+    fetchItems();
   });
 
   /**
@@ -145,7 +149,7 @@ export function VisualizeListingController($injector, $scope) {
       const selectedIds = selectedItems.map(item => item.id);
 
       visualizationService.delete(selectedIds)
-        .then(fetchObjects)
+        .then(fetchItems)
         .then(() => {
           deselectAll();
         })

From 408a2e6506d0d65b35e7774fb6a6c7af5b23a565 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 16 Feb 2017 08:16:46 -0800
Subject: [PATCH 012/150] Fix Safari bug: Safari ignores :enabled pseudo class,
 preventing button active and hover states from taking effect. (#10369)

---
 ui_framework/components/button/_button.scss | 23 +++++++++++++--------
 ui_framework/dist/ui_framework.css          | 20 +++++++++++++-----
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/ui_framework/components/button/_button.scss b/ui_framework/components/button/_button.scss
index 5e377ad280076..7babdfcbdd610 100644
--- a/ui_framework/components/button/_button.scss
+++ b/ui_framework/components/button/_button.scss
@@ -2,6 +2,7 @@
  * 1. Setting to inline-block guarantees the same height when applied to both
  *    button elements and anchor tags.
  * 2. Disable for Angular.
+ * 3. Safari won't respect :enabled:active on links.
  */
 .kuiButton {
   display: inline-block; /* 1 */
@@ -20,7 +21,7 @@
     pointer-events: none; /* 2 */
   }
 
-  &:active:enabled {
+  &:active { /* 3 */
     transform: translateY(1px);
   }
 
@@ -43,6 +44,7 @@
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--basic {
   color: #5a5a5a;
@@ -53,8 +55,8 @@
     color: #5a5a5a !important; /* 1 */
   }
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 2 */
+  &:active { /* 2 */
     color: #ffffff !important; /* 1 */
     background-color: #9B9B9B;
   }
@@ -66,13 +68,14 @@
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--primary {
   color: #FFFFFF;
   background-color: #6EADC1;
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 2 */
+  &:active { /* 2 */
     color: #FFFFFF !important; /* 1 */
     background-color: #006E8A;
   }
@@ -88,13 +91,14 @@
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--danger {
   color: #FFFFFF;
   background-color: #D76051;
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 2 */
+  &:active { /* 2 */
     color: #FFFFFF !important; /* 1 */
     background-color: #A52E1F;
   }
@@ -112,13 +116,14 @@
 /**
  * 1. Override Bootstrap.
  * 2. Override either Bootstrap or Timelion styles.
+ * 3. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--hollow {
   color: $linkColor !important; /* 2 */
   background-color: transparent;
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 3 */
+  &:active { /* 3 */
     color: $linkHoverColor !important; /* 1 */
     text-decoration: underline;
   }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 0a4c9aa4fa5ab..e258e6002612b 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -107,6 +107,7 @@ body {
  * 1. Setting to inline-block guarantees the same height when applied to both
  *    button elements and anchor tags.
  * 2. Disable for Angular.
+ * 3. Safari won't respect :enabled:active on links.
  */
 .kuiButton {
   display: inline-block;
@@ -126,7 +127,8 @@ body {
     cursor: default;
     pointer-events: none;
     /* 2 */ }
-  .kuiButton:active:enabled {
+  .kuiButton:active {
+    /* 3 */
     -webkit-transform: translateY(1px);
             transform: translateY(1px); }
   .kuiButton:focus {
@@ -145,6 +147,7 @@ body {
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--basic {
   color: #5a5a5a;
@@ -152,7 +155,8 @@ body {
   .kuiButton--basic:focus {
     color: #5a5a5a !important;
     /* 1 */ }
-  .kuiButton--basic:hover:enabled, .kuiButton--basic:active:enabled {
+  .kuiButton--basic:hover, .kuiButton--basic:active {
+    /* 2 */
     color: #ffffff !important;
     /* 1 */
     background-color: #9B9B9B; }
@@ -161,11 +165,13 @@ body {
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--primary {
   color: #FFFFFF;
   background-color: #6EADC1; }
-  .kuiButton--primary:hover:enabled, .kuiButton--primary:active:enabled {
+  .kuiButton--primary:hover, .kuiButton--primary:active {
+    /* 2 */
     color: #FFFFFF !important;
     /* 1 */
     background-color: #006E8A; }
@@ -177,11 +183,13 @@ body {
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--danger {
   color: #FFFFFF;
   background-color: #D76051; }
-  .kuiButton--danger:hover:enabled, .kuiButton--danger:active:enabled {
+  .kuiButton--danger:hover, .kuiButton--danger:active {
+    /* 2 */
     color: #FFFFFF !important;
     /* 1 */
     background-color: #A52E1F; }
@@ -200,12 +208,14 @@ body {
 /**
  * 1. Override Bootstrap.
  * 2. Override either Bootstrap or Timelion styles.
+ * 3. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--hollow {
   color: #3CAED2 !important;
   /* 2 */
   background-color: transparent; }
-  .kuiButton--hollow:hover:enabled, .kuiButton--hollow:active:enabled {
+  .kuiButton--hollow:hover, .kuiButton--hollow:active {
+    /* 3 */
     color: #006E8A !important;
     /* 1 */
     text-decoration: underline; }

From 9bc4d9158bc23bc0ddfe4a80d5aaee42b04bb27e Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jbudz@users.noreply.github.com>
Date: Thu, 16 Feb 2017 10:30:36 -0600
Subject: [PATCH 013/150] Updates to status API, re-align status page (#10180)

* [status] Only provide latest metrics

* [status] Snake case requests object

* [status] Add build snapshot flag, last updated time

* [status] Re-add requests per second

* [status] Add uptime

* [status] collection_time -> collection_interval, add memory object

* [status] Add api tests

* [status] Add breaking changes docs

* [status] Remove metrics config

* [status] nest load under cpu, shorten memory and average

* [status] collection_time -> collection_interval

* [status api] Unnest heap, rename load to load average
---
 docs/migration/migrate_6_0.asciidoc           | 12 +++-
 .../status_page/public/lib/format_number.js   |  3 +
 .../status_page/public/lib/to_title_case.js   | 10 ---
 .../status_page/public/status_page.html       |  4 +-
 .../status_page/public/status_page.js         | 34 +++++++++-
 .../status_page/public/status_page.less       |  1 +
 .../public/status_page_metric.html            |  4 +-
 .../status_page/public/status_page_metric.js  | 66 +++----------------
 src/server/status/__tests__/metrics.js        | 56 ++++++++++++++++
 src/server/status/index.js                    | 19 ++++--
 src/server/status/metrics.js                  | 57 +++++++++-------
 src/ui/public/ingest/ingest.js                |  2 +-
 .../__tests__/case_conversion.js              |  0
 .../common/lib => utils}/case_conversion.js   |  0
 14 files changed, 165 insertions(+), 103 deletions(-)
 delete mode 100644 src/core_plugins/status_page/public/lib/to_title_case.js
 create mode 100644 src/server/status/__tests__/metrics.js
 rename src/{core_plugins/kibana/common/lib => utils}/__tests__/case_conversion.js (100%)
 rename src/{core_plugins/kibana/common/lib => utils}/case_conversion.js (100%)

diff --git a/docs/migration/migrate_6_0.asciidoc b/docs/migration/migrate_6_0.asciidoc
index 27830c6f806fc..b0122e66eb1ef 100644
--- a/docs/migration/migrate_6_0.asciidoc
+++ b/docs/migration/migrate_6_0.asciidoc
@@ -10,4 +10,14 @@ your application to Kibana 6.0.
 Kibana 6.0 will only support Painless and Lucene expression based scripts.
 
 
-*Impact:* You will need to migrate your groovy, python, javascript, etc. scripted fields to Painless or Lucene expressions.
\ No newline at end of file
+*Impact:* You will need to migrate your groovy, python, javascript, etc. scripted fields to Painless or Lucene expressions.
+
+[float]
+=== Changed response format of status API
+*Details:* In an effort to align with our style guidelines and provide a digestible response,
+the status API has changed:
+
+* Properties are now snake cased and several have been renamed
+* Metrics now provide the latest available data instead of samples over time
+
+*Impact:* You will need to update anything using the status API and expecting the previous response format.
\ No newline at end of file
diff --git a/src/core_plugins/status_page/public/lib/format_number.js b/src/core_plugins/status_page/public/lib/format_number.js
index a5e0a7f72bfd3..d31a44889993d 100644
--- a/src/core_plugins/status_page/public/lib/format_number.js
+++ b/src/core_plugins/status_page/public/lib/format_number.js
@@ -14,6 +14,9 @@ module.exports = function formatNumber(num, which) {
     case 'ms':
       postfix = ' ms';
       break;
+    case 'integer':
+      format = '0';
+      break;
   }
   return numeral(num).format(format) + postfix;
 };
diff --git a/src/core_plugins/status_page/public/lib/to_title_case.js b/src/core_plugins/status_page/public/lib/to_title_case.js
deleted file mode 100644
index 94e230cc3fef8..0000000000000
--- a/src/core_plugins/status_page/public/lib/to_title_case.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import _ from 'lodash';
-
-// Turns thisIsASentence to
-// This Is A Sentence
-module.exports = function toTitleCase(name) {
-  return name
-  .split(/(?=[A-Z])/)
-  .map(function (word) { return word[0].toUpperCase() + _.rest(word).join(''); })
-  .join(' ');
-};
diff --git a/src/core_plugins/status_page/public/status_page.html b/src/core_plugins/status_page/public/status_page.html
index c0ae2fa404f07..455ec252dc181 100644
--- a/src/core_plugins/status_page/public/status_page.html
+++ b/src/core_plugins/status_page/public/status_page.html
@@ -10,8 +10,8 @@ <h1>
   </header>
 
   <div class="row metrics_wrapper">
-    <div ng-repeat="(name, data) in ui.metrics">
-      <status-page-metric name="{{name}}" data="data"></status-page-metric>
+    <div ng-repeat="metric in ui.metrics">
+      <status-page-metric metric="metric"></status-page-metric>
     </div>
   </div>
 
diff --git a/src/core_plugins/status_page/public/status_page.js b/src/core_plugins/status_page/public/status_page.js
index 05c0ad1b1b226..c350aa360e3df 100644
--- a/src/core_plugins/status_page/public/status_page.js
+++ b/src/core_plugins/status_page/public/status_page.js
@@ -27,9 +27,39 @@ const chrome = require('ui/chrome')
       }
 
       const data = resp.data;
-      ui.metrics = data.metrics;
-      ui.name = data.name;
+      const metrics = data.metrics;
+      if (metrics) {
+        ui.metrics = [{
+          name: 'Heap Total',
+          value: _.get(metrics, 'process.mem.heap_max_in_bytes'),
+          type: 'byte'
+        }, {
+          name: 'Heap Used',
+          value: _.get(metrics, 'process.mem.heap_used_in_bytes'),
+          type: 'byte'
+        }, {
+          name: 'Load',
+          value: [
+            _.get(metrics, 'os.cpu.load_average.1m'),
+            _.get(metrics, 'os.cpu.load_average.5m'),
+            _.get(metrics, 'os.cpu.load_average.15m')
+          ],
+          type: 'float'
+        }, {
+          name: 'Response Time Avg',
+          value: _.get(metrics, 'response_times.avg_in_millis'),
+          type: 'ms'
+        }, {
+          name: 'Response Time Max',
+          value: _.get(metrics, 'response_times.max_in_millis'),
+          type: 'ms'
+        }, {
+          name: 'Requests Per Second',
+          value: _.get(metrics, 'requests.total') * 1000 / _.get(metrics, 'collection_interval_in_millis')
+        }];
+      }
 
+      ui.name = data.name;
       ui.statuses = data.status.statuses;
 
       const overall = data.status.overall;
diff --git a/src/core_plugins/status_page/public/status_page.less b/src/core_plugins/status_page/public/status_page.less
index d82736de72784..7b391d5477157 100644
--- a/src/core_plugins/status_page/public/status_page.less
+++ b/src/core_plugins/status_page/public/status_page.less
@@ -36,6 +36,7 @@
     border: 0;
 
     .content {
+      display: block;
       text-align: right;
       padding: 15px;
       padding-right: 20px;
diff --git a/src/core_plugins/status_page/public/status_page_metric.html b/src/core_plugins/status_page/public/status_page_metric.html
index 9bda93533fc10..7d5a99d90a0d1 100644
--- a/src/core_plugins/status_page/public/status_page_metric.html
+++ b/src/core_plugins/status_page/public/status_page_metric.html
@@ -1,6 +1,6 @@
 <div class="status_metric_wrapper col-md-4">
   <div class="content">
-    <h3 class="title">{{metric.extendedTitle}}</h3>
-    <h4 class="average">{{ metric.averages.join(', ') }}</h4>
+    <h3 class="title">{{ metric.name }}</h3>
+    <h4 class="average">{{ metric.value | statusMetric: metric.type}}</h4>
   </div>
 </div>
diff --git a/src/core_plugins/status_page/public/status_page_metric.js b/src/core_plugins/status_page/public/status_page_metric.js
index 1893e8eda2d4b..412d938546721 100644
--- a/src/core_plugins/status_page/public/status_page_metric.js
+++ b/src/core_plugins/status_page/public/status_page_metric.js
@@ -2,74 +2,28 @@ import _ from 'lodash';
 import moment from 'moment';
 import numeral from 'numeral';
 
-import toTitleCase from './lib/to_title_case';
 import formatNumber from './lib/format_number';
 import readStatData from './lib/read_stat_data';
 import uiModules from 'ui/modules';
 import statusPageMetricTemplate from 'plugins/status_page/status_page_metric.html';
 
-function calcAvg(metricList, metricNumberType) {
-  return metricList.map(function (data) {
-    const uglySum = data.values.reduce(function (sumSoFar, vector) {
-      return sumSoFar + vector.y;
-    }, 0);
-    return formatNumber(uglySum / data.values.length, metricNumberType);
-  });
-}
-
 uiModules
 .get('kibana', [])
+.filter('statusMetric', function () {
+  return function (input, type) {
+    const metrics = [].concat(input);
+    return metrics.map(function (metric) {
+      return formatNumber(metric, type);
+    }).join(', ');
+  };
+})
 .directive('statusPageMetric', function () {
   return {
     restrict: 'E',
     template: statusPageMetricTemplate,
     scope: {
-      name: '@',
-      data: '='
+      metric: '=',
     },
-    controllerAs: 'metric',
-    controller: function ($scope) {
-      const self = this;
-
-      self.name = $scope.name;
-      self.title = toTitleCase(self.name);
-      self.extendedTitle = self.title;
-      self.numberType = 'precise';
-      self.seriesNames = [];
-
-      switch (self.name) {
-        case 'heapTotal':
-        case 'heapUsed':
-          self.numberType = 'byte';
-          break;
-
-        case 'responseTimeAvg':
-        case 'responseTimeMax':
-          self.numberType = 'ms';
-          break;
-
-        case 'load':
-          self.seriesNames = ['1min', '5min', '15min'];
-          break;
-      }
-
-      $scope.$watch('data', function (data) {
-        self.rawData = data;
-        self.chartData = readStatData(self.rawData, self.seriesNames);
-        self.averages = calcAvg(self.chartData, self.numberType);
-
-        let unit = '';
-        self.averages = self.averages.map(function (average) {
-          const parts = average.split(' ');
-          const value = parts.shift();
-          unit = parts.join(' ');
-          return value;
-        });
-        self.extendedTitle = self.title;
-        if (unit) {
-          self.extendedTitle = `${self.extendedTitle} (${unit})`;
-        }
-      });
-    }
+    controllerAs: 'metric'
   };
 });
diff --git a/src/server/status/__tests__/metrics.js b/src/server/status/__tests__/metrics.js
new file mode 100644
index 0000000000000..67d5167e3cfb6
--- /dev/null
+++ b/src/server/status/__tests__/metrics.js
@@ -0,0 +1,56 @@
+import _ from 'lodash';
+import expect from 'expect.js';
+
+import { getMetrics } from '../metrics';
+
+describe('Metrics', function () {
+  const mockOps = {
+    'requests': { '5603': { 'total': 22, 'disconnects': 0, 'statusCodes': { '200': 22 } } },
+    'responseTimes': { '5603': { 'avg': 1.8636363636363635, 'max': 4 } },
+    'sockets': {
+      'http': { 'total': 0 },
+      'https': { 'total': 0 }
+    },
+    'osload': [2.20751953125, 2.02294921875, 1.89794921875],
+    'osmem': { 'total': 17179869184, 'free': 102318080 },
+    'osup': 1008991,
+    'psup': 7.168,
+    'psmem': { 'rss': 193716224, 'heapTotal': 168194048, 'heapUsed': 130553400 },
+    'concurrents': { '5603': 0 },
+    'psdelay': 1.6091690063476562,
+    'host': '123'
+  };
+  const config = {
+    ops: {
+      interval: 5000
+    },
+    server: {
+      port: 5603
+    }
+  };
+
+  let metrics;
+  beforeEach(() => {
+    metrics = getMetrics({
+      event: _.cloneDeep(mockOps),
+      config: {
+        get: path => _.get(config, path)
+      }
+    });
+  });
+
+  it('should snake case the request object', () => {
+    expect(metrics.requests.status_codes).not.to.be(undefined);
+    expect(metrics.requests.statusCodes).to.be(undefined);
+  });
+
+  it('should provide defined metrics', () => {
+    (function checkMetrics(currentMetric) {
+      _.forOwn(currentMetric, value => {
+        if (typeof value === 'object') return checkMetrics(value);
+        expect(currentMetric).not.to.be(undefined);
+      });
+
+    }(metrics));
+  });
+});
diff --git a/src/server/status/index.js b/src/server/status/index.js
index 90dea44ce5378..b074c0ba6594e 100644
--- a/src/server/status/index.js
+++ b/src/server/status/index.js
@@ -7,24 +7,29 @@ export default function (kbnServer, server, config) {
   kbnServer.status = new ServerStatus(kbnServer.server);
 
   if (server.plugins['even-better']) {
-    kbnServer.mixin(require('./metrics'));
+    kbnServer.mixin(require('./metrics').collectMetrics);
   }
 
   const wrapAuth = wrapAuthConfig(config.get('status.allowAnonymous'));
-
+  const matchSnapshot = /-SNAPSHOT$/;
   server.route(wrapAuth({
     method: 'GET',
     path: '/api/status',
     handler: function (request, reply) {
-      return reply({
+      const status = {
         name: config.get('server.name'),
-        version: config.get('pkg.version'),
-        buildNum: config.get('pkg.buildNum'),
-        buildSha: config.get('pkg.buildSha'),
         uuid: config.get('server.uuid'),
+        version: {
+          number: config.get('pkg.version').replace(matchSnapshot, ''),
+          build_hash: config.get('pkg.buildSha'),
+          build_number: config.get('pkg.buildNum'),
+          build_snapshot: matchSnapshot.test(config.get('pkg.version'))
+        },
         status: kbnServer.status.toJSON(),
         metrics: kbnServer.metrics
-      });
+      };
+
+      return reply(status);
     }
   }));
 
diff --git a/src/server/status/metrics.js b/src/server/status/metrics.js
index d00a8eb540d04..a2505b727b003 100644
--- a/src/server/status/metrics.js
+++ b/src/server/status/metrics.js
@@ -1,27 +1,40 @@
 import _ from 'lodash';
 import Samples from './samples';
-module.exports = function (kbnServer, server, config) {
-  let lastReport = Date.now();
-
-  kbnServer.metrics = new Samples(12);
+import { keysToSnakeCaseShallow } from '../../utils/case_conversion';
 
+export function collectMetrics(kbnServer, server, config) {
   server.plugins['even-better'].monitor.on('ops', function (event) {
-    const now = Date.now();
-    const secSinceLast = (now - lastReport) / 1000;
-    lastReport = now;
-
-    const port = config.get('server.port');
-    const requests = _.get(event, ['requests', port, 'total'], 0);
-    const requestsPerSecond = requests / secSinceLast;
-
-    kbnServer.metrics.add({
-      heapTotal: _.get(event, 'psmem.heapTotal'),
-      heapUsed: _.get(event, 'psmem.heapUsed'),
-      load: event.osload,
-      responseTimeAvg: _.get(event, ['responseTimes', port, 'avg']),
-      responseTimeMax: _.get(event, ['responseTimes', port, 'max']),
-      requestsPerSecond: requestsPerSecond
-    });
-
+    kbnServer.metrics = getMetrics({ event, config });
   });
-};
+}
+
+export function getMetrics({ event, config }) {
+  const port = config.get('server.port');
+  const timestamp = new Date().toISOString();
+  return {
+    last_updated: timestamp,
+    collection_interval_in_millis: config.get('ops.interval'),
+    uptime_in_millis: process.uptime() * 1000,
+    process: {
+      mem: {
+        heap_max_in_bytes: _.get(event, 'psmem.heapTotal'),
+        heap_used_in_bytes:  _.get(event, 'psmem.heapUsed')
+      }
+    },
+    os: {
+      cpu: {
+        load_average: {
+          '1m': _.get(event, 'osload.0'),
+          '5m': _.get(event, 'osload.1'),
+          '15m': _.get(event, 'osload.1')
+        }
+      }
+    },
+    response_times: {
+      avg_in_millis:  _.get(event, ['responseTimes', port, 'avg']),
+      max_in_millis: _.get(event, ['responseTimes', port, 'max'])
+    },
+    requests:  keysToSnakeCaseShallow(_.get(event, ['requests', port])),
+    concurrent_connections: _.get(event, ['concurrents', port])
+  };
+}
diff --git a/src/ui/public/ingest/ingest.js b/src/ui/public/ingest/ingest.js
index 6b523d41c6c74..9fe0c43b9d099 100644
--- a/src/ui/public/ingest/ingest.js
+++ b/src/ui/public/ingest/ingest.js
@@ -1,5 +1,5 @@
 import RefreshKibanaIndexProvider from 'plugins/kibana/management/sections/indices/_refresh_kibana_index';
-import { keysToCamelCaseShallow, keysToSnakeCaseShallow } from '../../../core_plugins/kibana/common/lib/case_conversion';
+import { keysToCamelCaseShallow, keysToSnakeCaseShallow } from '../../../utils/case_conversion';
 import _ from 'lodash';
 import angular from 'angular';
 import chrome from 'ui/chrome';
diff --git a/src/core_plugins/kibana/common/lib/__tests__/case_conversion.js b/src/utils/__tests__/case_conversion.js
similarity index 100%
rename from src/core_plugins/kibana/common/lib/__tests__/case_conversion.js
rename to src/utils/__tests__/case_conversion.js
diff --git a/src/core_plugins/kibana/common/lib/case_conversion.js b/src/utils/case_conversion.js
similarity index 100%
rename from src/core_plugins/kibana/common/lib/case_conversion.js
rename to src/utils/case_conversion.js

From e1b677ac9f88ba97c6e791d905fde99628a3a7ad Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jbudz@users.noreply.github.com>
Date: Thu, 16 Feb 2017 10:41:09 -0600
Subject: [PATCH 014/150] [build] Add notice file (#10344)

* [build] Add notice file

* [build] Include license text if available

* [build] Look for both license and notice files

* [build] Add node license to notice

* [build] Add a base notice file including info on committed dependencies

* Bump license copyright year

* [build] Kibana at top of notice
---
 LICENSE.md                         |  2 +-
 tasks/build/index.js               |  1 +
 tasks/build/notice.js              | 86 ++++++++++++++++++++++++++++++
 tasks/build/notice/base_notice.txt | 59 ++++++++++++++++++++
 4 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 tasks/build/notice.js
 create mode 100644 tasks/build/notice/base_notice.txt

diff --git a/LICENSE.md b/LICENSE.md
index b4a47058738d7..be4e1b688571a 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,4 +1,4 @@
-Copyright 2012–2016 Elasticsearch BV
+Copyright 2012–2017 Elasticsearch BV
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
 
diff --git a/tasks/build/index.js b/tasks/build/index.js
index 55b5ee51af578..cb5cbe08b95ca 100644
--- a/tasks/build/index.js
+++ b/tasks/build/index.js
@@ -17,6 +17,7 @@ module.exports = function (grunt) {
       '_build:readme',
       '_build:babelCache',
       '_build:installNpmDeps',
+      '_build:notice',
       '_build:removePkgJsonDeps',
       'clean:testsFromModules',
       'run:optimizeBuild',
diff --git a/tasks/build/notice.js b/tasks/build/notice.js
new file mode 100644
index 0000000000000..b546902a96a03
--- /dev/null
+++ b/tasks/build/notice.js
@@ -0,0 +1,86 @@
+import _ from 'lodash';
+import npm from 'npm';
+import npmLicense from 'license-checker';
+import glob from 'glob';
+import path from 'path';
+import fs from 'fs';
+import { execSync } from 'child_process';
+
+export default function licenses(grunt) {
+  grunt.registerTask('_build:notice', 'Adds a notice', function () {
+    const done = this.async();
+    const buildPath = path.join(grunt.config.get('buildDir'), 'kibana');
+
+    function getPackagePaths() {
+      const packagePaths = {};
+      const installedPackages = execSync(`npm ls --parseable --long`, {
+        cwd: buildPath
+      });
+      installedPackages.toString().trim().split('\n').forEach(pkg => {
+        const packageDetails = pkg.split(':');
+        const [modulePath, packageName] = packageDetails;
+        const licenses = glob.sync(path.join(modulePath, '*LICENSE*'));
+        const notices = glob.sync(path.join(modulePath, '*NOTICE*'));
+        packagePaths[packageName] = {
+          relative: modulePath.replace(/.*\/kibana\//, ''),
+          licenses,
+          notices
+        };
+      });
+      return packagePaths;
+    }
+
+    function combineFiles(filePaths) {
+      let content = '';
+      filePaths.forEach(filePath => {
+        content += fs.readFileSync(filePath) + '\n';
+      });
+      return content;
+    }
+
+    function getNodeInfo() {
+      const nodeVersion = grunt.config.get('nodeVersion');
+      const nodeDir = path.join(grunt.config.get('root'), '.node_binaries', nodeVersion);
+      const licensePath = path.join(nodeDir, 'linux-x64', 'LICENSE');
+      const license = fs.readFileSync(licensePath);
+      return `This product bundles Node.js.\n\n${license}`;
+    }
+
+    function getPackageInfo(packages) {
+      const packagePaths = getPackagePaths();
+      const overrides = grunt.config.get('licenses.options.overrides');
+      let content = '';
+      _.forOwn(packages, (value, key) => {
+        const licenses = [].concat(overrides.hasOwnProperty(key) ? overrides[key] : value.licenses);
+        if (!licenses.length || licenses.includes('UNKNOWN')) return grunt.fail.fatal(`Unknown license for ${key}`);
+        const packagePath = packagePaths[key];
+        const readLicenseAndNotice = combineFiles([].concat(packagePath.licenses, packagePath.notices));
+        const licenseOverview = licenses.length > 1 ? `the\n"${licenses.join('", ')} licenses` : `a\n"${licenses[0]}" license`;
+        const licenseAndNotice = readLicenseAndNotice ? `\n${readLicenseAndNotice}` : `  For details, see ${packagePath.relative}/.`;
+        const combinedText = `This product bundles ${key} which is available under ${licenseOverview}.${licenseAndNotice}\n---\n`;
+
+        content += combinedText;
+      });
+      return content;
+    }
+
+    function getBaseNotice() {
+      return fs.readFileSync(path.join(__dirname, 'notice', 'base_notice.txt'));
+    }
+
+    npmLicense.init({
+      start: buildPath,
+      production: true,
+      json: true
+    }, (result, error) => {
+      if (error) return grunt.fail.fatal(error);
+      const noticePath = path.join(buildPath, 'NOTICE.txt');
+      const fd = fs.openSync(noticePath, 'w');
+      fs.appendFileSync(fd, getBaseNotice());
+      fs.appendFileSync(fd, getPackageInfo(result));
+      fs.appendFileSync(fd, getNodeInfo());
+      fs.closeSync(fd);
+      done();
+    });
+  });
+}
diff --git a/tasks/build/notice/base_notice.txt b/tasks/build/notice/base_notice.txt
new file mode 100644
index 0000000000000..19f505cdfe61b
--- /dev/null
+++ b/tasks/build/notice/base_notice.txt
@@ -0,0 +1,59 @@
+Kibana
+Copyright 2012-2017 Elasticsearch
+
+---
+This product bundles angular-ui-bootstrap@0.12.1 which is available under a
+"MIT" license.
+
+The MIT License
+
+Copyright (c) 2012-2014 the AngularUI Team, https://github.com/organizations/angular-ui/teams/291112
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+---
+This product bundles bootstrap@3.3.6 which is available under a
+"MIT" license.
+
+The MIT License (MIT)
+
+Copyright (c) 2011-2015 Twitter, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+---
+This product bundles geohash.js which is available under a
+"MIT" license.  For details, see src/ui/public/utils/decode_geo_hash.js.
+---

From bfadc5e772a4db99cab580638a875e459dd1813a Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 16 Feb 2017 08:45:18 -0800
Subject: [PATCH 015/150] Adjust Table component styles and markup to maintain
 fixed column widths, regardless of cell content. (#10378)

* Adjust Table component styles and markup to maintain fixed column widths, regardless of cell content.
- Fix ellipsis-truncation of text in IE11 and Edge.
- Update Visualize landing table markup.

* Update Dashboard landing table and Saved Objects table with cell liner markup.
---
 .../dashboard/listing/dashboard_listing.html  | 14 ++++----
 .../management/sections/objects/_objects.html | 14 ++++----
 .../visualize/listing/visualize_listing.html  | 24 ++++++++-----
 ui_framework/components/table/_table.scss     | 31 ++++++++++++----
 ui_framework/dist/ui_framework.css            | 36 +++++++++++++++----
 .../doc_site/src/views/table/table.html       |  2 +-
 6 files changed, 88 insertions(+), 33 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
index 47ba74333372b..9d7318b8e91c7 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -135,12 +135,14 @@
         class="kuiTableRow"
       >
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-          <input
-            type="checkbox"
-            class="kuiCheckBox"
-            ng-click="listingController.toggleItem(item)"
-            ng-checked="listingController.isItemChecked(item)"
-          >
+          <div class="kuiTableRowCell__liner">
+            <input
+              type="checkbox"
+              class="kuiCheckBox"
+              ng-click="listingController.toggleItem(item)"
+              ng-checked="listingController.isItemChecked(item)"
+            >
+          </div>
         </td>
 
         <td class="kuiTableRowCell">
diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.html b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
index d8c70ea492048..c501a1fd84619 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/_objects.html
+++ b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
@@ -139,12 +139,14 @@ <h1 class="kuiTitle">
             class="kuiTableRow"
           >
             <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-              <input
-                type="checkbox"
-                class="kuiCheckBox"
-                ng-click="toggleItem(item)"
-                ng-checked="selectedItems.indexOf(item) >= 0"
-              >
+              <div class="kuiTableRowCell__liner">
+                <input
+                  type="checkbox"
+                  class="kuiCheckBox"
+                  ng-click="toggleItem(item)"
+                  ng-checked="selectedItems.indexOf(item) >= 0"
+                >
+              </div>
             </td>
             <td class="kuiTableRowCell">
               <div class="kuiTableRowCell__liner">
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
index 70dda2a951266..2099b50603de3 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -117,7 +117,10 @@
             >
           </th>
 
-          <th class="kuiTableHeaderCell" ng-click="listingController.sortOn('title')">
+          <th
+            class="kuiTableHeaderCell"
+            ng-click="listingController.sortOn('title')"
+          >
             Name
             <span
               class="kuiIcon"
@@ -126,7 +129,10 @@
             ></span>
           </th>
 
-          <th class="kuiTableHeaderCell" ng-click="listingController.sortOn('type')">
+          <th
+            class="kuiTableHeaderCell"
+            ng-click="listingController.sortOn('type')"
+          >
             Type
             <span
               class="kuiIcon"
@@ -143,12 +149,14 @@
           class="kuiTableRow"
         >
           <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-            <input
-              type="checkbox"
-              class="kuiCheckBox"
-              ng-click="listingController.toggleItem(item)"
-              ng-checked="listingController.isItemChecked(item)"
-            >
+            <div class="kuiTableRowCell__liner">
+              <input
+                type="checkbox"
+                class="kuiCheckBox"
+                ng-click="listingController.toggleItem(item)"
+                ng-checked="listingController.isItemChecked(item)"
+              >
+            </div>
           </td>
 
           <td class="kuiTableRowCell">
diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
index 66402eb89aa6a..52421ab28adbd 100644
--- a/ui_framework/components/table/_table.scss
+++ b/ui_framework/components/table/_table.scss
@@ -1,15 +1,23 @@
+$tableCellPadding: 7px 8px 8px;
+
+/**
+ * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
+ */
 @mixin tableCell {
   font-size: $fontSize;
   font-weight: 400;
-  line-height: $lineHeight;
-  padding: 7px 8px 8px;
   text-align: left;
+  max-width: 20px; /* 1 */
 
   &:last-child {
     padding-right: 16px;
   }
 }
 
+/**
+ * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
+ * specifying a column width, e.g. the checkbox column.
+ */
 .kuiTable {
   width: 100%;
   border: $tableBorder;
@@ -19,6 +27,8 @@
 
 .kuiTableHeaderCell {
   @include tableCell;
+  padding: $tableCellPadding;
+  line-height: $lineHeight;
   color: #a7a7a7;
 }
 
@@ -64,11 +74,15 @@
 
   /**
    * 1. Vertically align all children.
+   * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If
+   *    the padding was on the cell, the ellipsis would be cropped.
    */
   .kuiTableRowCell__liner {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: nowrap; /* 2 */
+    overflow: hidden; /* 2 */
+    text-overflow: ellipsis; /* 2 */
+    padding: $tableCellPadding; /* 2 */
+    line-height: $lineHeight; /* 1 */
 
     & > * {
       vertical-align: middle; /* 1 */
@@ -86,10 +100,15 @@
 /**
  * 1. Rendered width of cell with checkbox inside of it.
  * 2. Align checkbox with text in other cells.
+ * 3. Show the checkbox in Edge; otherwise it gets cropped.
  */
 .kuiTableHeaderCell--checkBox,
 .kuiTableRowCell--checkBox {
   width: 28px; /* 1 */
   padding-right: 0;
-  line-height: 1;
+  line-height: 1; /* 2 */
+
+  .kuiTableRowCell__liner {
+    overflow: visible; /* 3 */
+  }
 }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index e258e6002612b..a6a3667f7fc10 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1362,6 +1362,13 @@ body {
   border-top: none;
   /* 2 */ }
 
+/**
+ * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
+ */
+/**
+ * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
+ * specifying a column width, e.g. the checkbox column.
+ */
 .kuiTable {
   width: 100%;
   border: 2px solid #E4E4E4;
@@ -1371,9 +1378,11 @@ body {
 .kuiTableHeaderCell {
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.5;
-  padding: 7px 8px 8px;
   text-align: left;
+  max-width: 20px;
+  /* 1 */
+  padding: 7px 8px 8px;
+  line-height: 1.5;
   color: #a7a7a7; }
   .kuiTableHeaderCell:last-child {
     padding-right: 16px; }
@@ -1406,9 +1415,9 @@ body {
 .kuiTableRowCell {
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.5;
-  padding: 7px 8px 8px;
   text-align: left;
+  max-width: 20px;
+  /* 1 */
   color: #191E23;
   border-top: 1px solid #E4E4E4; }
   .kuiTableRowCell:last-child {
@@ -1416,11 +1425,20 @@ body {
 
 /**
    * 1. Vertically align all children.
+   * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If
+   *    the padding was on the cell, the ellipsis would be cropped.
    */
 .kuiTableRowCell__liner {
   white-space: nowrap;
+  /* 2 */
   overflow: hidden;
-  text-overflow: ellipsis; }
+  /* 2 */
+  text-overflow: ellipsis;
+  /* 2 */
+  padding: 7px 8px 8px;
+  /* 2 */
+  line-height: 1.5;
+  /* 1 */ }
   .kuiTableRowCell__liner > * {
     vertical-align: middle;
     /* 1 */ }
@@ -1433,13 +1451,19 @@ body {
 /**
  * 1. Rendered width of cell with checkbox inside of it.
  * 2. Align checkbox with text in other cells.
+ * 3. Show the checkbox in Edge; otherwise it gets cropped.
  */
 .kuiTableHeaderCell--checkBox,
 .kuiTableRowCell--checkBox {
   width: 28px;
   /* 1 */
   padding-right: 0;
-  line-height: 1; }
+  line-height: 1;
+  /* 2 */ }
+  .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner,
+  .kuiTableRowCell--checkBox .kuiTableRowCell__liner {
+    overflow: visible;
+    /* 3 */ }
 
 .kuiTabs {
   display: -webkit-box;
diff --git a/ui_framework/doc_site/src/views/table/table.html b/ui_framework/doc_site/src/views/table/table.html
index e1659e1dcf6b0..04df684f61011 100644
--- a/ui_framework/doc_site/src/views/table/table.html
+++ b/ui_framework/doc_site/src/views/table/table.html
@@ -88,7 +88,7 @@
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <a class="kuiLink" href="#">Celebration</a>
+          <a class="kuiLink" href="#">Celebration of some very long content that will affect cell width and should eventually become truncated</a>
         </div>
       </td>
       <td class="kuiTableRowCell">

From 7c02f3b551634d4dacfffeb283bb572ee5a0cb2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <weltenwort@users.noreply.github.com>
Date: Thu, 16 Feb 2017 18:37:51 +0100
Subject: [PATCH 016/150] Hide inline filters in absence of filter function
 (#10394)

The inline filters are now hidden when no `filter` property has been
passed to the row directive, which is more consistent with the filters
in the document details table. The context view relies on this behaviour
to hide the filtering actions.

Improving the `inlineFilter` to actually re-use the passed `filter`
function happens in #10395.
---
 src/ui/public/doc_table/components/table_row.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ui/public/doc_table/components/table_row.js b/src/ui/public/doc_table/components/table_row.js
index 283e1660a1019..38b8d695e3099 100644
--- a/src/ui/public/doc_table/components/table_row.js
+++ b/src/ui/public/doc_table/components/table_row.js
@@ -107,7 +107,10 @@ module.directive('kbnTableRow', ['$compile', 'Private', function ($compile, Priv
           newHtmls.push(cellTemplate({
             timefield: true,
             formatted: _displayField(row, indexPattern.timeFieldName),
-            filterable: mapping[indexPattern.timeFieldName].filterable,
+            filterable: (
+              mapping[indexPattern.timeFieldName].filterable
+              && _.isFunction($scope.filter)
+            ),
             column: indexPattern.timeFieldName
           }));
         }
@@ -115,7 +118,8 @@ module.directive('kbnTableRow', ['$compile', 'Private', function ($compile, Priv
         $scope.columns.forEach(function (column) {
           const isFilterable = $scope.flattenedRow[column] !== undefined
             && mapping[column]
-            && mapping[column].filterable;
+            && mapping[column].filterable
+            && _.isFunction($scope.filter);
 
           newHtmls.push(cellTemplate({
             timefield: false,

From 9120d17306e0536fb5332d53be2f35a5495e1431 Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jbudz@users.noreply.github.com>
Date: Thu, 16 Feb 2017 12:02:09 -0600
Subject: [PATCH 017/150] [plugin cli] Fix file:/// paths on Windows (#10083)

* [plugin cli] Fix file:/// paths on Windows

* [plugin cli] Stricter path checking, keeps support for file://

* [plugin cli] Add deprecation warning for file://
---
 src/cli_plugin/install/__tests__/download.js | 33 +++++++++++++++++++-
 src/cli_plugin/install/download.js           | 24 +++++++++++++-
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/cli_plugin/install/__tests__/download.js b/src/cli_plugin/install/__tests__/download.js
index d38728fe25578..656287c6bf1c2 100644
--- a/src/cli_plugin/install/__tests__/download.js
+++ b/src/cli_plugin/install/__tests__/download.js
@@ -6,7 +6,7 @@ import rimraf from 'rimraf';
 import mkdirp from 'mkdirp';
 import Logger from '../../lib/logger';
 import { UnsupportedProtocolError } from '../../lib/errors';
-import { download, _downloadSingle } from '../download';
+import { download, _downloadSingle, _getFilePath, _checkFilePathDeprecation } from '../download';
 import { join } from 'path';
 
 describe('kibana cli', function () {
@@ -133,6 +133,37 @@ describe('kibana cli', function () {
 
     });
 
+    describe('_getFilePath', function () {
+      it('should decode paths', function () {
+        expect(_getFilePath('Test%20folder/file.zip')).to.equal('Test folder/file.zip');
+      });
+
+      it('should remove the leading slash from windows paths', function () {
+        const platform = Object.getOwnPropertyDescriptor(process, 'platform');
+        Object.defineProperty(process, 'platform', { value: 'win32' });
+
+        expect(_getFilePath('/C:/foo/bar')).to.equal('C:/foo/bar');
+
+        Object.defineProperty(process, 'platform', platform);
+      });
+
+    });
+
+    describe('Windows file:// deprecation', function () {
+      it('should log a warning if a file:// path is used', function () {
+        const platform = Object.getOwnPropertyDescriptor(process, 'platform');
+        Object.defineProperty(process, 'platform', { value: 'win32' });
+        const logger = {
+          log: sinon.spy()
+        };
+        _checkFilePathDeprecation('file://foo/bar', logger);
+        _checkFilePathDeprecation('file:///foo/bar', logger);
+        expect(logger.log.callCount).to.be(1);
+        expect(logger.log.calledWith('Install paths with file:// are deprecated, use file:/// instead')).to.be(true);
+        Object.defineProperty(process, 'platform', platform);
+      });
+    });
+
     describe('download', function () {
       it('should loop through bad urls until it finds a good one.', function () {
         const filePath = join(__dirname, 'replies/test_plugin.zip');
diff --git a/src/cli_plugin/install/download.js b/src/cli_plugin/install/download.js
index 9083d38a338ea..f4018e29aa225 100644
--- a/src/cli_plugin/install/download.js
+++ b/src/cli_plugin/install/download.js
@@ -3,12 +3,34 @@ import downloadLocalFile from './downloaders/file';
 import { UnsupportedProtocolError } from '../lib/errors';
 import { parse } from 'url';
 
+function _isWindows() {
+  return /^win/.test(process.platform);
+}
+
+export function _getFilePath(filePath, sourceUrl) {
+  const decodedPath = decodeURI(filePath);
+  const prefixedDrive = /^\/[a-zA-Z]:/.test(decodedPath);
+  if (_isWindows() && prefixedDrive) {
+    return decodedPath.slice(1);
+  }
+
+  return decodedPath;
+}
+
+export function _checkFilePathDeprecation(sourceUrl, logger) {
+  const twoSlashes = /^file:\/\/(?!\/)/.test(sourceUrl);
+  if (_isWindows() && twoSlashes) {
+    logger.log('Install paths with file:// are deprecated, use file:/// instead');
+  }
+}
+
 export function _downloadSingle(settings, logger, sourceUrl) {
   const urlInfo = parse(sourceUrl);
   let downloadPromise;
 
   if (/^file/.test(urlInfo.protocol)) {
-    downloadPromise = downloadLocalFile(logger, decodeURI(urlInfo.path), settings.tempArchiveFile);
+    _checkFilePathDeprecation(sourceUrl, logger);
+    downloadPromise = downloadLocalFile(logger, _getFilePath(urlInfo.path, sourceUrl), settings.tempArchiveFile);
   } else if (/^https?/.test(urlInfo.protocol)) {
     downloadPromise = downloadHttpFile(logger, sourceUrl, settings.tempArchiveFile, settings.timeout);
   } else {

From 1a84ce17c85bbd1899ec5b99b52693e97f13df34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <weltenwort@users.noreply.github.com>
Date: Thu, 16 Feb 2017 19:26:16 +0100
Subject: [PATCH 018/150] Re-use the filter function for inline filtering
 (#10395)

Re-using the passed filter function improves consistency with the
implementation of the filters in the document details table.
---
 src/ui/public/doc_table/components/table_row.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/ui/public/doc_table/components/table_row.js b/src/ui/public/doc_table/components/table_row.js
index 38b8d695e3099..33fa7fb8d8c11 100644
--- a/src/ui/public/doc_table/components/table_row.js
+++ b/src/ui/public/doc_table/components/table_row.js
@@ -9,7 +9,6 @@ import noWhiteSpace from 'ui/utils/no_white_space';
 import openRowHtml from 'ui/doc_table/components/table_row/open.html';
 import detailsHtml from 'ui/doc_table/components/table_row/details.html';
 import uiModules from 'ui/modules';
-import FilterManagerProvider from 'ui/filter_manager';
 const module = uiModules.get('app/discover');
 
 
@@ -25,10 +24,9 @@ const MIN_LINE_LENGTH = 20;
  * <tr ng-repeat="row in rows" kbn-table-row="row"></tr>
  * ```
  */
-module.directive('kbnTableRow', ['$compile', 'Private', function ($compile, Private) {
+module.directive('kbnTableRow', ['$compile', function ($compile) {
   const cellTemplate = _.template(noWhiteSpace(require('ui/doc_table/components/table_row/cell.html')));
   const truncateByHeightTemplate = _.template(noWhiteSpace(require('ui/partials/truncate_by_height.html')));
-  const filterManager = Private(FilterManagerProvider);
 
   return {
     restrict: 'A',
@@ -88,8 +86,7 @@ module.directive('kbnTableRow', ['$compile', 'Private', function ($compile, Priv
       $scope.inlineFilter = function inlineFilter($event, type) {
         const column = $($event.target).data().column;
         const field = $scope.indexPattern.fields.byName[column];
-        $scope.indexPattern.popularizeField(field, 1);
-        filterManager.add(field, $scope.flattenedRow[column], type, $scope.indexPattern.id);
+        $scope.filter(field, $scope.flattenedRow[column], type);
       };
 
       // create a tr element that lists the value for each *column*

From 9cfbd3d2c5419d48a7917aea7f98d4b037ea9835 Mon Sep 17 00:00:00 2001
From: Lukas Olson <olson.lukas@gmail.com>
Date: Thu, 16 Feb 2017 12:36:20 -0700
Subject: [PATCH 019/150] Fix issue where selected columns persist when
 creating a new search (#10357)

---
 src/core_plugins/kibana/public/discover/controllers/discover.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core_plugins/kibana/public/discover/controllers/discover.js b/src/core_plugins/kibana/public/discover/controllers/discover.js
index e9f4012d28f7c..2063333a357bf 100644
--- a/src/core_plugins/kibana/public/discover/controllers/discover.js
+++ b/src/core_plugins/kibana/public/discover/controllers/discover.js
@@ -159,7 +159,7 @@ function discoverController($scope, config, courier, $route, $window, Notifier,
     return {
       query: $scope.searchSource.get('query') || '',
       sort: getSort.array(savedSearch.sort, $scope.indexPattern),
-      columns: savedSearch.columns.length > 0 ? savedSearch.columns : config.get('defaultColumns'),
+      columns: savedSearch.columns.length > 0 ? savedSearch.columns : config.get('defaultColumns').slice(),
       index: $scope.indexPattern.id,
       interval: 'auto',
       filters: _.cloneDeep($scope.searchSource.getOwn('filter'))

From c5d3fd5bb2a82bf2ee1a61ed638d2d3eed924f67 Mon Sep 17 00:00:00 2001
From: Spencer <spalger@users.noreply.github.com>
Date: Thu, 16 Feb 2017 13:12:53 -0700
Subject: [PATCH 020/150] [courier] resolve looper iteration when requests are
 aborted (#10392)

* [courier] resolve looper iteration when requests are aborted

The search looper returns the promise from search executions to ensure that subsequent loops do not run until the previous loop has completed. This causes the looper to get stuck when all of the aborted requests are completed, as completed requests do not resolve or reject their promises, causing the looper to never allow another search loop. Since this behavior is desirable for pages where we don't want to execute the `.then()` or `.catch()` callbacks for requests that were aborted, we work around it in this specific case by creating a promise that is resolved when each request is either aborted or completed.

* [ui/promises] add Promise.race() method to Promises util

* [courier/request] use angular promises in courier

* [courier/looper] no single-letter variables

* [ui/promises] add tests for Promise.race()
---
 .../public/courier/data_source/_abstract.js   |  2 +-
 .../courier/data_source/search_source.js      |  2 +-
 src/ui/public/courier/fetch/fetch.js          |  2 +-
 .../public/courier/fetch/request/request.js   | 15 +++-
 src/ui/public/courier/looper/search.js        |  9 +-
 src/ui/public/promises/__tests__/promises.js  | 86 +++++++++++++++++++
 src/ui/public/promises/promises.js            |  7 ++
 7 files changed, 114 insertions(+), 9 deletions(-)

diff --git a/src/ui/public/courier/data_source/_abstract.js b/src/ui/public/courier/data_source/_abstract.js
index f8205a61f1b5f..1e9cce106ce1d 100644
--- a/src/ui/public/courier/data_source/_abstract.js
+++ b/src/ui/public/courier/data_source/_abstract.js
@@ -185,7 +185,7 @@ export default function SourceAbstractFactory(Private, Promise, PromiseEmitter)
 
     courierFetch.these([req]);
 
-    return req.defer.promise;
+    return req.getCompletePromise();
   };
 
   /**
diff --git a/src/ui/public/courier/data_source/search_source.js b/src/ui/public/courier/data_source/search_source.js
index c31039db1dd57..df87fcd7919fe 100644
--- a/src/ui/public/courier/data_source/search_source.js
+++ b/src/ui/public/courier/data_source/search_source.js
@@ -175,7 +175,7 @@ export default function SearchSourceFactory(Promise, Private, config) {
 
       // return promises created by the completion handler so that
       // errors will bubble properly
-      return req.defer.promise.then(addRequest);
+      return req.getCompletePromise().then(addRequest);
     });
   };
 
diff --git a/src/ui/public/courier/fetch/fetch.js b/src/ui/public/courier/fetch/fetch.js
index 001e7be1847f0..47497b01b848f 100644
--- a/src/ui/public/courier/fetch/fetch.js
+++ b/src/ui/public/courier/fetch/fetch.js
@@ -23,7 +23,7 @@ export default function fetchService(Private, Promise) {
   const fetchTheseSoon = (requests) => {
     requests.forEach(req => req._setFetchRequested());
     debouncedFetchThese();
-    return Promise.all(requests.map(req => req.defer.promise));
+    return Promise.all(requests.map(req => req.getCompletePromise()));
   };
 
   this.fetchQueued = (strategy) => {
diff --git a/src/ui/public/courier/fetch/request/request.js b/src/ui/public/courier/fetch/request/request.js
index 6c9aa65c28645..61b99ff44e6ae 100644
--- a/src/ui/public/courier/fetch/request/request.js
+++ b/src/ui/public/courier/fetch/request/request.js
@@ -14,7 +14,7 @@ export default function AbstractReqProvider(Private, Promise) {
     constructor(source, defer) {
       this.source = source;
       this.defer = defer || Promise.defer();
-      this._whenAbortedHandlers = [];
+      this.abortedDefer = Promise.defer();
       requestQueue.push(this);
     }
 
@@ -120,11 +120,12 @@ export default function AbstractReqProvider(Private, Promise) {
       this._markStopped();
       this.defer = null;
       this.aborted = true;
-      _.callEach(this._whenAbortedHandlers);
+      this.abortedDefer.resolve();
+      this.abortedDefer = null;
     }
 
     whenAborted(cb) {
-      this._whenAbortedHandlers.push(cb);
+      this.abortedDefer.promise.then(cb);
     }
 
     complete() {
@@ -133,6 +134,14 @@ export default function AbstractReqProvider(Private, Promise) {
       this.defer.resolve(this.resp);
     }
 
+    getCompletePromise() {
+      return this.defer.promise;
+    }
+
+    getCompleteOrAbortedPromise() {
+      return Promise.race([ this.defer.promise, this.abortedDefer.promise ]);
+    }
+
     clone() {
       return new this.constructor(this.source, this.defer);
     }
diff --git a/src/ui/public/courier/looper/search.js b/src/ui/public/courier/looper/search.js
index 861e59e9ff541..68db5ae6f4e01 100644
--- a/src/ui/public/courier/looper/search.js
+++ b/src/ui/public/courier/looper/search.js
@@ -17,9 +17,12 @@ export default function SearchLooperService(Private, Promise, Notifier, $rootSco
    */
   const searchLooper = new Looper(null, function () {
     $rootScope.$broadcast('courier:searchRefresh');
-    return fetch.these(
-      requestQueue.getInactive(searchStrategy)
-    );
+    const requests = requestQueue.getInactive(searchStrategy);
+    // promise returned from fetch.these() only resolves when
+    // the requests complete, but we want to continue even if
+    // the requests abort so we make our own
+    fetch.these(requests);
+    return Promise.all(requests.map(request => request.getCompleteOrAbortedPromise()));
   });
 
   searchLooper.onHastyLoop = function () {
diff --git a/src/ui/public/promises/__tests__/promises.js b/src/ui/public/promises/__tests__/promises.js
index c9eedc43abeb4..c34f585269b4f 100644
--- a/src/ui/public/promises/__tests__/promises.js
+++ b/src/ui/public/promises/__tests__/promises.js
@@ -78,4 +78,90 @@ describe('Promise service', function () {
       expect(thenback.getCall(0).args[0][1]).to.be(undefined);
     });
   });
+
+  describe('Promise.race()', () => {
+    let crankTimeout;
+    beforeEach(() => {
+      // constantly call $rootScope.$apply() in a loop so we can
+      // pretend that these are real promises
+      (function crank$apply() {
+        $rootScope.$apply();
+        crankTimeout = setTimeout(crank$apply, 1);
+      }());
+    });
+
+    afterEach(() => {
+      clearTimeout(crankTimeout);
+    });
+
+    it(`resolves with the first resolved promise's value`, async () => {
+      const p1 = new Promise(resolve => setTimeout(resolve, 100, 1));
+      const p2 = new Promise(resolve => setTimeout(resolve, 200, 2));
+      expect(await Promise.race([p1, p2])).to.be(1);
+    });
+    it(`rejects with the first rejected promise's rejection reason`, async () => {
+      const p1 = new Promise((r, reject) => setTimeout(reject, 200, new Error(1)));
+      const p2 = new Promise((r, reject) => setTimeout(reject, 100, new Error(2)));
+      expect(await Promise.race([p1, p2]).catch(e => e.message)).to.be('2');
+    });
+    it('does not wait for subsequent promises to resolve/reject', async () => {
+      const start = Date.now();
+      const p1 = new Promise(resolve => setTimeout(resolve, 100));
+      const p2 = new Promise(resolve => setTimeout(resolve, 5000));
+      await Promise.race([p1, p2]);
+      const time = Date.now() - start;
+      expect(time).to.be.lessThan(1000);
+      expect(time).to.be.greaterThan(100);
+    });
+    it('allows non-promises in the array', async () => {
+      expect(await Promise.race([1,2,3])).to.be(1);
+    });
+    context('argument is undefined', () => {
+      it('rejects the promise', async () => {
+        const football = {};
+        expect(await Promise.race().catch(e => football)).to.be(football);
+      });
+    });
+    context('argument is a string', () => {
+      it(`resolves with the first character`, async () => {
+        expect(await Promise.race('abc')).to.be('a');
+      });
+    });
+    context('argument is a non-iterable object', () => {
+      it('reject the promise', async () => {
+        const football = {};
+        expect(await Promise.race({}).catch(e => football)).to.be(football);
+      });
+    });
+    context('argument is a generator', () => {
+      it('resolves with the first resolved value', async () => {
+        function *gen() {
+          yield new Promise(resolve => setTimeout(resolve, 100, 1));
+          yield new Promise(resolve => setTimeout(resolve, 200, 2));
+        }
+
+        expect(await Promise.race(gen())).to.be(1);
+      });
+      it('resolves with the first non-promise value', async () => {
+        function *gen() {
+          yield 1;
+          yield new Promise(resolve => setTimeout(resolve, 200, 2));
+        }
+
+        expect(await Promise.race(gen())).to.be(1);
+      });
+      it('iterates all values from the generator, even if one is already "resolved"', async () => {
+        let yieldCount = 0;
+        function *gen() {
+          yieldCount += 1;
+          yield 1;
+          yieldCount += 1;
+          yield new Promise(resolve => setTimeout(resolve, 200, 2));
+        }
+
+        expect(await Promise.race(gen())).to.be(1);
+        expect(yieldCount).to.be(2);
+      });
+    });
+  });
 });
diff --git a/src/ui/public/promises/promises.js b/src/ui/public/promises/promises.js
index 8e3ed9c0b3f17..1b1465e92249e 100644
--- a/src/ui/public/promises/promises.js
+++ b/src/ui/public/promises/promises.js
@@ -95,6 +95,13 @@ module.service('Promise', function ($q, $timeout) {
       });
     });
   };
+  Promise.race = function (iterable) {
+    return new Promise((resolve, reject) => {
+      for (const i of iterable) {
+        Promise.resolve(i).then(resolve, reject);
+      }
+    });
+  };
 
   return Promise;
 });

From 60b36f7f9ad6da44cba50c1cc5c3449a75d546e9 Mon Sep 17 00:00:00 2001
From: Rashid Khan <github.fliplap@spamgourmet.com>
Date: Thu, 16 Feb 2017 14:16:35 -0700
Subject: [PATCH 021/150] Stub node's fs when using webpack (#10411)

---
 src/optimize/base_optimizer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index f8ae4da8f4a0d..c7790c4ba4a04 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -91,6 +91,7 @@ class BaseOptimizer {
     };
 
     return {
+      node: { fs: 'empty' },
       context: fromRoot('.'),
       entry: this.bundles.toWebpackEntries(),
 

From 2fb2b4ca6ceb6364a6b2f9f7ae36dcf7b948f962 Mon Sep 17 00:00:00 2001
From: Brandon Kobel <brandon.kobel@gmail.com>
Date: Fri, 17 Feb 2017 06:59:36 -0500
Subject: [PATCH 022/150] Adding attributes to be used by sharing (#10234)

* Adding attributes to be used by sharing

* Moving the shared-item tags for dashboard panels

* Switching from shared-item-title/description to just title/description

* Removing move noise

* Fixing typo

* Adding data- prefix before attributes, began writing tests

Adding shared-item title tests

Switching up the panel tests

Adding description tests

Fixing linting

Adding dashboard timefilter test

Adding visualization shared-item tests

Adding shared-timefilter tests

Adding discover shared-item tests

* Fixing shared-items-count on dashboard

* Fixing functional test data for discover and visualize
---
 .../kibana/public/dashboard/dashboard.html    |  1 +
 .../kibana/public/dashboard/panel/panel.html  |  6 ++
 .../kibana/public/discover/index.html         |  3 +
 .../public/visualize/editor/editor.html       |  3 +
 src/ui/public/timepicker/__tests__/toggle.js  | 20 ++++++-
 .../timepicker/kbn_global_timepicker.html     |  2 +-
 test/fixtures/dump_data/dashboard.data.json   | 14 ++---
 test/fixtures/dump_data/discover.data.json    |  2 +
 test/fixtures/dump_data/discover.mapping.json |  1 +
 test/fixtures/dump_data/visualize.data.json   |  1 +
 .../fixtures/dump_data/visualize.mapping.json |  2 +-
 test/functional/apps/dashboard/_dashboard.js  | 23 +++++++-
 .../apps/discover/_collapse_expand.js         |  2 +-
 test/functional/apps/discover/_discover.js    | 18 +++++-
 test/functional/apps/discover/_field_data.js  |  2 +-
 .../functional/apps/discover/_shared_links.js |  2 +-
 .../functional/apps/visualize/_shared_item.js | 31 +++++++++++
 test/functional/apps/visualize/index.js       |  1 +
 test/support/page_objects/common.js           | 11 ++++
 test/support/page_objects/dashboard_page.js   | 55 +++++++++++++++----
 test/support/page_objects/discover_page.js    |  2 +-
 test/support/page_objects/header_page.js      |  8 +++
 test/support/page_objects/visualize_page.js   |  6 +-
 23 files changed, 185 insertions(+), 31 deletions(-)
 create mode 100644 test/fixtures/dump_data/discover.data.json
 create mode 100644 test/fixtures/dump_data/discover.mapping.json
 create mode 100644 test/functional/apps/visualize/_shared_item.js

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.html b/src/core_plugins/kibana/public/dashboard/dashboard.html
index 0549942b48582..7f3357c6ded70 100644
--- a/src/core_plugins/kibana/public/dashboard/dashboard.html
+++ b/src/core_plugins/kibana/public/dashboard/dashboard.html
@@ -70,6 +70,7 @@ <h2>This dashboard is empty. Let's fill it up!</h2>
     toggle-expand="toggleExpandPanel"
     create-child-ui-state="createChildUiState"
     toggle-expand="toggleExpandPanel"
+    shared-items-count="{{panels.length}}"
   ></dashboard-grid>
 
   <dashboard-panel ng-if="hasExpandedPanel()"
diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel.html b/src/core_plugins/kibana/public/dashboard/panel/panel.html
index c38cf45a2bd31..bbfff92e6b843 100644
--- a/src/core_plugins/kibana/public/dashboard/panel/panel.html
+++ b/src/core_plugins/kibana/public/dashboard/panel/panel.html
@@ -31,6 +31,9 @@
     search-source="savedObj.searchSource"
     show-spy-panel="!isFullScreenMode"
     ui-state="uiState"
+    shared-item
+    data-title="{{savedObj.title}}"
+    data-description="{{savedObj.description}}"
     render-counter
     class="panel-content">
   </visualize>
@@ -40,6 +43,9 @@
     search-source="savedObj.searchSource"
     sorting="panel.sort"
     columns="panel.columns"
+    shared-item
+    data-title="{{savedObj.title}}"
+    data-description="{{savedObj.description}}"
     render-counter
     class="panel-content"
     filter="filter">
diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html
index 3584ef747bcaf..a386ad6b0df86 100644
--- a/src/core_plugins/kibana/public/discover/index.html
+++ b/src/core_plugins/kibana/public/discover/index.html
@@ -126,6 +126,9 @@ <h2>Searching</h2>
                 columns="state.columns"
                 infinite-scroll="true"
                 filter="filterQuery"
+                shared-item
+                data-title="{{opts.savedSearch.lastSavedTitle}}"
+                data-description="{{opts.savedSearch.description}}"
                 render-counter>
               </doc-table>
 
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index db4e89fcffec0..c94de8fa94c58 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -81,6 +81,9 @@
     <div class="vis-editor-canvas" ng-if="!vis.type.fullEditor" ng-class="{ embedded: !chrome.getVisible() }">
       <visualize
         vis="vis"
+        shared-item
+        data-title="{{savedVis.lastSavedTitle}}"
+        data-description="{{savedVis.description}}"
         render-counter
         ui-state="uiState"
         show-spy-panel="chrome.getVisible()"
diff --git a/src/ui/public/timepicker/__tests__/toggle.js b/src/ui/public/timepicker/__tests__/toggle.js
index 88b9b7569e4ae..28dc118364ca1 100644
--- a/src/ui/public/timepicker/__tests__/toggle.js
+++ b/src/ui/public/timepicker/__tests__/toggle.js
@@ -5,15 +5,17 @@ import $ from 'jquery';
 
 describe('kbnGlobalTimepicker', function () {
   let compile;
+  let scope;
 
   beforeEach(() => {
     ngMock.module('kibana');
     ngMock.inject(($compile, $rootScope) => {
+      scope = $rootScope.$new();
       compile = () => {
         const $el = $('<kbn-global-timepicker></kbn-global-timepicker>');
         $el.data('$kbnTopNavController', {}); // Mock the kbnTopNav
-        $rootScope.$apply();
-        $compile($el)($rootScope);
+        $compile($el)(scope);
+        scope.$apply();
         return $el;
       };
     });
@@ -22,4 +24,18 @@ describe('kbnGlobalTimepicker', function () {
     const $el = compile();
     expect($el.attr('data-test-subj')).to.be('globalTimepicker');
   });
+  it('sets shared-timefilter to false when timefilter.enabled is false', function () {
+    scope.timefilter = {
+      enabled: false
+    };
+    const $el = compile();
+    expect($el.attr('shared-timefilter')).to.eql('false');
+  });
+  it('sets shared-timefilter to true when timefilter.enabled is true', function () {
+    scope.timefilter = {
+      enabled: true
+    };
+    const $el = compile();
+    expect($el.attr('shared-timefilter')).to.eql('true');
+  });
 });
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html
index 970632bad56e5..681d5b5c6f5bb 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.html
+++ b/src/ui/public/timepicker/kbn_global_timepicker.html
@@ -1,4 +1,4 @@
-<div ng-show="timefilter.enabled" class="kuiLocalMenu" data-test-subj="globalTimepicker">
+<div ng-show="timefilter.enabled" shared-timefilter="{{timefilter.enabled}}" class="kuiLocalMenu" data-test-subj="globalTimepicker">
   <div
     class="kuiLocalMenuItem"
     ng-click="toggleRefresh()"
diff --git a/test/fixtures/dump_data/dashboard.data.json b/test/fixtures/dump_data/dashboard.data.json
index 09239ffa6b8f4..72db98147c704 100644
--- a/test/fixtures/dump_data/dashboard.data.json
+++ b/test/fixtures/dump_data/dashboard.data.json
@@ -1,8 +1,8 @@
 {"_index":".kibana","_type":"index-pattern","_id":"logstash-*","_score":1,"_source":{"title":"logstash-*","timeFieldName":"@timestamp","fields":"[{\"name\":\"referer\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"agent\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:image:width\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"xss.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"headings.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.user.lastname\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:tag.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"geo.dest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:section.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"utc_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:card\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.char\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"clientip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image:height\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"host\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"machine.ram\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"links\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"id\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@tags.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"phpmemory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:card.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"ip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:modified_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:site_name.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"request.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:tag\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"agent.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"spaces\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:site.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"headings\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"_source\",\"type\":\"_source\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"relatedContent.og:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"request\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"index.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"extension\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"memory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"_index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"relatedContent.twitter:site\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"geo.coordinates\",\"type\":\"geo_point\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"meta.related\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"response.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@message.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"machine.os\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:section\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"xss\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"links.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"geo.srcdest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"extension.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"machine.os.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@tags\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"host.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:type.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"geo.src\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"spaces.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image:height.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:site_name\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"@message\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@timestamp\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"bytes\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"response\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.user.firstname\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:image:width.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:published_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"_id\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"_type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"_score\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false}]"}}
-{"_index":".kibana","_type":"visualization","_id":"Visualization-TileMap","_score":1,"_source":{"title":"Visualization TileMap","visState":"{\"title\":\"New Visualization\",\"type\":\"tile_map\",\"params\":{\"mapType\":\"Scaled Circle Markers\",\"isDesaturated\":true,\"addTooltip\":true,\"heatMaxZoom\":16,\"heatMinOpacity\":0.1,\"heatRadius\":25,\"heatBlur\":15,\"heatNormalizeData\":true,\"wms\":{\"enabled\":false,\"url\":\"https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WMSServer\",\"options\":{\"version\":\"1.3.0\",\"layers\":\"0\",\"format\":\"image/png\",\"transparent\":true,\"attribution\":\"Maps provided by USGS\",\"styles\":\"\"}}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"geohash_grid\",\"schema\":\"segment\",\"params\":{\"field\":\"geo.coordinates\",\"autoPrecision\":true,\"precision\":2}}],\"listeners\":{}}","uiStateJSON":"{}","description":"","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
-{"_index":".kibana","_type":"visualization","_id":"Visualization漢字-LineChart","_score":1,"_source":{"title":"Visualization漢字 LineChart","visState":"{\"title\":\"New Visualization\",\"type\":\"line\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"showCircles\":true,\"smoothLines\":false,\"interpolate\":\"linear\",\"scale\":\"linear\",\"drawLinesBetweenPoints\":true,\"radiusRatio\":9,\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"terms\",\"schema\":\"split\",\"params\":{\"field\":\"extension.raw\",\"size\":5,\"order\":\"desc\",\"orderBy\":\"1\",\"row\":false}}],\"listeners\":{}}","uiStateJSON":"{}","description":"","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
-{"_index":".kibana","_type":"visualization","_id":"Visualization漢字-AreaChart","_score":1,"_source":{"title":"Visualization漢字 AreaChart","visState":"{\"title\":\"New Visualization\",\"type\":\"area\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"smoothLines\":false,\"scale\":\"linear\",\"interpolate\":\"linear\",\"mode\":\"stacked\",\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"date_histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"@timestamp\",\"interval\":\"auto\",\"customInterval\":\"2h\",\"min_doc_count\":1,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
-{"_index":".kibana","_type":"visualization","_id":"Visualization☺-VerticalBarChart","_score":1,"_source":{"title":"Visualization☺ VerticalBarChart","visState":"{\"title\":\"New Visualization\",\"type\":\"histogram\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"scale\":\"linear\",\"mode\":\"stacked\",\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"date_histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"@timestamp\",\"interval\":\"auto\",\"customInterval\":\"2h\",\"min_doc_count\":1,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
-{"_index":".kibana","_type":"visualization","_id":"Visualization☺漢字-DataTable","_score":1,"_source":{"title":"Visualization☺漢字 DataTable","visState":"{\"title\":\"New Visualization\",\"type\":\"table\",\"params\":{\"perPage\":10,\"showPartialRows\":false,\"showMeticsAtAllLevels\":false},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"histogram\",\"schema\":\"bucket\",\"params\":{\"field\":\"bytes\",\"interval\":2000,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
-{"_index":".kibana","_type":"visualization","_id":"Visualization-PieChart","_score":1,"_source":{"title":"Visualization PieChart","visState":"{\"title\":\"New Visualization\",\"type\":\"pie\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"isDonut\":false},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"memory\",\"interval\":40000,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
-{"_index":".kibana","_type":"visualization","_id":"Visualization-MetricChart","_score":1,"_source":{"title":"Visualization MetricChart","visState":"{\"title\":\"New Visualization\",\"type\":\"metric\",\"params\":{\"handleNoResults\":true,\"fontSize\":60},\"aggs\":[{\"id\":\"1\",\"type\":\"percentile_ranks\",\"schema\":\"metric\",\"params\":{\"field\":\"memory\",\"values\":[99]}}],\"listeners\":{}}","uiStateJSON":"{}","description":"","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
+{"_index":".kibana","_type":"visualization","_id":"Visualization-TileMap","_score":1,"_source":{"title":"Visualization TileMap","visState":"{\"title\":\"New Visualization\",\"type\":\"tile_map\",\"params\":{\"mapType\":\"Scaled Circle Markers\",\"isDesaturated\":true,\"addTooltip\":true,\"heatMaxZoom\":16,\"heatMinOpacity\":0.1,\"heatRadius\":25,\"heatBlur\":15,\"heatNormalizeData\":true,\"wms\":{\"enabled\":false,\"url\":\"https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WMSServer\",\"options\":{\"version\":\"1.3.0\",\"layers\":\"0\",\"format\":\"image/png\",\"transparent\":true,\"attribution\":\"Maps provided by USGS\",\"styles\":\"\"}}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"geohash_grid\",\"schema\":\"segment\",\"params\":{\"field\":\"geo.coordinates\",\"autoPrecision\":true,\"precision\":2}}],\"listeners\":{}}","uiStateJSON":"{}","description":"TileMap","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
+{"_index":".kibana","_type":"visualization","_id":"Visualization漢字-LineChart","_score":1,"_source":{"title":"Visualization漢字 LineChart","visState":"{\"title\":\"New Visualization\",\"type\":\"line\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"showCircles\":true,\"smoothLines\":false,\"interpolate\":\"linear\",\"scale\":\"linear\",\"drawLinesBetweenPoints\":true,\"radiusRatio\":9,\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"terms\",\"schema\":\"split\",\"params\":{\"field\":\"extension.raw\",\"size\":5,\"order\":\"desc\",\"orderBy\":\"1\",\"row\":false}}],\"listeners\":{}}","uiStateJSON":"{}","description":"LineChart","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
+{"_index":".kibana","_type":"visualization","_id":"Visualization漢字-AreaChart","_score":1,"_source":{"title":"Visualization漢字 AreaChart","visState":"{\"title\":\"New Visualization\",\"type\":\"area\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"smoothLines\":false,\"scale\":\"linear\",\"interpolate\":\"linear\",\"mode\":\"stacked\",\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"date_histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"@timestamp\",\"interval\":\"auto\",\"customInterval\":\"2h\",\"min_doc_count\":1,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"AreaChart","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
+{"_index":".kibana","_type":"visualization","_id":"Visualization☺-VerticalBarChart","_score":1,"_source":{"title":"Visualization☺ VerticalBarChart","visState":"{\"title\":\"New Visualization\",\"type\":\"histogram\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"scale\":\"linear\",\"mode\":\"stacked\",\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"date_histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"@timestamp\",\"interval\":\"auto\",\"customInterval\":\"2h\",\"min_doc_count\":1,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"VerticalBarChart","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
+{"_index":".kibana","_type":"visualization","_id":"Visualization☺漢字-DataTable","_score":1,"_source":{"title":"Visualization☺漢字 DataTable","visState":"{\"title\":\"New Visualization\",\"type\":\"table\",\"params\":{\"perPage\":10,\"showPartialRows\":false,\"showMeticsAtAllLevels\":false},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"histogram\",\"schema\":\"bucket\",\"params\":{\"field\":\"bytes\",\"interval\":2000,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"DataTable","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
+{"_index":".kibana","_type":"visualization","_id":"Visualization-PieChart","_score":1,"_source":{"title":"Visualization PieChart","visState":"{\"title\":\"New Visualization\",\"type\":\"pie\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"isDonut\":false},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"memory\",\"interval\":40000,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"PieChart","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
+{"_index":".kibana","_type":"visualization","_id":"Visualization-MetricChart","_score":1,"_source":{"title":"Visualization MetricChart","visState":"{\"title\":\"New Visualization\",\"type\":\"metric\",\"params\":{\"handleNoResults\":true,\"fontSize\":60},\"aggs\":[{\"id\":\"1\",\"type\":\"percentile_ranks\",\"schema\":\"metric\",\"params\":{\"field\":\"memory\",\"values\":[99]}}],\"listeners\":{}}","uiStateJSON":"{}","description":"MetricChart","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
diff --git a/test/fixtures/dump_data/discover.data.json b/test/fixtures/dump_data/discover.data.json
new file mode 100644
index 0000000000000..bbaf0c6dd48d2
--- /dev/null
+++ b/test/fixtures/dump_data/discover.data.json
@@ -0,0 +1,2 @@
+{"_index":".kibana","_type":"index-pattern","_id":"logstash-*","_score":1,"_source":{"title":"logstash-*","timeFieldName":"@timestamp","fields":"[{\"name\":\"referer\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"agent\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:image:width\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"xss.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"headings.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.user.lastname\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:tag.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"geo.dest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:section.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"utc_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:card\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.char\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"clientip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image:height\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"host\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"machine.ram\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"links\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"id\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@tags.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"phpmemory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:card.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"ip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:modified_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:site_name.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"request.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:tag\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"agent.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"spaces\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:site.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"headings\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"_source\",\"type\":\"_source\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"relatedContent.og:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"request\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"index.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"extension\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"memory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"_index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"relatedContent.twitter:site\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"geo.coordinates\",\"type\":\"geo_point\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"meta.related\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"response.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@message.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"machine.os\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:section\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"xss\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"links.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"geo.srcdest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"extension.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"machine.os.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@tags\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"host.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:type.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"geo.src\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"spaces.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image:height.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:site_name\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"@message\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@timestamp\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"bytes\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"response\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.user.firstname\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:image:width.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:published_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"_id\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"_type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"_score\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false}]"}}
+{"_id": "ab12e3c0-f231-11e6-9486-733b1ac9221a","_type":"search","_source":{"title":"A Saved Search","description":"A Saved Search Description","hits":0,"columns":["_source"],"sort":["@timestamp","desc"],"version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\n \"index\": \"logstash-*\",\n \"highlightAll\": true,\n \"filter\": [],\n \"query\": {\n \"query_string\": {\n \"query\": \"*\",\n \"analyze_wildcard\": true\n }\n }\n}"}}}
diff --git a/test/fixtures/dump_data/discover.mapping.json b/test/fixtures/dump_data/discover.mapping.json
new file mode 100644
index 0000000000000..f33dbe1faa201
--- /dev/null
+++ b/test/fixtures/dump_data/discover.mapping.json
@@ -0,0 +1 @@
+{".kibana":{"mappings":{"index-pattern":{"properties":{"fields":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"timeFieldName":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"title":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"sourceFilters":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}}}}}}}
diff --git a/test/fixtures/dump_data/visualize.data.json b/test/fixtures/dump_data/visualize.data.json
index 4fa149045921f..a41403fe6f72d 100644
--- a/test/fixtures/dump_data/visualize.data.json
+++ b/test/fixtures/dump_data/visualize.data.json
@@ -1 +1,2 @@
 {"_index":".kibana","_type":"index-pattern","_id":"logstash-*","_score":1,"_source":{"title":"logstash-*","timeFieldName":"@timestamp","fields":"[{\"name\":\"referer\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"agent\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:image:width\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"xss.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"headings.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.user.lastname\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:tag.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"geo.dest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:section.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"utc_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:card\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.char\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"clientip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image:height\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"host\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"machine.ram\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"links\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"id\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@tags.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"phpmemory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:card.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"ip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:modified_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:site_name.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"request.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:tag\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"agent.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"spaces\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:site.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"headings\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"_source\",\"type\":\"_source\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"relatedContent.og:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"request\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"index.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"extension\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"memory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"_index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"relatedContent.twitter:site\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"geo.coordinates\",\"type\":\"geo_point\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"meta.related\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"response.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@message.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"machine.os\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:section\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"xss\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"links.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"geo.srcdest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"extension.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"machine.os.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@tags\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"host.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:type.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"geo.src\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"spaces.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image:height.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:site_name\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"@message\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@timestamp\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"bytes\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"response\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.user.firstname\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:image:width.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:published_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"_id\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"_type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"_score\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false}]"}}
+{"_index":".kibana","_type":"visualization","_id":"Visualization-AreaChart","_score":1,"_source":{"title":"Visualization AreaChart","visState":"{\"title\":\"New Visualization\",\"type\":\"area\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"smoothLines\":false,\"scale\":\"linear\",\"interpolate\":\"linear\",\"mode\":\"stacked\",\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"date_histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"@timestamp\",\"interval\":\"auto\",\"customInterval\":\"2h\",\"min_doc_count\":1,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"AreaChart","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
diff --git a/test/fixtures/dump_data/visualize.mapping.json b/test/fixtures/dump_data/visualize.mapping.json
index f33dbe1faa201..31c50d4c97c4b 100644
--- a/test/fixtures/dump_data/visualize.mapping.json
+++ b/test/fixtures/dump_data/visualize.mapping.json
@@ -1 +1 @@
-{".kibana":{"mappings":{"index-pattern":{"properties":{"fields":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"timeFieldName":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"title":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"sourceFilters":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}}}}}}}
+{".kibana":{"mappings":{"index-pattern":{"properties":{"fields":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"timeFieldName":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"title":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"sourceFilters":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}}}},"visualization":{"properties":{"description":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"kibanaSavedObjectMeta":{"properties":{"searchSourceJSON":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}}}},"title":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"uiStateJSON":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}},"version":{"type":"integer"},"visState":{"type":"text","fields":{"keyword":{"type":"keyword","ignore_above":256}}}}}}}}
diff --git a/test/functional/apps/dashboard/_dashboard.js b/test/functional/apps/dashboard/_dashboard.js
index faf7d4837d3e5..a4d590e5d9f27 100644
--- a/test/functional/apps/dashboard/_dashboard.js
+++ b/test/functional/apps/dashboard/_dashboard.js
@@ -78,7 +78,7 @@ bdd.describe('dashboard tab', function describeIndexTests() {
       { dataCol: '1', dataRow: (height * 3) + 1, dataSizeX: width, dataSizeY: height, title: titles[6] }
     ];
     return PageObjects.common.tryForTime(10000, function () {
-      return PageObjects.dashboard.getPanelData()
+      return PageObjects.dashboard.getPanelSizeData()
         .then(function (panelTitles) {
           PageObjects.common.log('visualization titles = ' + panelTitles);
           PageObjects.common.saveScreenshot('Dashboard-visualization-sizes');
@@ -87,6 +87,7 @@ bdd.describe('dashboard tab', function describeIndexTests() {
     });
   });
 
+
   bdd.it('filters when a pie chart slice is clicked', async function () {
     let descriptions = await PageObjects.dashboard.getFilterDescriptions(1000);
     expect(descriptions.length).to.equal(0);
@@ -103,4 +104,24 @@ bdd.describe('dashboard tab', function describeIndexTests() {
     const isDarkThemeOn = await PageObjects.dashboard.isDarkThemeOn();
     expect(isDarkThemeOn).to.equal(true);
   });
+
+  bdd.it('should have shared-items-count set to the number of visualizations', function  checkSavedItemsCount() {
+    const visualizations = PageObjects.dashboard.getTestVisualizations();
+    return PageObjects.common.tryForTime(10000, () => PageObjects.dashboard.getSharedItemsCount())
+      .then(function (count) {
+        PageObjects.common.log('shared-items-count = ' + count);
+        expect(count).to.eql(visualizations.length);
+      });
+  });
+
+  bdd.it('should have panels with expected shared-item title and description', function checkTitles() {
+    const visualizations = PageObjects.dashboard.getTestVisualizations();
+    return PageObjects.common.tryForTime(10000, function () {
+      return PageObjects.dashboard.getPanelSharedItemData()
+        .then(function (data) {
+          expect(data.map(item => item.title)).to.eql(visualizations.map(v => v.name));
+          expect(data.map(item => item.description)).to.eql(visualizations.map(v => v.description));
+        });
+    });
+  });
 });
diff --git a/test/functional/apps/discover/_collapse_expand.js b/test/functional/apps/discover/_collapse_expand.js
index ab471112932a6..0ba8c2c82fcfd 100644
--- a/test/functional/apps/discover/_collapse_expand.js
+++ b/test/functional/apps/discover/_collapse_expand.js
@@ -19,7 +19,7 @@ bdd.describe('discover tab', function describeIndexTests() {
     return esClient.deleteAndUpdateConfigDoc({ 'dateFormat:tz':'UTC', 'defaultIndex':'logstash-*' })
     .then(function loadkibanaIndexPattern() {
       PageObjects.common.debug('load kibana index with default index pattern');
-      return elasticDump.elasticLoad('visualize','.kibana');
+      return elasticDump.elasticLoad('discover','.kibana');
     })
     // and load a set of makelogs data
     .then(function loadIfEmptyMakelogs() {
diff --git a/test/functional/apps/discover/_discover.js b/test/functional/apps/discover/_discover.js
index 1cad3e6a3a367..e1c62d24657bc 100644
--- a/test/functional/apps/discover/_discover.js
+++ b/test/functional/apps/discover/_discover.js
@@ -20,7 +20,7 @@ bdd.describe('discover app', function describeIndexTests() {
     // delete .kibana index and update configDoc
     await esClient.deleteAndUpdateConfigDoc({ 'dateFormat:tz':'UTC', 'defaultIndex':'logstash-*' });
     PageObjects.common.debug('load kibana index with default index pattern');
-    await elasticDump.elasticLoad('visualize','.kibana');
+    await elasticDump.elasticLoad('discover','.kibana');
 
     // and load a set of makelogs data
     await scenarioManager.loadIfEmpty('logstashFunctional');
@@ -32,6 +32,7 @@ bdd.describe('discover app', function describeIndexTests() {
 
   bdd.describe('query', function () {
     const queryName1 = 'Query # 1';
+    const queryDescription1 = 'Query # 1 Description';
 
     bdd.it('should show correct time range string by timepicker', async function () {
       const actualTimeString = await PageObjects.discover.getTimespanText();
@@ -226,4 +227,19 @@ bdd.describe('discover app', function describeIndexTests() {
       expect(await PageObjects.header.isTimepickerOpen()).to.be(false);
     });
   });
+
+
+  bdd.describe('shared-item', function () {
+    bdd.it('should have correct shared-item title and description', async () => {
+      const expected = {
+        title: 'A Saved Search',
+        description: 'A Saved Search Description'
+      };
+
+      await PageObjects.discover.loadSavedSearch(expected.title);
+      const { title, description } = await PageObjects.common.getSharedItemTitleAndDescription();
+      expect(title).to.eql(expected.title);
+      expect(description).to.eql(expected.description);
+    });
+  });
 });
diff --git a/test/functional/apps/discover/_field_data.js b/test/functional/apps/discover/_field_data.js
index e6bc583433329..7ea5aee146b17 100644
--- a/test/functional/apps/discover/_field_data.js
+++ b/test/functional/apps/discover/_field_data.js
@@ -19,7 +19,7 @@ bdd.describe('discover app', function describeIndexTests() {
     return esClient.deleteAndUpdateConfigDoc({ 'dateFormat:tz':'UTC', 'defaultIndex':'logstash-*' })
     .then(function loadkibanaIndexPattern() {
       PageObjects.common.debug('load kibana index with default index pattern');
-      return elasticDump.elasticLoad('visualize','.kibana');
+      return elasticDump.elasticLoad('discover','.kibana');
     })
     // and load a set of makelogs data
     .then(function loadIfEmptyMakelogs() {
diff --git a/test/functional/apps/discover/_shared_links.js b/test/functional/apps/discover/_shared_links.js
index cca7965e5455b..3d2dc98e71d37 100644
--- a/test/functional/apps/discover/_shared_links.js
+++ b/test/functional/apps/discover/_shared_links.js
@@ -33,7 +33,7 @@ bdd.describe('shared links', function describeIndexTests() {
     return esClient.deleteAndUpdateConfigDoc({ 'dateFormat:tz':'UTC', 'defaultIndex':'logstash-*' })
     .then(function loadkibanaIndexPattern() {
       PageObjects.common.debug('load kibana index with default index pattern');
-      return elasticDump.elasticLoad('visualize','.kibana');
+      return elasticDump.elasticLoad('discover','.kibana');
     })
     // and load a set of makelogs data
     .then(function loadIfEmptyMakelogs() {
diff --git a/test/functional/apps/visualize/_shared_item.js b/test/functional/apps/visualize/_shared_item.js
new file mode 100644
index 0000000000000..54a4a7899f347
--- /dev/null
+++ b/test/functional/apps/visualize/_shared_item.js
@@ -0,0 +1,31 @@
+import expect from 'expect.js';
+
+import {
+  bdd
+} from '../../../support';
+
+import PageObjects from '../../../support/page_objects';
+
+bdd.describe('visualize app', function describeIndexTests() {
+
+  bdd.before(function () {
+    PageObjects.common.debug('navigateToApp visualize');
+    return PageObjects.common.navigateToApp('visualize');
+  });
+
+  bdd.describe('shared-item', function indexPatternCreation() {
+
+    bdd.it('should have the correct shared-item title and description', function () {
+      const expected = {
+        title: 'Visualization AreaChart',
+        description: 'AreaChart'
+      };
+      return PageObjects.visualize.clickVisualizationByName('Visualization AreaChart')
+        .then(() => PageObjects.common.getSharedItemTitleAndDescription())
+        .then(({ title, description }) => {
+          expect(title).to.eql(expected.title);
+          expect(description).to.eql(expected.description);
+        });
+    });
+  });
+});
diff --git a/test/functional/apps/visualize/index.js b/test/functional/apps/visualize/index.js
index 521d541620b26..046776ca69767 100644
--- a/test/functional/apps/visualize/index.js
+++ b/test/functional/apps/visualize/index.js
@@ -42,4 +42,5 @@ bdd.describe('visualize app', function () {
   require('./_vertical_bar_chart');
   require('./_heatmap_chart');
   require('./_point_series_options');
+  require('./_shared_item');
 });
diff --git a/test/support/page_objects/common.js b/test/support/page_objects/common.js
index 0310375cd3981..1a6a74f2d91b5 100644
--- a/test/support/page_objects/common.js
+++ b/test/support/page_objects/common.js
@@ -330,4 +330,15 @@ export default class Common {
     this.debug(`Found ${elements.length} for selector ${selector}`);
     return elements;
   }
+
+  async getSharedItemTitleAndDescription() {
+    const element = await this.remote
+    .setFindTimeout(defaultFindTimeout)
+    .findByCssSelector('[shared-item]');
+
+    return {
+      title: await element.getAttribute('data-title'),
+      description: await element.getAttribute('data-description')
+    };
+  }
 }
diff --git a/test/support/page_objects/dashboard_page.js b/test/support/page_objects/dashboard_page.js
index 9b5df5383f5cd..61a5f4f490b25 100644
--- a/test/support/page_objects/dashboard_page.js
+++ b/test/support/page_objects/dashboard_page.js
@@ -94,7 +94,7 @@ export default class DashboardPage {
 
   clickVizNameLink(vizName) {
     return this.findTimeout
-    .findByLinkText(vizName)
+    .findByPartialLinkText(vizName)
     .click();
   }
 
@@ -200,8 +200,8 @@ export default class DashboardPage {
     });
   }
 
-  getPanelData() {
-    PageObjects.common.debug('in getPanelData');
+  getPanelSizeData() {
+    PageObjects.common.debug('in getPanelSizeData');
     return this.findTimeout
     .findAllByCssSelector('li.gs-w')
     .then(function (titleObjects) {
@@ -251,18 +251,22 @@ export default class DashboardPage {
     });
   }
 
-  getTestVisualizationNames() {
+  getTestVisualizations() {
     return [
-      'Visualization PieChart',
-      'Visualization☺ VerticalBarChart',
-      'Visualization漢字 AreaChart',
-      'Visualization☺漢字 DataTable',
-      'Visualization漢字 LineChart',
-      'Visualization TileMap',
-      'Visualization MetricChart'
+      { name: 'Visualization PieChart', description: 'PieChart' },
+      { name: 'Visualization☺ VerticalBarChart', description: 'VerticalBarChart' },
+      { name: 'Visualization漢字 AreaChart', description: 'AreaChart' },
+      { name: 'Visualization☺漢字 DataTable', description: 'DataTable' },
+      { name: 'Visualization漢字 LineChart', description: 'LineChart' },
+      { name: 'Visualization TileMap', description: 'TileMap' },
+      { name: 'Visualization MetricChart', description: 'MetricChart' }
     ];
   }
 
+  getTestVisualizationNames() {
+    return this.getTestVisualizations().map(visualization => visualization.name);
+  }
+
   addVisualizations(visualizations) {
     return visualizations.reduce(function (promise, vizName) {
       return promise
@@ -301,4 +305,33 @@ export default class DashboardPage {
     return slices[0].click();
   }
 
+  getSharedItemsCount() {
+    PageObjects.common.debug('in getSharedItemsCount');
+    const attributeName = 'shared-items-count';
+    return this.findTimeout
+    .findByCssSelector(`[${attributeName}]`)
+    .then(function (element) {
+      if (element) {
+        return element.getAttribute(attributeName);
+      }
+
+      return Promise.reject();
+    });
+  }
+
+  getPanelSharedItemData() {
+    PageObjects.common.debug('in getPanelSharedItemData');
+    return this.findTimeout
+    .findAllByCssSelector('li.gs-w')
+    .then(function (elements) {
+      return Promise.all(elements.map(async element => {
+        const sharedItem = await element.findByCssSelector('[shared-item]');
+        return {
+          title: await sharedItem.getAttribute('data-title'),
+          description: await sharedItem.getAttribute('data-description')
+        };
+      }));
+    });
+  }
+
 }
diff --git a/test/support/page_objects/discover_page.js b/test/support/page_objects/discover_page.js
index 71d63da1c9007..dc332fa858034 100644
--- a/test/support/page_objects/discover_page.js
+++ b/test/support/page_objects/discover_page.js
@@ -49,7 +49,7 @@ export default class DiscoverPage {
   loadSavedSearch(searchName) {
     return this.clickLoadSavedSearchButton()
     .then(() => {
-      this.findTimeout.findByLinkText(searchName).click();
+      this.findTimeout.findByPartialLinkText(searchName).click();
     })
     .then(() => {
       return PageObjects.header.waitUntilLoadingHasFinished();
diff --git a/test/support/page_objects/header_page.js b/test/support/page_objects/header_page.js
index 341519e0bec62..35dfe12136bbd 100644
--- a/test/support/page_objects/header_page.js
+++ b/test/support/page_objects/header_page.js
@@ -186,4 +186,12 @@ export default class HeaderPage {
   async getPrettyDuration() {
     return await PageObjects.common.findTestSubject('globalTimepickerRange').getVisibleText();
   }
+
+  async isSharedTimefilterEnabled() {
+    const element = await this.remote
+    .setFindTimeout(defaultFindTimeout)
+    .findByCssSelector(`[shared-timefilter=true]`);
+
+    return new Boolean(element);
+  }
 }
diff --git a/test/support/page_objects/visualize_page.js b/test/support/page_objects/visualize_page.js
index a06115a9a3d38..90c967bfa0662 100644
--- a/test/support/page_objects/visualize_page.js
+++ b/test/support/page_objects/visualize_page.js
@@ -359,14 +359,14 @@ export default class VisualizePage {
       .type(vizName.replace('-',' '));
   }
 
-  clickVisualizationByLinkText(vizName) {
+  clickVisualizationByName(vizName) {
     const self = this;
     PageObjects.common.debug('clickVisualizationByLinkText(' + vizName + ')');
 
     return PageObjects.common.try(function tryingForTime() {
       return self.remote
       .setFindTimeout(defaultFindTimeout)
-      .findByLinkText(vizName)
+      .findByPartialLinkText(vizName)
       .click();
     });
   }
@@ -382,7 +382,7 @@ export default class VisualizePage {
   }
 
   openSavedVisualization(vizName) {
-    return this.clickVisualizationByLinkText(vizName);
+    return this.clickVisualizationByName(vizName);
   }
 
   getXAxisLabels() {

From e570afcca8c103365cb62f4c8ada25a078b693d0 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 17 Feb 2017 16:13:39 -0800
Subject: [PATCH 023/150] Migrate from a handrolled interface for building
 examples to using React Components directly. (#10259)

* Migrate from a handrolled interface for building examples to using React Components directly.
* Wrap components with containers instead of passing down state and actions via context.
---
 .../doc_site/src/actions/action_types.js      |   7 +-
 .../code_viewer/code_viewer_actions.js        |  30 ---
 .../src/actions/code_viewer_actions.js        |  10 +
 .../src/actions/example_nav_actions.js        |  12 +
 ui_framework/doc_site/src/actions/index.js    |   9 +-
 .../components/guide_code/_guide_code.scss    |   6 +
 .../src/components/guide_code/guide_code.jsx  |   5 +
 .../guide_code_viewer/_guide_code_viewer.scss |   7 -
 .../guide_code_viewer/guide_code_viewer.jsx   |  32 ++-
 .../src/components/guide_components.scss      |  11 +
 .../components/guide_demo/_guide_demo.scss    |   3 +
 .../src/components/guide_demo/guide_demo.jsx  |  60 +++++
 .../guide_example/_guide_example.scss         |   3 -
 .../guide_example/guide_example.jsx           |  78 ------
 .../components/guide_link/_guide_link.scss    |   0
 .../src/components/guide_link/guide_link.jsx  |  11 +
 .../src/components/guide_nav/guide_nav.jsx    |   4 +-
 .../src/components/guide_page/guide_page.jsx  |  25 +-
 .../guide_page/guide_page_container.js        |   9 +
 .../guide_page_section/guide_page_section.jsx | 139 ----------
 .../guide_page_side_nav.jsx                   |   3 +-
 .../guide_page_side_nav_item.jsx              |   7 +-
 .../_guide_section.scss}                      |  23 +-
 .../guide_section/guide_section.jsx           |  59 ++++
 .../guide_section/guide_section_container.js  |  17 ++
 .../guide_section/guide_section_types.js      |   4 +
 .../components/guide_text/_guide_text.scss    |   5 +
 .../src/components/guide_text/guide_text.jsx  |   5 +
 ui_framework/doc_site/src/components/index.js |  32 +--
 ui_framework/doc_site/src/main.scss           |   6 +-
 .../doc_site/src/services/routes/routes.js    |   1 -
 .../doc_site/src/store/configure_store.js     |   2 +
 ui_framework/doc_site/src/store/index.js      |  11 +
 .../src/store/reducers/code_viewer_reducer.js |  15 +-
 .../src/store/reducers/sections_reducer.js    |  36 +++
 .../views/action_item/action_item_example.jsx |  64 ++++-
 .../doc_site/src/views/app_container.js       |  27 +-
 ui_framework/doc_site/src/views/app_view.jsx  |  36 +--
 .../doc_site/src/views/bar/bar_example.jsx    | 105 ++++++--
 .../src/views/button/button_example.jsx       | 244 ++++++++++++-----
 .../src/views/event/event_example.jsx         |  68 +++--
 .../doc_site/src/views/form/form_example.jsx  | 130 ++++++---
 .../views/header_bar/header_bar_example.jsx   |  55 +++-
 .../doc_site/src/views/icon/icon_example.jsx  | 193 +++++++++----
 .../views/info_panel/info_panel_example.jsx   | 117 +++++---
 .../doc_site/src/views/link/link_example.jsx  |  36 ++-
 .../src/views/local_nav/local_nav_example.jsx | 255 +++++++++++++-----
 .../doc_site/src/views/menu/menu_example.jsx  |  55 +++-
 .../views/menu_button/menu_button_example.jsx |  94 +++++--
 .../micro_button/micro_button_example.jsx     |  94 +++++--
 .../src/views/modal/modal_example.jsx         |  59 +++-
 .../src/views/panel/panel_example.jsx         |  60 +++--
 .../views/status_text/status_text_example.jsx |  86 ++++--
 .../src/views/table/table_example.jsx         | 109 ++++++--
 .../doc_site/src/views/tabs/tabs_example.jsx  |  57 +++-
 .../src/views/tool_bar/tool_bar_example.jsx   |  86 ++++--
 .../views/typography/typography_example.jsx   |  94 +++++--
 .../vertical_rhythm_example.jsx               | 102 +++++--
 58 files changed, 1970 insertions(+), 943 deletions(-)
 delete mode 100644 ui_framework/doc_site/src/actions/code_viewer/code_viewer_actions.js
 create mode 100644 ui_framework/doc_site/src/actions/code_viewer_actions.js
 create mode 100644 ui_framework/doc_site/src/actions/example_nav_actions.js
 create mode 100644 ui_framework/doc_site/src/components/guide_code/_guide_code.scss
 create mode 100644 ui_framework/doc_site/src/components/guide_code/guide_code.jsx
 create mode 100644 ui_framework/doc_site/src/components/guide_components.scss
 create mode 100644 ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss
 create mode 100644 ui_framework/doc_site/src/components/guide_demo/guide_demo.jsx
 delete mode 100644 ui_framework/doc_site/src/components/guide_example/_guide_example.scss
 delete mode 100644 ui_framework/doc_site/src/components/guide_example/guide_example.jsx
 create mode 100644 ui_framework/doc_site/src/components/guide_link/_guide_link.scss
 create mode 100644 ui_framework/doc_site/src/components/guide_link/guide_link.jsx
 create mode 100644 ui_framework/doc_site/src/components/guide_page/guide_page_container.js
 delete mode 100644 ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx
 rename ui_framework/doc_site/src/components/{guide_page_section/_guide_page_section.scss => guide_section/_guide_section.scss} (65%)
 create mode 100644 ui_framework/doc_site/src/components/guide_section/guide_section.jsx
 create mode 100644 ui_framework/doc_site/src/components/guide_section/guide_section_container.js
 create mode 100644 ui_framework/doc_site/src/components/guide_section/guide_section_types.js
 create mode 100644 ui_framework/doc_site/src/components/guide_text/_guide_text.scss
 create mode 100644 ui_framework/doc_site/src/components/guide_text/guide_text.jsx
 create mode 100644 ui_framework/doc_site/src/store/index.js
 create mode 100644 ui_framework/doc_site/src/store/reducers/sections_reducer.js

diff --git a/ui_framework/doc_site/src/actions/action_types.js b/ui_framework/doc_site/src/actions/action_types.js
index c92f35ceccb5a..b288e7b0edbed 100644
--- a/ui_framework/doc_site/src/actions/action_types.js
+++ b/ui_framework/doc_site/src/actions/action_types.js
@@ -5,9 +5,10 @@ export default keyMirror({
 
   // Source code viewer actions
   OPEN_CODE_VIEWER: null,
-  UPDATE_CODE_VIEWER: null,
   CLOSE_CODE_VIEWER: null,
-  REGISTER_CODE: null,
-  UNREGISTER_CODE: null,
+
+  // Example nav actions
+  REGISTER_SECTION: null,
+  UNREGISTER_SECTION: null,
 
 });
diff --git a/ui_framework/doc_site/src/actions/code_viewer/code_viewer_actions.js b/ui_framework/doc_site/src/actions/code_viewer/code_viewer_actions.js
deleted file mode 100644
index 56b5a52e0399e..0000000000000
--- a/ui_framework/doc_site/src/actions/code_viewer/code_viewer_actions.js
+++ /dev/null
@@ -1,30 +0,0 @@
-
-import ActionTypes from '../action_types';
-
-export default {
-
-  openCodeViewer: slug => ({
-    type: ActionTypes.OPEN_CODE_VIEWER,
-    slug,
-  }),
-
-  updateCodeViewer: slug => ({
-    type: ActionTypes.UPDATE_CODE_VIEWER,
-    slug,
-  }),
-
-  closeCodeViewer: () => ({
-    type: ActionTypes.CLOSE_CODE_VIEWER,
-  }),
-
-  registerCode: code => ({
-    type: ActionTypes.REGISTER_CODE,
-    code,
-  }),
-
-  unregisterCode: code => ({
-    type: ActionTypes.UNREGISTER_CODE,
-    code
-  }),
-
-};
diff --git a/ui_framework/doc_site/src/actions/code_viewer_actions.js b/ui_framework/doc_site/src/actions/code_viewer_actions.js
new file mode 100644
index 0000000000000..33e2969554719
--- /dev/null
+++ b/ui_framework/doc_site/src/actions/code_viewer_actions.js
@@ -0,0 +1,10 @@
+import ActionTypes from './action_types';
+
+export const openCodeViewer = source => ({
+  type: ActionTypes.OPEN_CODE_VIEWER,
+  source,
+});
+
+export const closeCodeViewer = () => ({
+  type: ActionTypes.CLOSE_CODE_VIEWER,
+});
diff --git a/ui_framework/doc_site/src/actions/example_nav_actions.js b/ui_framework/doc_site/src/actions/example_nav_actions.js
new file mode 100644
index 0000000000000..cbcc5c542403f
--- /dev/null
+++ b/ui_framework/doc_site/src/actions/example_nav_actions.js
@@ -0,0 +1,12 @@
+import ActionTypes from './action_types';
+
+export const registerSection = (id, name) => ({
+  type: ActionTypes.REGISTER_SECTION,
+  id,
+  name,
+});
+
+export const unregisterSection = id => ({
+  type: ActionTypes.UNREGISTER_SECTION,
+  id,
+});
diff --git a/ui_framework/doc_site/src/actions/index.js b/ui_framework/doc_site/src/actions/index.js
index 22f997b682227..310bc91f2755e 100644
--- a/ui_framework/doc_site/src/actions/index.js
+++ b/ui_framework/doc_site/src/actions/index.js
@@ -1,4 +1,9 @@
+export {
+  openCodeViewer,
+  closeCodeViewer,
+} from './code_viewer_actions';
 
 export {
-  default as CodeViewerActions,
-} from './code_viewer/code_viewer_actions';
+  registerSection,
+  unregisterSection,
+} from './example_nav_actions';
diff --git a/ui_framework/doc_site/src/components/guide_code/_guide_code.scss b/ui_framework/doc_site/src/components/guide_code/_guide_code.scss
new file mode 100644
index 0000000000000..084c74fec9219
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_code/_guide_code.scss
@@ -0,0 +1,6 @@
+.guideCode {
+  padding: 2px 4px;
+  font-family: 'Ubuntu Mono', monospace;
+  background-color: #e8e8e8;
+  color: #565656;
+}
diff --git a/ui_framework/doc_site/src/components/guide_code/guide_code.jsx b/ui_framework/doc_site/src/components/guide_code/guide_code.jsx
new file mode 100644
index 0000000000000..8bca4d55222be
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_code/guide_code.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const GuideCode = props => (
+  <code className="guideCode">{props.children}</code>
+);
diff --git a/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
index dc5e60165fd17..65511fa561ed5 100644
--- a/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
+++ b/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
@@ -1,10 +1,3 @@
-.guideCode {
-  padding: 2px 4px;
-  font-family: 'Ubuntu Mono', monospace;
-  background-color: #e8e8e8;
-  color: #565656;
-}
-
 .guideCodeViewer {
   position: fixed;
   top: $guideNavHeight;
diff --git a/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx b/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx
index 8001ef89166f8..077590df7084b 100644
--- a/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx
+++ b/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx
@@ -1,4 +1,3 @@
-
 import React, {
   Component,
   PropTypes,
@@ -7,8 +6,7 @@ import React, {
 import classNames from 'classnames';
 import hljs from 'highlight.js';
 
-export default class GuideCodeViewer extends Component {
-
+export class GuideCodeViewer extends Component {
   constructor(props) {
     super(props);
   }
@@ -23,19 +21,26 @@ export default class GuideCodeViewer extends Component {
     }
   }
 
-  renderSection(title, content, codeClass) {
-    if (content) {
+  renderSection(type, code) {
+    const typeToCodeClassMap = {
+      JavaScript: 'javascript',
+      HTML: 'html',
+    };
+
+    const codeClass = typeToCodeClassMap[type];
+
+    if (code) {
       return (
-        <div className="guideCodeViewer__section">
+        <div className="guideCodeViewer__section" key={type}>
           <div className="guideCodeViewer__title">
-            {title}
+            {type}
           </div>
           <pre className="guideCodeViewer__content">
             <code
               ref={codeClass}
               className={codeClass}
             >
-              {content}
+              {code}
             </code>
           </pre>
         </div>
@@ -48,6 +53,10 @@ export default class GuideCodeViewer extends Component {
       'is-code-viewer-open': this.props.isOpen,
     });
 
+    const codeSections = this.props.source.map(sourceObject => (
+      this.renderSection(sourceObject.type, sourceObject.code)
+    ));
+
     return (
       <div className={classes}>
         <div className="guideCodeViewer__header">
@@ -59,18 +68,15 @@ export default class GuideCodeViewer extends Component {
           onClick={this.props.onClose}
         />
 
-        {this.renderSection('HTML', this.props.html, 'html')}
-        {this.renderSection('JavaScript', this.props.js, 'javascript')}
+        {codeSections}
       </div>
     );
   }
-
 }
 
 GuideCodeViewer.propTypes = {
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
   title: PropTypes.string,
-  html: PropTypes.string,
-  js: PropTypes.string,
+  source: PropTypes.array,
 };
diff --git a/ui_framework/doc_site/src/components/guide_components.scss b/ui_framework/doc_site/src/components/guide_components.scss
new file mode 100644
index 0000000000000..5650bee7369f2
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_components.scss
@@ -0,0 +1,11 @@
+$guideVerticalRhythm: 20px;
+
+@import "guide_code/guide_code";
+@import "guide_code_viewer/guide_code_viewer";
+@import "guide_demo/guide_demo";
+@import "guide_link/guide_link";
+@import "guide_nav/guide_nav";
+@import "guide_page/guide_page";
+@import "guide_page_side_nav/guide_page_side_nav";
+@import "guide_section/guide_section";
+@import "guide_text/guide_text";
diff --git a/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss b/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss
new file mode 100644
index 0000000000000..be542fe311b61
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss
@@ -0,0 +1,3 @@
+.guideDemo {
+  margin-top: $guideVerticalRhythm;
+}
diff --git a/ui_framework/doc_site/src/components/guide_demo/guide_demo.jsx b/ui_framework/doc_site/src/components/guide_demo/guide_demo.jsx
new file mode 100644
index 0000000000000..30ee411111d77
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_demo/guide_demo.jsx
@@ -0,0 +1,60 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import classNames from 'classnames';
+
+export class GuideDemo extends Component {
+  componentDidMount() {
+    this.update();
+  }
+
+  componentDidUpdate() {
+    this.update();
+  }
+
+  update() {
+    // Inject HTML
+    this.content.innerHTML = this.props.html;
+
+    // Inject JS
+    const js = document.createElement('script');
+    js.type = 'text/javascript';
+    js.innerHTML = this.props.js;
+    this.content.appendChild(js);
+
+    // Inject CSS
+    const css = document.createElement('style');
+    css.innerHTML = this.props.css;
+    this.content.appendChild(css);
+  }
+
+  render() {
+    const classes = classNames('guideDemo', {
+      'theme-dark': this.props.isDarkTheme,
+    });
+
+    return (
+      <div className={classes}>
+        <div
+          ref={c => (this.content = c)}
+        />
+      </div>
+    );
+  }
+}
+
+GuideDemo.propTypes = {
+  js: PropTypes.string.isRequired,
+  html: PropTypes.string.isRequired,
+  css: PropTypes.string.isRequired,
+  isDarkTheme: PropTypes.bool.isRequired,
+};
+
+GuideDemo.defaultProps = {
+  js: '',
+  html: '',
+  css: '',
+  isDarkTheme: false,
+};
diff --git a/ui_framework/doc_site/src/components/guide_example/_guide_example.scss b/ui_framework/doc_site/src/components/guide_example/_guide_example.scss
deleted file mode 100644
index ec52942938a92..0000000000000
--- a/ui_framework/doc_site/src/components/guide_example/_guide_example.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.guideExample {
-
-}
diff --git a/ui_framework/doc_site/src/components/guide_example/guide_example.jsx b/ui_framework/doc_site/src/components/guide_example/guide_example.jsx
deleted file mode 100644
index 0d5782368bb03..0000000000000
--- a/ui_framework/doc_site/src/components/guide_example/guide_example.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
-
-import {
-  Slugify,
-} from '../../services';
-
-import {
-  GuidePage,
-  GuidePageSection,
-} from '../';
-
-export default class GuideExample extends Component {
-
-  constructor(props, sections) {
-    super(props);
-
-    this.sections = sections.map(section => Object.assign({}, section, {
-      slug: Slugify.one(section.title),
-    }));
-  }
-
-  componentWillMount() {
-    this.sections.forEach(section => {
-      this.context.registerCode(section);
-    });
-  }
-
-  componentWillUnmount() {
-    this.sections.forEach(section => {
-      this.context.unregisterCode(section);
-    });
-  }
-
-  renderSections() {
-    return this.sections.map((section, index) => (
-      <GuidePageSection
-        key={index}
-        title={section.title}
-        slug={section.slug}
-        html={section.html}
-        js={section.js}
-        hasDarkTheme={section.hasDarkTheme}
-      >
-        {section.description}
-      </GuidePageSection>
-    ));
-  }
-
-  render() {
-    return (
-      <GuidePage
-        title={this.props.route.name}
-      >
-        {this.renderSections()}
-      </GuidePage>
-    );
-  }
-
-}
-
-GuideExample.contextTypes = {
-  registerCode: PropTypes.func,
-  unregisterCode: PropTypes.func,
-};
-
-GuideExample.propTypes = {
-  route: PropTypes.object.isRequired,
-  sections: PropTypes.arrayOf(React.PropTypes.shape({
-    title: React.PropTypes.string.isRequired,
-    description: React.PropTypes.any,
-    html: React.PropTypes.string.isRequired,
-    js: React.PropTypes.string,
-    hasDarkTheme: React.PropTypes.bool,
-  })),
-};
diff --git a/ui_framework/doc_site/src/components/guide_link/_guide_link.scss b/ui_framework/doc_site/src/components/guide_link/_guide_link.scss
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/ui_framework/doc_site/src/components/guide_link/guide_link.jsx b/ui_framework/doc_site/src/components/guide_link/guide_link.jsx
new file mode 100644
index 0000000000000..d925456a68413
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_link/guide_link.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const GuideLink = props => (
+  <a
+    href={props.href}
+    target={props.target}
+    className="guideLink"
+  >
+    {props.children}
+  </a>
+);
diff --git a/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx b/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
index b510ff0dc2438..3c3212e909915 100644
--- a/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
+++ b/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
@@ -1,4 +1,3 @@
-
 import React, {
   PropTypes,
 } from 'react';
@@ -9,7 +8,7 @@ import {
 
 import classNames from 'classnames';
 
-const GuideNav = props => {
+export const GuideNav = props => {
   const classes = classNames('guideNav', {
     'is-guide-nav-open': props.isNavOpen,
   });
@@ -64,4 +63,3 @@ GuideNav.propTypes = {
   items: PropTypes.array,
 };
 
-export default GuideNav;
diff --git a/ui_framework/doc_site/src/components/guide_page/guide_page.jsx b/ui_framework/doc_site/src/components/guide_page/guide_page.jsx
index dac8bc5120f5e..fa9c512940985 100644
--- a/ui_framework/doc_site/src/components/guide_page/guide_page.jsx
+++ b/ui_framework/doc_site/src/components/guide_page/guide_page.jsx
@@ -1,4 +1,3 @@
-
 import React, {
   Component,
   PropTypes,
@@ -13,34 +12,30 @@ import {
   GuidePageSideNavItem,
 } from '../';
 
-export default class GuidePage extends Component {
-
+export class GuidePage extends Component {
   constructor(props) {
     super(props);
 
     this.onClickLink = this.onClickLink.bind(this);
   }
 
-  onClickLink(slug) {
+  onClickLink(id) {
     // Scroll to element.
     $('html, body').animate({
-      scrollTop: $(`#${slug}`).offset().top - 100
+      scrollTop: $(`#${id}`).offset().top - 100
     }, 250);
-
-    // Load in code viewer.
-    this.context.updateCodeViewer(slug);
   }
 
   renderSideNavMenu() {
-    //  Traverse children and build side nav from it.
-    return this.props.children.map((section, index) => {
+    // Traverse sections and build side nav from it.
+    return this.props.sections.map((section, index) => {
       return (
         <GuidePageSideNavItem
           key={index}
-          slug={Slugify.one(section.props.title)}
+          id={section.id}
           onClick={this.onClickLink}
         >
-          {section.props.title}
+          {section.name}
         </GuidePageSideNavItem>
       );
     });
@@ -59,14 +54,10 @@ export default class GuidePage extends Component {
       </div>
     );
   }
-
 }
 
-GuidePage.contextTypes = {
-  updateCodeViewer: PropTypes.func,
-};
-
 GuidePage.propTypes = {
   children: PropTypes.any,
   title: PropTypes.string,
+  sections: PropTypes.array,
 };
diff --git a/ui_framework/doc_site/src/components/guide_page/guide_page_container.js b/ui_framework/doc_site/src/components/guide_page/guide_page_container.js
new file mode 100644
index 0000000000000..9977ee9291879
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_page/guide_page_container.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { getSections } from '../../store';
+import { GuidePage } from './guide_page.jsx';
+
+const mapStateToProps = state => ({
+  sections: getSections(state),
+});
+
+export const GuidePageContainer = connect(mapStateToProps)(GuidePage);
diff --git a/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx b/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx
deleted file mode 100644
index a1bdf62361898..0000000000000
--- a/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx
+++ /dev/null
@@ -1,139 +0,0 @@
-
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
-
-import classNames from 'classnames';
-
-import {
-  JsInjector,
-} from '../../services';
-
-export default class GuidePageSection extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.onClickSource = this.onClickSource.bind(this);
-  }
-
-  componentDidMount() {
-    // NOTE: This will cause a race condition if a GuidePage adds and removes
-    // GuidePageSection instances during its lifetime (e.g. if a user is allowed
-    // to click "add" and "delete" buttons to add and remove GuidePageSections).
-    //
-    // In such a race condition, we could end up with GuidePageSections with
-    // identical id values.
-    //
-    // As long as all GuidePageSection instances are added when a GuidePage
-    // is instantiated, and then they're all removed when a GuidePage is
-    // removed, we won't encounter this race condition.
-    if (this.props.js) {
-      this.scriptId = `${GuidePageSection.SCRIPT_ID}${GuidePageSection.count}`;
-      GuidePageSection.count++;
-      // JS injection must occur _after_ the component has been mounted, so
-      // the component DOM is available for the JS to manipulate.
-      JsInjector.inject(this.props.js, this.scriptId);
-    }
-
-    function trimChildren(node) {
-      if (node.children.length > 0) {
-        [...node.children].forEach(trimChildren);
-        return;
-      }
-      node.textContent = node.textContent.trim();
-    }
-
-    trimChildren(this.refs.html);
-
-    if (this.refs.htmlDarkTheme) {
-      trimChildren(this.refs.htmlDarkTheme);
-    }
-  }
-
-  componentWillUnmount() {
-    JsInjector.remove(this.scriptId);
-    GuidePageSection.count--;
-  }
-
-  onClickSource() {
-    this.context.openCodeViewer(this.props.slug);
-  }
-
-  render() {
-    const exampleClasses = classNames('guidePageSection__example', {
-      'guidePageSection__example--standalone': !this.props.children,
-    });
-
-    let description;
-
-    if (this.props.children) {
-      description = (
-        <div className="guidePageSection__description">
-          {this.props.children}
-        </div>
-      );
-    }
-
-    let darkThemeExample;
-
-    if (this.props.hasDarkTheme) {
-      darkThemeExample = (
-        <div
-          ref="htmlDarkTheme"
-          className={`${exampleClasses} theme-dark`}
-          dangerouslySetInnerHTML={{ __html: this.props.html }}
-        />
-      );
-    } else {
-      darkThemeExample = (
-        <div className="guideWarning">This component is missing Dark Theme variations.</div>
-      );
-    }
-
-    return (
-      <div
-        id={this.props.slug}
-        className="guidePageSection"
-      >
-        <div className="guidePageSection__header">
-          <div className="guidePageSection__title">
-            {this.props.title}
-          </div>
-          <div
-            className="guidePageSection__sourceButton fa fa-code"
-            onClick={this.onClickSource}
-          />
-        </div>
-
-        {description}
-
-        <div
-          ref="html"
-          className={exampleClasses}
-          dangerouslySetInnerHTML={{ __html: this.props.html }}
-        />
-
-        {darkThemeExample}
-      </div>
-    );
-  }
-
-}
-
-GuidePageSection.count = 0;
-GuidePageSection.SCRIPT_ID = 'EXAMPLE_SCRIPT';
-
-GuidePageSection.contextTypes = {
-  openCodeViewer: PropTypes.func,
-};
-
-GuidePageSection.propTypes = {
-  title: PropTypes.string,
-  slug: PropTypes.string,
-  html: PropTypes.string,
-  js: PropTypes.string,
-  children: PropTypes.any,
-  hasDarkTheme: PropTypes.bool,
-};
diff --git a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx
index 0d01d8de2ab20..3ee423e6d2e11 100644
--- a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx
+++ b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx
@@ -1,10 +1,9 @@
-
 import React, {
   Component,
   PropTypes,
 } from 'react';
 
-export default class GuidePageSideNav extends Component {
+export class GuidePageSideNav extends Component {
 
   constructor(props) {
     super(props);
diff --git a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx
index 2d439ba5da0e1..846ee8f20409a 100644
--- a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx
+++ b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx
@@ -1,10 +1,9 @@
-
 import React, {
   Component,
   PropTypes,
 } from 'react';
 
-export default class GuidePageSideNavItem extends Component {
+export class GuidePageSideNavItem extends Component {
 
   constructor(props) {
     super(props);
@@ -13,7 +12,7 @@ export default class GuidePageSideNavItem extends Component {
   }
 
   onClick() {
-    this.props.onClick(this.props.slug);
+    this.props.onClick(this.props.id);
   }
 
   render() {
@@ -32,7 +31,7 @@ export default class GuidePageSideNavItem extends Component {
 }
 
 GuidePageSideNavItem.propTypes = {
-  slug: PropTypes.string,
+  id: PropTypes.string,
   children: PropTypes.any,
   onClick: PropTypes.func,
 };
diff --git a/ui_framework/doc_site/src/components/guide_page_section/_guide_page_section.scss b/ui_framework/doc_site/src/components/guide_section/_guide_section.scss
similarity index 65%
rename from ui_framework/doc_site/src/components/guide_page_section/_guide_page_section.scss
rename to ui_framework/doc_site/src/components/guide_section/_guide_section.scss
index 85a578f407ea8..5a56f594d4b66 100644
--- a/ui_framework/doc_site/src/components/guide_page_section/_guide_page_section.scss
+++ b/ui_framework/doc_site/src/components/guide_section/_guide_section.scss
@@ -1,11 +1,11 @@
 
 @import "../../variables";
 
-.guidePageSection {
+.guideSection {
   margin-bottom: 40px;
 }
 
-  .guidePageSection__header {
+  .guideSection__header {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -14,12 +14,12 @@
     border-bottom: 1px solid #d6d6d6;
   }
 
-  .guidePageSection__title {
+  .guideSection__title {
     font-size: 18px;
     font-weight: 700;
   }
 
-  .guidePageSection__sourceButton {
+  .guideSection__sourceButton {
     line-height: 10px;
     padding: 4px 10px;
     background-color: #19a8e0;
@@ -39,18 +39,3 @@
         inset 0 2px 8px rgba(black, 0.2);
     }
   }
-
-  .guidePageSection__description {
-    font-size: 14px;
-    line-height: 21px;
-  }
-
-  .guidePageSection__example {
-    & + & {
-      margin-top: 20px;
-    }
-  }
-
-  .guidePageSection__example--standalone {
-    margin-top: 10px;
-  }
diff --git a/ui_framework/doc_site/src/components/guide_section/guide_section.jsx b/ui_framework/doc_site/src/components/guide_section/guide_section.jsx
new file mode 100644
index 0000000000000..e5ea51b3a344e
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_section/guide_section.jsx
@@ -0,0 +1,59 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import Slugify from '../../services/string/slugify';
+
+export class GuideSection extends Component {
+  constructor(props) {
+    super(props);
+    this.onClickSource = this.onClickSource.bind(this);
+  }
+
+  getId() {
+    return Slugify.one(this.props.title);
+  }
+
+  onClickSource() {
+    this.props.openCodeViewer(this.props.source);
+  }
+
+  componentWillMount() {
+    this.props.registerSection(this.getId(), this.props.title);
+  }
+
+  componentWillUnmount() {
+    this.props.unregisterSection(this.getId());
+  }
+
+  render() {
+    return (
+      <div
+        id={this.getId()}
+        className="guideSection"
+      >
+        <div className="guideSection__header">
+          <div className="guideSection__title">
+            {this.props.title}
+          </div>
+          <div
+            className="guideSection__sourceButton fa fa-code"
+            onClick={this.onClickSource}
+          />
+        </div>
+
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+GuideSection.propTypes = {
+  title: PropTypes.string,
+  source: PropTypes.array,
+  children: PropTypes.any,
+  openCodeViewer: PropTypes.func,
+  registerSection: PropTypes.func,
+  unregisterSection: PropTypes.func,
+};
diff --git a/ui_framework/doc_site/src/components/guide_section/guide_section_container.js b/ui_framework/doc_site/src/components/guide_section/guide_section_container.js
new file mode 100644
index 0000000000000..f6679ef7855a4
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_section/guide_section_container.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+
+import { GuideSection } from './guide_section.jsx';
+import {
+  openCodeViewer,
+  registerSection,
+  unregisterSection,
+} from '../../actions';
+
+export const GuideSectionContainer = connect(
+  null,
+  {
+    openCodeViewer,
+    registerSection,
+    unregisterSection,
+  },
+)(GuideSection);
diff --git a/ui_framework/doc_site/src/components/guide_section/guide_section_types.js b/ui_framework/doc_site/src/components/guide_section/guide_section_types.js
new file mode 100644
index 0000000000000..efb35d5654705
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_section/guide_section_types.js
@@ -0,0 +1,4 @@
+export const GuideSectionTypes = {
+  JS: 'JavaScript',
+  HTML: 'HTML',
+};
diff --git a/ui_framework/doc_site/src/components/guide_text/_guide_text.scss b/ui_framework/doc_site/src/components/guide_text/_guide_text.scss
new file mode 100644
index 0000000000000..981dc790e45f1
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_text/_guide_text.scss
@@ -0,0 +1,5 @@
+.guideText {
+  font-size: 14px;
+  line-height: 21px;
+  margin-top: $guideVerticalRhythm;
+}
diff --git a/ui_framework/doc_site/src/components/guide_text/guide_text.jsx b/ui_framework/doc_site/src/components/guide_text/guide_text.jsx
new file mode 100644
index 0000000000000..0a87e624621b6
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_text/guide_text.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const GuideText = props => (
+  <div className="guideText">{props.children}</div>
+);
diff --git a/ui_framework/doc_site/src/components/index.js b/ui_framework/doc_site/src/components/index.js
index 0785980c1dcf8..ee0da8682fba9 100644
--- a/ui_framework/doc_site/src/components/index.js
+++ b/ui_framework/doc_site/src/components/index.js
@@ -1,21 +1,11 @@
-
-export * from './guide_code_viewer/guide_code_viewer.jsx';
-export { default as GuideCodeViewer } from './guide_code_viewer/guide_code_viewer.jsx';
-
-export * from './guide_example/guide_example.jsx';
-export { default as GuideExample } from './guide_example/guide_example.jsx';
-
-export * from './guide_nav/guide_nav.jsx';
-export { default as GuideNav } from './guide_nav/guide_nav.jsx';
-
-export * from './guide_page/guide_page.jsx';
-export { default as GuidePage } from './guide_page/guide_page.jsx';
-
-export * from './guide_page_section/guide_page_section.jsx';
-export { default as GuidePageSection } from './guide_page_section/guide_page_section.jsx';
-
-export * from './guide_page_side_nav/guide_page_side_nav.jsx';
-export { default as GuidePageSideNav } from './guide_page_side_nav/guide_page_side_nav.jsx';
-
-export * from './guide_page_side_nav/guide_page_side_nav_item.jsx';
-export { default as GuidePageSideNavItem } from './guide_page_side_nav/guide_page_side_nav_item.jsx';
+export { GuideCode } from './guide_code/guide_code.jsx';
+export { GuideCodeViewer } from './guide_code_viewer/guide_code_viewer.jsx';
+export { GuideDemo } from './guide_demo/guide_demo.jsx';
+export { GuideLink } from './guide_link/guide_link.jsx';
+export { GuideNav } from './guide_nav/guide_nav.jsx';
+export { GuidePageContainer as GuidePage } from './guide_page/guide_page_container';
+export { GuidePageSideNav } from './guide_page_side_nav/guide_page_side_nav.jsx';
+export { GuidePageSideNavItem } from './guide_page_side_nav/guide_page_side_nav_item.jsx';
+export { GuideSectionContainer as GuideSection } from './guide_section/guide_section_container';
+export { GuideSectionTypes } from './guide_section/guide_section_types';
+export { GuideText } from './guide_text/guide_text.jsx';
diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss
index b3a811d808766..169e7a0be8d47 100644
--- a/ui_framework/doc_site/src/main.scss
+++ b/ui_framework/doc_site/src/main.scss
@@ -1,10 +1,6 @@
 @import "../../dist/ui_framework.css";
 @import "./views/app";
-@import "./components/guide_code_viewer/guide_code_viewer";
-@import "./components/guide_nav/guide_nav";
-@import "./components/guide_page/guide_page";
-@import "./components/guide_page_section/guide_page_section";
-@import "./components/guide_page_side_nav/guide_page_side_nav";
+@import "./components/guide_components";
 
 * {
   box-sizing: border-box;
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index c983e05aad4d5..1797e68093174 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -1,4 +1,3 @@
-
 import Slugify from '../string/slugify';
 
 import ActionItemExample
diff --git a/ui_framework/doc_site/src/store/configure_store.js b/ui_framework/doc_site/src/store/configure_store.js
index 08f186671abdd..8f6de34b6733b 100644
--- a/ui_framework/doc_site/src/store/configure_store.js
+++ b/ui_framework/doc_site/src/store/configure_store.js
@@ -11,6 +11,7 @@ import {
 } from 'react-router-redux';
 
 import codeViewerReducer from './reducers/code_viewer_reducer';
+import sectionsReducer from './reducers/sections_reducer';
 
 /**
  * @param {Object} initialState An object defining the application's initial
@@ -21,6 +22,7 @@ export default function configureStore(initialState) {
     return {
       routing: routerReducer(state.routing, action),
       codeViewer: codeViewerReducer(state.codeViewer, action),
+      sections: sectionsReducer(state.sections, action),
     };
   }
 
diff --git a/ui_framework/doc_site/src/store/index.js b/ui_framework/doc_site/src/store/index.js
new file mode 100644
index 0000000000000..f82bdbc1cbe08
--- /dev/null
+++ b/ui_framework/doc_site/src/store/index.js
@@ -0,0 +1,11 @@
+export function getIsCodeViewerOpen(state) {
+  return state.codeViewer.isOpen
+}
+
+export function getSections(state) {
+  return state.sections.sections;
+}
+
+export function getSource(state) {
+  return state.codeViewer.source;
+}
diff --git a/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js b/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js
index e4d27ad181375..d9c14916b55da 100644
--- a/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js
+++ b/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js
@@ -1,35 +1,34 @@
-
 import ActionTypes from '../../actions/action_types';
 
 const defaultState = {
   isOpen: false,
   codesBySlug: {},
-  code: undefined,
+  source: undefined,
 };
 
 export default function codeViewerReducer(state = defaultState, action) {
   switch (action.type) {
     case ActionTypes.OPEN_CODE_VIEWER: {
-      const newCode = state.codesBySlug[action.slug];
+      const source = action.source;
 
-      if (state.code === newCode) {
+      if (state.code === source) {
         // If we are opening the existing code, then close the viewer.
         return Object.assign({}, state, {
           isOpen: false,
-          code: undefined,
+          source: undefined,
         });
       }
 
       return Object.assign({}, state, {
         isOpen: true,
-        code: newCode,
+        source: source,
       });
     }
 
     case ActionTypes.UPDATE_CODE_VIEWER: {
       if (state.isOpen) {
         return Object.assign({}, state, {
-          code: state.codesBySlug[action.slug],
+          source: state.codesBySlug[action.slug],
         });
       }
       return state;
@@ -38,7 +37,7 @@ export default function codeViewerReducer(state = defaultState, action) {
     case ActionTypes.CLOSE_CODE_VIEWER: {
       return Object.assign({}, state, {
         isOpen: false,
-        code: undefined,
+        source: undefined,
       });
     }
 
diff --git a/ui_framework/doc_site/src/store/reducers/sections_reducer.js b/ui_framework/doc_site/src/store/reducers/sections_reducer.js
new file mode 100644
index 0000000000000..a7e50b8a25a55
--- /dev/null
+++ b/ui_framework/doc_site/src/store/reducers/sections_reducer.js
@@ -0,0 +1,36 @@
+import ActionTypes from '../../actions/action_types';
+
+const defaultState = {
+  sections: [],
+};
+
+export default function sectionsReducer(state = defaultState, action) {
+  switch (action.type) {
+    case ActionTypes.REGISTER_SECTION: {
+      const sections = state.sections.slice();
+      sections.push({
+        id: action.id,
+        name: action.name,
+      });
+
+      return Object.assign({}, state, {
+        sections,
+      });
+    }
+
+    case ActionTypes.UNREGISTER_SECTION: {
+      const sections = state.sections.slice();
+      const index = sections.findIndex(section => section.id === action.id);
+      sections.splice(index, 1);
+
+      return Object.assign({}, state, {
+        sections,
+      });
+    }
+
+    default:
+      break;
+  }
+
+  return state;
+}
diff --git a/ui_framework/doc_site/src/views/action_item/action_item_example.jsx b/ui_framework/doc_site/src/views/action_item/action_item_example.jsx
index cd65358ef9ce2..78e8d4ecbfe3f 100644
--- a/ui_framework/doc_site/src/views/action_item/action_item_example.jsx
+++ b/ui_framework/doc_site/src/views/action_item/action_item_example.jsx
@@ -1,15 +1,53 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'ActionItem',
-  html: require('./action_item.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'ActionItems in Menu',
-  html: require('./action_items_in_menu.html'),
-  hasDarkTheme: false,
-}]);
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const actionItemHtml = require('./action_item.html');
+const inMenuHtml = require('./action_items_in_menu.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="ActionItem"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: actionItemHtml,
+      }]}
+    >
+      <GuideText>
+        Events can represent updates, logs, notifications, and status changes.
+      </GuideText>
+
+      <GuideDemo
+        html={actionItemHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ActionItems in Menu"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: inMenuHtml,
+      }]}
+    >
+      <GuideText>
+        You&rsquo;ll typically want to present them within a Menu.
+      </GuideText>
+
+      <GuideDemo
+        html={inMenuHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/app_container.js b/ui_framework/doc_site/src/views/app_container.js
index bc134de2e60ef..6223f53c32b8b 100644
--- a/ui_framework/doc_site/src/views/app_container.js
+++ b/ui_framework/doc_site/src/views/app_container.js
@@ -1,27 +1,34 @@
-
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import AppView from './app_view.jsx';
 
 import {
-  CodeViewerActions,
+  getIsCodeViewerOpen,
+  getSections,
+  getSource,
+} from '../store';
+import { AppView } from './app_view.jsx';
+import {
+  openCodeViewer,
+  closeCodeViewer,
+  registerSection,
+  unregisterSection,
 } from '../actions';
 
 function mapStateToProps(state, ownProps) {
   return {
     routes: ownProps.routes,
-    isCodeViewerOpen: state.codeViewer.isOpen,
-    code: state.codeViewer.code,
+    isCodeViewerOpen: getIsCodeViewerOpen(state),
+    source: getSource(state),
+    sections: getSections(state),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   const actions = {
-    openCodeViewer: CodeViewerActions.openCodeViewer,
-    updateCodeViewer: CodeViewerActions.updateCodeViewer,
-    closeCodeViewer: CodeViewerActions.closeCodeViewer,
-    registerCode: CodeViewerActions.registerCode,
-    unregisterCode: CodeViewerActions.unregisterCode,
+    openCodeViewer,
+    closeCodeViewer,
+    registerSection,
+    unregisterSection,
   };
 
   return bindActionCreators(actions, dispatch);
diff --git a/ui_framework/doc_site/src/views/app_view.jsx b/ui_framework/doc_site/src/views/app_view.jsx
index a66889fc04fb3..93890202b16b0 100644
--- a/ui_framework/doc_site/src/views/app_view.jsx
+++ b/ui_framework/doc_site/src/views/app_view.jsx
@@ -1,4 +1,3 @@
-
 import React, {
   Component,
   PropTypes,
@@ -18,8 +17,7 @@ import {
 // Inject version into header.
 const pkg = require('json!../../../../package.json');
 
-export default class AppView extends Component {
-
+export class AppView extends Component {
   constructor(props) {
     super(props);
 
@@ -32,15 +30,6 @@ export default class AppView extends Component {
     this.onCloseCodeViewer = this.onCloseCodeViewer.bind(this);
   }
 
-  getChildContext() {
-    return {
-      openCodeViewer: this.props.openCodeViewer,
-      updateCodeViewer: this.props.updateCodeViewer,
-      registerCode: this.props.registerCode,
-      unregisterCode: this.props.unregisterCode,
-    };
-  }
-
   onClickNavItem() {
     this.setState({
       isNavOpen: false,
@@ -79,35 +68,26 @@ export default class AppView extends Component {
         <GuideCodeViewer
           isOpen={this.props.isCodeViewerOpen}
           onClose={this.onCloseCodeViewer}
-          title={this.props.code.title}
-          html={this.props.code.html}
-          js={this.props.code.js}
+          title={'No title'}
+          source={this.props.source}
         />
       </div>
     );
   }
-
 }
 
-AppView.childContextTypes = {
-  openCodeViewer: PropTypes.func,
-  updateCodeViewer: PropTypes.func,
-  registerCode: PropTypes.func,
-  unregisterCode: PropTypes.func,
-};
-
 AppView.propTypes = {
   children: PropTypes.any,
   routes: PropTypes.array.isRequired,
   openCodeViewer: PropTypes.func,
-  updateCodeViewer: PropTypes.func,
   closeCodeViewer: PropTypes.func,
-  registerCode: PropTypes.func,
-  unregisterCode: PropTypes.func,
   isCodeViewerOpen: PropTypes.bool,
-  code: PropTypes.object,
+  registerSection: PropTypes.func,
+  unregisterSection: PropTypes.func,
+  sections: PropTypes.array,
+  source: PropTypes.array,
 };
 
 AppView.defaultProps = {
-  code: {},
+  source: [],
 };
diff --git a/ui_framework/doc_site/src/views/bar/bar_example.jsx b/ui_framework/doc_site/src/views/bar/bar_example.jsx
index 1b9663e97f358..32c1c3d0125d7 100644
--- a/ui_framework/doc_site/src/views/bar/bar_example.jsx
+++ b/ui_framework/doc_site/src/views/bar/bar_example.jsx
@@ -1,31 +1,78 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Bar',
-  description: (
-    <div>
-      <p>Use the Bar to organize controls in a horizontal layout. This is especially useful for surfacing controls in the corners of a view.</p>
-      <p><strong>Note:</strong> Instead of using this component with a Table, try using the ControlledTable, ToolBar, and ToolBarFooter components.</p>
-    </div>
-  ),
-  html: require('./bar.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'One section',
-  description: (
-    <p>A Bar with one section will align it to the right, by default. To align it to the left, just add another section and leave it empty, or don't use a Bar at all.</p>
-  ),
-  html: require('./bar_one_section.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Three sections',
-  description: (
-    <p>Technically the Bar can contain three or more sections, but there's no established use-case for this.</p>
-  ),
-  html: require('./bar_three_sections.html'),
-  hasDarkTheme: false,
-}]);
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const barHtml = require('./bar.html');
+const oneSectionHtml = require('./bar_one_section.html');
+const threeSectionsHtml = require('./bar_three_sections.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Bar"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: barHtml,
+      }]}
+    >
+      <GuideText>
+        Use the Bar to organize controls in a horizontal layout. This is especially useful for
+        surfacing controls in the corners of a view.
+      </GuideText>
+
+      <GuideText>
+        <strong>Note:</strong> Instead of using this component with a Table, try using the
+        ControlledTable, ToolBar, and ToolBarFooter components.
+      </GuideText>
+
+      <GuideDemo
+        html={barHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="One section"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: oneSectionHtml,
+      }]}
+    >
+      <GuideText>
+        A Bar with one section will align it to the right, by default. To align it to the left,
+        just add another section and leave it empty, or don't use a Bar at all.
+      </GuideText>
+
+      <GuideDemo
+        html={oneSectionHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Three sections"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: threeSectionsHtml,
+      }]}
+    >
+      <GuideText>
+        Technically the Bar can contain three or more sections, but there's no established use-case
+        for this.
+      </GuideText>
+
+      <GuideDemo
+        html={threeSectionsHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/button/button_example.jsx b/ui_framework/doc_site/src/views/button/button_example.jsx
index 7b32b9819bbe4..4b8db83c278c7 100644
--- a/ui_framework/doc_site/src/views/button/button_example.jsx
+++ b/ui_framework/doc_site/src/views/button/button_example.jsx
@@ -1,70 +1,178 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Basic Button',
-  description: (
-    <p>Use the basic Button in most situations.</p>
-  ),
-  html: require('./button_basic.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Hollow Button',
-  description: (
-    <p>Use the hollow Button when presenting a neutral action, e.g. a "Cancel" button.</p>
-  ),
-  html: require('./button_hollow.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Primary Button',
-  description: (
-    <p>Use the primary Button to represent the most common action. Generally, there won't be a need to present more than one of these at a time.</p>
-  ),
-  html: require('./button_primary.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Danger Button',
-  description: (
-    <p>Danger Buttons represent irreversible, potentially regrettable actions.</p>
-  ),
-  html: require('./button_danger.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Button with icon',
-  description: (
-    <p>You can toss an icon into a Button, with or without text.</p>
-  ),
-  html: require('./button_with_icon.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'ButtonGroup',
-  html: require('./button_group.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'United ButtonGroup',
-  description: (
-    <div>
-      <p>Use the united version of the ButtonGroup to emphasize the close relationship within a set of Buttons, and differentiate them from Buttons outside of the set.</p>
-      <p>They support containing a single Button, so that Buttons can be dynamically added and removed.</p>
-    </div>
-  ),
-  html: require('./button_group_united.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'In ToolBar',
-  description: (
-    <p>This example verifies that Buttons are legible against the ToolBar's background.</p>
-  ),
-  html: require('./buttons_in_tool_bar.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Element variations',
-  description: (
-    <p>You can create a Button using a button element, link, or input[type="submit"].</p>
-  ),
-  html: require('./button_elements.html'),
-  hasDarkTheme: false,
-}]);
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const basicHtml = require('./button_basic.html');
+const hollowHtml = require('./button_hollow.html');
+const primaryHtml = require('./button_primary.html');
+const dangerHtml = require('./button_danger.html');
+const withIconHtml = require('./button_with_icon.html');
+const groupHtml = require('./button_group.html');
+const groupUnitedHtml = require('./button_group_united.html');
+const inToolBarHtml = require('./buttons_in_tool_bar.html');
+const elementsHtml = require('./button_elements.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Basic Button"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: basicHtml,
+      }]}
+    >
+      <GuideText>
+        Use the basic Button in most situations.
+      </GuideText>
+
+      <GuideDemo
+        html={basicHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Hollow Button"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: hollowHtml,
+      }]}
+    >
+      <GuideText>
+        Use the hollow Button when presenting a neutral action, e.g. a "Cancel" button.
+      </GuideText>
+
+      <GuideDemo
+        html={hollowHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Primary Button"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: primaryHtml,
+      }]}
+    >
+      <GuideText>
+        Use the primary Button to represent the most common action. Generally, there won't be a
+        need to present more than one of these at a time.
+      </GuideText>
+
+      <GuideDemo
+        html={primaryHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Danger Button"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: dangerHtml,
+      }]}
+    >
+      <GuideText>
+        Danger Buttons represent irreversible, potentially regrettable actions.
+      </GuideText>
+
+      <GuideDemo
+        html={dangerHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Button with icon"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: withIconHtml,
+      }]}
+    >
+      <GuideText>
+        You can toss an icon into a Button, with or without text.
+      </GuideText>
+
+      <GuideDemo
+        html={withIconHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ButtonGroup"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: groupHtml,
+      }]}
+    >
+      <GuideText>
+
+      </GuideText>
+
+      <GuideDemo
+        html={groupHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="United ButtonGroup"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: groupUnitedHtml,
+      }]}
+    >
+      <GuideText>
+        Use the united version of the ButtonGroup to emphasize the close relationship within a set
+        of Buttons, and differentiate them from Buttons outside of the set.
+      </GuideText>
+
+      <GuideText>
+        They support containing a single Button, so that Buttons can be dynamically added and
+        removed.
+      </GuideText>
+
+      <GuideDemo
+        html={groupUnitedHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="In ToolBar"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: inToolBarHtml,
+      }]}
+    >
+      <GuideText>
+        This example verifies that Buttons are legible against the ToolBar's background.
+      </GuideText>
+
+      <GuideDemo
+        html={inToolBarHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Element variations"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: elementsHtml,
+      }]}
+    >
+      <GuideText>
+        You can create a Button using a button element, link, or input[type="submit"].
+      </GuideText>
+
+      <GuideDemo
+        html={elementsHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/event/event_example.jsx b/ui_framework/doc_site/src/views/event/event_example.jsx
index 4aedeb06a5c02..b0a5c9f8945cd 100644
--- a/ui_framework/doc_site/src/views/event/event_example.jsx
+++ b/ui_framework/doc_site/src/views/event/event_example.jsx
@@ -1,21 +1,53 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
 
-export default createExample([{
-  title: 'Event',
-  description: (
-    <p>Events can represent updates, logs, notifications, and status changes.</p>
-  ),
-  html: require('./event.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Event Menu',
-  description: (
-    <p>You&rsquo;ll typically want to present them within a Menu.</p>
-  ),
-  html: require('./event_menu.html'),
-  hasDarkTheme: false,
-}]);
+const eventHtml = require('./event.html');
+const eventMenuHtml = require('./event_menu.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Event"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: eventHtml,
+      }]}
+    >
+      <GuideText>
+        Events can represent updates, logs, notifications, and status changes.
+      </GuideText>
+
+      <GuideDemo
+        html={eventHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Event Menu"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: eventMenuHtml,
+      }]}
+    >
+      <GuideText>
+        You&rsquo;ll typically want to present them within a Menu.
+      </GuideText>
+
+      <GuideDemo
+        html={eventMenuHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/form/form_example.jsx b/ui_framework/doc_site/src/views/form/form_example.jsx
index 3b79945a6f0ca..17195e4bf130d 100644
--- a/ui_framework/doc_site/src/views/form/form_example.jsx
+++ b/ui_framework/doc_site/src/views/form/form_example.jsx
@@ -1,34 +1,100 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'TextInput',
-  html: require('./text_input.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'StaticInput',
-  description: (
-    <p>Use StaticInput to display dynamic content in a form which the user isn&rsquo;t allowed to edit.</p>
-  ),
-  html: require('./static_input.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'TextArea',
-  html: require('./text_area.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'TextArea, non-resizable',
-  html: require('./text_area_non_resizable.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'CheckBox',
-  html: require('./check_box.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Select',
-  html: require('./select.html'),
-  hasDarkTheme: false,
-}]);
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const textInputHtml = require('./text_input.html');
+const staticInputHtml = require('./static_input.html');
+const textAreaHtml = require('./text_area.html');
+const textAreaNonResizableHtml = require('./text_area_non_resizable.html');
+const checkBoxHtml = require('./check_box.html');
+const selectHtml = require('./select.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="TextInput"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: textInputHtml,
+      }]}
+    >
+      <GuideDemo
+        html={textInputHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="StaticInput"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: staticInputHtml,
+      }]}
+    >
+      <GuideText>
+        Use StaticInput to display dynamic content in a form which the user isn&rsquo;t allowed to edit.
+      </GuideText>
+
+      <GuideDemo
+        html={staticInputHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="TextArea"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: textAreaHtml,
+      }]}
+    >
+      <GuideDemo
+        html={textAreaHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="TextArea, non-resizable"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: textAreaNonResizableHtml,
+      }]}
+    >
+      <GuideDemo
+        html={textAreaNonResizableHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="CheckBox"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: checkBoxHtml,
+      }]}
+    >
+      <GuideDemo
+        html={checkBoxHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Select"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: selectHtml,
+      }]}
+    >
+      <GuideDemo
+        html={selectHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_example.jsx b/ui_framework/doc_site/src/views/header_bar/header_bar_example.jsx
index 8c85e9588d832..518ed22aef72e 100644
--- a/ui_framework/doc_site/src/views/header_bar/header_bar_example.jsx
+++ b/ui_framework/doc_site/src/views/header_bar/header_bar_example.jsx
@@ -1,15 +1,44 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Header Bar',
-  html: require('./header_bar.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Two sections',
-  html: require('./header_bar_two_sections.html'),
-  hasDarkTheme: false,
-}]);
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+const headerBarHtml = require('./header_bar.html');
+const twoSectionsHtml = require('./header_bar_two_sections.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Header Bar"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: headerBarHtml,
+      }]}
+    >
+      <GuideDemo
+        html={headerBarHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Two sections"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: twoSectionsHtml,
+      }]}
+    >
+      <GuideDemo
+        html={twoSectionsHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/icon/icon_example.jsx b/ui_framework/doc_site/src/views/icon/icon_example.jsx
index 7aee7f935504f..4afcce370b56e 100644
--- a/ui_framework/doc_site/src/views/icon/icon_example.jsx
+++ b/ui_framework/doc_site/src/views/icon/icon_example.jsx
@@ -1,55 +1,142 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Icon',
-  description: (
-    <p>Use the <code className="guideCode">icon</code> class instead of the <code className="guideCode">fa</code> class for FontAwesome icons. This will make it easier for us to migrate away from FontAwesome.</p>
-  ),
-  html: require('./icon.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Info',
-  description: (
-    <p>Use this Icon to denote useful information.</p>
-  ),
-  html: require('./icon_info.html'),
-}, {
-  title: 'Basic',
-  description: (
-    <p>Use this Icon when you don't want to communicate any particular meaning with the icon's color.</p>
-  ),
-  html: require('./icon_basic.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Success',
-  description: (
-    <p>Use this Icon to denote the successful completion of an action, e.g. filling out a form field correctly or a successful API request.</p>
-  ),
-  html: require('./icon_success.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Warning',
-  description: (
-    <p>Use this Icon to denote an irregularity or potential problems.</p>
-  ),
-  html: require('./icon_warning.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Error',
-  description: (
-    <p>Use this Icon to denote a failed attempt at an action, e.g. an invalid form field or an API error.</p>
-  ),
-  html: require('./icon_error.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Inactive',
-  description: (
-    <p>Use this Icon to denote a disabled, inactive, off, offline, or asleep status.</p>
-  ),
-  html: require('./icon_inactive.html'),
-  hasDarkTheme: false,
-}, ]);
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const iconHtml = require('./icon.html');
+const infoHtml = require('./icon_info.html');
+const basicHtml = require('./icon_basic.html');
+const successHtml = require('./icon_success.html');
+const warningHtml = require('./icon_warning.html');
+const errorHtml = require('./icon_error.html');
+const inactiveHtml = require('./icon_inactive.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Icon"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: iconHtml,
+      }]}
+    >
+      <GuideText>
+        Use the <GuideCode>icon</GuideCode> class instead of the <GuideCode>fa</GuideCode> class for
+        FontAwesome icons. This will make it easier for us to migrate away from FontAwesome.
+      </GuideText>
+
+      <GuideDemo
+        html={iconHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Info"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: infoHtml,
+      }]}
+    >
+      <GuideText>
+        Use this Icon to denote useful information.
+      </GuideText>
+
+      <GuideDemo
+        html={infoHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Basic"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: basicHtml,
+      }]}
+    >
+      <GuideText>
+        Use this Icon when you don't want to communicate any particular meaning with the icon's
+        color.
+      </GuideText>
+
+      <GuideDemo
+        html={basicHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Success"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: successHtml,
+      }]}
+    >
+      <GuideText>
+        Use this Icon to denote the successful completion of an action, e.g. filling out a form
+        field correctly or a successful API request.
+      </GuideText>
+
+      <GuideDemo
+        html={successHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Warning"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: warningHtml,
+      }]}
+    >
+      <GuideText>
+        Use this Icon to denote an irregularity or potential problems.
+      </GuideText>
+
+      <GuideDemo
+        html={warningHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Error"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: errorHtml,
+      }]}
+    >
+      <GuideText>
+        Use this Icon to denote a failed attempt at an action, e.g. an invalid form field or an API
+        error.
+      </GuideText>
+
+      <GuideDemo
+        html={errorHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Inactive"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: inactiveHtml,
+      }]}
+    >
+      <GuideText>
+        Use this Icon to denote a disabled, inactive, off, offline, or asleep status.
+      </GuideText>
+
+      <GuideDemo
+        html={inactiveHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx b/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx
index 97c5a56431188..33ad8693acd1f 100644
--- a/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx
+++ b/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx
@@ -1,35 +1,86 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Info',
-  description: (
-    <p>Use this InfoPanel to generally inform the user.</p>
-  ),
-  html: require('./info_panel_info.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Success',
-  description: (
-    <p>Use this InfoPanel to notify the user of an action successfully completing.</p>
-  ),
-  html: require('./info_panel_success.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Warning',
-  description: (
-    <p>Use this InfoPanel to warn the user against decisions they might regret.</p>
-  ),
-  html: require('./info_panel_warning.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Error',
-  description: (
-    <p>Use this InfoPanel to let the user know something went wrong.</p>
-  ),
-  html: require('./info_panel_error.html'),
-  hasDarkTheme: false,
-}]);
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const infoHtml = require('./info_panel_info.html');
+const successHtml = require('./info_panel_success.html');
+const warningHtml = require('./info_panel_warning.html');
+const errorHtml = require('./info_panel_error.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Info"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: infoHtml,
+      }]}
+    >
+      <GuideText>
+        Use this InfoPanel to generally inform the user.
+      </GuideText>
+
+      <GuideDemo
+        html={infoHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Success"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: successHtml,
+      }]}
+    >
+      <GuideText>
+        Use this InfoPanel to notify the user of an action successfully completing.
+      </GuideText>
+
+      <GuideDemo
+        html={successHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Warning"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: warningHtml,
+      }]}
+    >
+      <GuideText>
+        Use this InfoPanel to warn the user against decisions they might regret.
+      </GuideText>
+
+      <GuideDemo
+        html={warningHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Error"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: errorHtml,
+      }]}
+    >
+      <GuideText>
+        Use this InfoPanel to let the user know something went wrong.
+      </GuideText>
+
+      <GuideDemo
+        html={errorHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/link/link_example.jsx b/ui_framework/doc_site/src/views/link/link_example.jsx
index a94fca037b0a7..36f8aa1077e8b 100644
--- a/ui_framework/doc_site/src/views/link/link_example.jsx
+++ b/ui_framework/doc_site/src/views/link/link_example.jsx
@@ -1,11 +1,31 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
 
-export default createExample([{
-  title: 'Link',
-  html: require('./link.html'),
-  hasDarkTheme: false,
-}]);
+const linkHtml = require('./link.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Link"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: linkHtml,
+      }]}
+    >
+      <GuideDemo
+        html={linkHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx b/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx
index 14a3daafd54ff..ad92f0b27286c 100644
--- a/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx
+++ b/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx
@@ -1,63 +1,196 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Simple',
-  description: (
-    <p>Here's a simple LocalNav with a Title in the top left corner and Menu in the top right.</p>
-  ),
-  html: require('./local_nav_simple.html'),
-  hasDarkTheme: true,
-}, {
-  title: 'Breadcrumbs',
-  description: (
-    <p>You can replace the Title with Breadcrumbs.</p>
-  ),
-  html: require('./local_nav_breadcrumbs.html'),
-  hasDarkTheme: true,
-}, {
-  title: 'Search',
-  description: (
-    <p>You can add a Search component for filtering results.</p>
-  ),
-  html: require('./local_nav_search.html'),
-  hasDarkTheme: true,
-}, {
-  title: 'Invalid Search',
-  html: require('./local_nav_search_error.html'),
-  hasDarkTheme: true,
-}, {
-  title: 'Selected and disabled Menu Item states',
-  description: (
-    <div>
-      <p>When the user selects a Menu Item, additional content can be displayed inside of a Dropdown.</p>
-      <p>Menu Items can also be disabled, in which case they become non-interactive.</p>
-    </div>
-  ),
-  html: require('./local_nav_menu_item_states.html'),
-  hasDarkTheme: true,
-}, {
-  title: 'Dropdown',
-  description: (
-    <p>Selecting a Menu Item will commonly result in an open Dropdown.</p>
-  ),
-  html: require('./local_nav_dropdown.html'),
-  hasDarkTheme: true,
-}, {
-  title: 'Dropdown panels',
-  description: (
-    <p>You can split the Dropdown into side-by-side Panels.</p>
-  ),
-  html: require('./local_nav_dropdown_panels.html'),
-  hasDarkTheme: true,
-}, {
-  title: 'Tabs',
-  description: (
-    <p>You can display Tabs for navigating local content.</p>
-  ),
-  html: require('./local_nav_tabs.html'),
-  hasDarkTheme: true,
-}]);
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const simpleHtml = require('./local_nav_simple.html');
+const breadcrumbsHtml = require('./local_nav_breadcrumbs.html');
+const searchHtml = require('./local_nav_search.html');
+const searchErrorHtml = require('./local_nav_search_error.html');
+const menuItemStatesHtml = require('./local_nav_menu_item_states.html');
+const dropdownHtml = require('./local_nav_dropdown.html');
+const dropdownPanelsHtml = require('./local_nav_dropdown_panels.html');
+const tabsHtml = require('./local_nav_tabs.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Simple"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: simpleHtml,
+      }]}
+    >
+      <GuideText>
+        Here's a simple LocalNav with a Title in the top left corner and Menu in the top right.
+      </GuideText>
+
+      <GuideDemo
+        html={simpleHtml}
+      />
+
+      <GuideDemo
+        html={simpleHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Breadcrumbs"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: breadcrumbsHtml,
+      }]}
+    >
+      <GuideText>
+        You can replace the Title with Breadcrumbs.
+      </GuideText>
+
+      <GuideDemo
+        html={breadcrumbsHtml}
+      />
+
+      <GuideDemo
+        html={breadcrumbsHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Search"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: searchHtml,
+      }]}
+    >
+      <GuideText>
+        You can add a Search component for filtering results.
+      </GuideText>
+
+      <GuideDemo
+        html={searchHtml}
+      />
+
+      <GuideDemo
+        html={searchHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Invalid Search"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: searchErrorHtml,
+      }]}
+    >
+      <GuideDemo
+        html={searchErrorHtml}
+      />
+
+      <GuideDemo
+        html={searchErrorHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Selected and disabled Menu Item states"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: menuItemStatesHtml,
+      }]}
+    >
+      <GuideText>
+        When the user selects a Menu Item, additional content can be displayed inside of a Dropdown.
+      </GuideText>
+
+      <GuideText>
+        Menu Items can also be disabled, in which case they become non-interactive.
+      </GuideText>
+
+      <GuideDemo
+        html={menuItemStatesHtml}
+      />
+
+      <GuideDemo
+        html={menuItemStatesHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Dropdown"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: dropdownHtml,
+      }]}
+    >
+      <GuideText>
+        Selecting a Menu Item will commonly result in an open Dropdown.
+      </GuideText>
+
+      <GuideDemo
+        html={dropdownHtml}
+      />
+
+      <GuideDemo
+        html={dropdownHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Dropdown panels"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: dropdownPanelsHtml,
+      }]}
+    >
+      <GuideText>
+        You can split the Dropdown into side-by-side Panels.
+      </GuideText>
+
+      <GuideDemo
+        html={dropdownPanelsHtml}
+      />
+
+      <GuideDemo
+        html={dropdownPanelsHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Tabs"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: tabsHtml,
+      }]}
+    >
+      <GuideText>
+        You can display Tabs for navigating local content.
+      </GuideText>
+
+      <GuideDemo
+        html={tabsHtml}
+      />
+
+      <GuideDemo
+        html={tabsHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+  </GuidePage>
+);
+
diff --git a/ui_framework/doc_site/src/views/menu/menu_example.jsx b/ui_framework/doc_site/src/views/menu/menu_example.jsx
index 922ca78ba546d..7010eec60f6a4 100644
--- a/ui_framework/doc_site/src/views/menu/menu_example.jsx
+++ b/ui_framework/doc_site/src/views/menu/menu_example.jsx
@@ -1,15 +1,44 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Menu',
-  html: require('./menu.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Menu, contained',
-  html: require('./menu_contained.html'),
-  hasDarkTheme: false,
-}]);
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+const menuHtml = require('./menu.html');
+const menuContainedHtml = require('./menu_contained.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Menu"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: menuHtml,
+      }]}
+    >
+      <GuideDemo
+        html={menuHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Menu, contained"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: menuContainedHtml,
+      }]}
+    >
+      <GuideDemo
+        html={menuContainedHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx b/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx
index d6bda5ffebfd7..3f8874415a03f 100644
--- a/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx
+++ b/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx
@@ -1,26 +1,74 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
 
-export default createExample([{
-  title: 'Basic MenuButton',
-  html: require('./menu_button_basic.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Danger MenuButton',
-  html: require('./menu_button_danger.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'MenuButton with Icon',
-  description: (
-    <p>You can use a MenuButton with an Icon, with or without text.</p>
-  ),
-  html: require('./menu_button_with_icon.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'MenuButtonGroup',
-  html: require('./menu_button_group.html'),
-  hasDarkTheme: false,
-}]);
+const basicHtml = require('./menu_button_basic.html');
+const dangerHtml = require('./menu_button_danger.html');
+const withIconHtml = require('./menu_button_with_icon.html');
+const groupHtml = require('./menu_button_group.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Basic MenuButton"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: basicHtml,
+      }]}
+    >
+      <GuideDemo
+        html={basicHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Danger MenuButton"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: dangerHtml,
+      }]}
+    >
+      <GuideDemo
+        html={dangerHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="MenuButton with Icon"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: withIconHtml,
+      }]}
+    >
+      <GuideText>
+        You can use a MenuButton with an Icon, with or without text.
+      </GuideText>
+
+      <GuideDemo
+        html={withIconHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="MenuButtonGroup"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: groupHtml,
+      }]}
+    >
+      <GuideDemo
+        html={groupHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx b/ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx
index bf66664e37b31..912c093999f58 100644
--- a/ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx
+++ b/ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx
@@ -1,28 +1,70 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'MicroButton',
-  description: (
-    <p>Use MicroButtons for inline actions inside of Table rows.</p>
-  ),
-  html: require('./micro_button.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'MicroButtonGroup',
-  description: (
-    <p>Use the MicroButtonGroup to emphasize the relationships between a set of MicroButtons, and differentiate them from MicroButtons outside of the set.</p>
-  ),
-  html: require('./micro_button_group.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Element variations',
-  description: (
-    <p>You can create a MicroButton using a button element or a link.</p>
-  ),
-  html: require('./micro_button_elements.html'),
-  hasDarkTheme: false,
-}]);
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const microButtonHtml = require('./micro_button.html');
+const microButtonGroupHtml = require('./micro_button_group.html');
+const microButtonElementsHtml = require('./micro_button_elements.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="MicroButton"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: microButtonHtml,
+      }]}
+    >
+      <GuideText>
+        Use MicroButtons for inline actions inside of Table rows.
+      </GuideText>
+
+      <GuideDemo
+        html={microButtonHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="MicroButtonGroup"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: microButtonGroupHtml,
+      }]}
+    >
+      <GuideText>
+        se the MicroButtonGroup to emphasize the relationships between a set of MicroButtons, and
+        differentiate them from MicroButtons outside of the set.
+      </GuideText>
+
+      <GuideDemo
+        html={microButtonGroupHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Element variations"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: microButtonElementsHtml,
+      }]}
+    >
+      <GuideText>
+        You can create a MicroButton using a button element or a link.
+      </GuideText>
+
+      <GuideDemo
+        html={microButtonElementsHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/modal/modal_example.jsx b/ui_framework/doc_site/src/views/modal/modal_example.jsx
index 7df1dc0a09403..77706874165e3 100644
--- a/ui_framework/doc_site/src/views/modal/modal_example.jsx
+++ b/ui_framework/doc_site/src/views/modal/modal_example.jsx
@@ -1,16 +1,49 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
 
-export default createExample([{
-  title: 'Modal',
-  html: require('./modal.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'ModalOverlay',
-  html: require('./modal_overlay.html'),
-  js: require('raw!./modal_overlay.js'),
-  hasDarkTheme: false,
-}]);
+const modalHtml = require('./modal.html');
+const modalOverlayHtml = require('./modal_overlay.html');
+const modalOverlayJs = require('raw!./modal_overlay.js');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Modal"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: modalHtml,
+      }]}
+    >
+      <GuideDemo
+        html={modalHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ModalOverlay"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: modalOverlayHtml,
+      }, {
+        type: GuideSectionTypes.JS,
+        code: modalOverlayJs,
+      }]}
+    >
+      <GuideDemo
+        html={modalOverlayHtml}
+        js={modalOverlayJs}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/panel/panel_example.jsx b/ui_framework/doc_site/src/views/panel/panel_example.jsx
index 1466fe9e7c832..2459141d8e209 100644
--- a/ui_framework/doc_site/src/views/panel/panel_example.jsx
+++ b/ui_framework/doc_site/src/views/panel/panel_example.jsx
@@ -1,18 +1,48 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
 
-export default createExample([{
-  title: 'Panel',
-  html: require('./panel.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Panel with PanelHeader',
-  description: (
-    <p>The Panel requires a special class when used with a PanelHeader.</p>
-  ),
-  html: require('./panel_with_header.html'),
-  hasDarkTheme: false,
-}]);
+const panelHtml = require('./panel.html');
+const panelWithHeaderHtml = require('./panel_with_header.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Panel"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: panelHtml,
+      }]}
+    >
+      <GuideDemo
+        html={panelHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Panel with PanelHeader"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: panelWithHeaderHtml,
+      }]}
+    >
+      <GuideText>
+        The Panel requires a special class when used with a PanelHeader.
+      </GuideText>
+
+      <GuideDemo
+        html={panelWithHeaderHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/status_text/status_text_example.jsx b/ui_framework/doc_site/src/views/status_text/status_text_example.jsx
index 849524c1beda7..a2b9172a94cbf 100644
--- a/ui_framework/doc_site/src/views/status_text/status_text_example.jsx
+++ b/ui_framework/doc_site/src/views/status_text/status_text_example.jsx
@@ -1,23 +1,69 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
 
-export default createExample([{
-  title: 'Info',
-  html: require('./status_text_info.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Success',
-  html: require('./status_text_success.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Warning',
-  html: require('./status_text_warning.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Error',
-  html: require('./status_text_error.html'),
-  hasDarkTheme: false,
-}]);
+const infoHtml = require('./status_text_info.html');
+const successHtml = require('./status_text_success.html');
+const warningHtml = require('./status_text_warning.html');
+const errorHtml = require('./status_text_error.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Info"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: infoHtml,
+      }]}
+    >
+      <GuideDemo
+        html={infoHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Success"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: successHtml,
+      }]}
+    >
+      <GuideDemo
+        html={successHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Warning"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: warningHtml,
+      }]}
+    >
+      <GuideDemo
+        html={warningHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Error"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: errorHtml,
+      }]}
+    >
+      <GuideDemo
+        html={errorHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/table/table_example.jsx b/ui_framework/doc_site/src/views/table/table_example.jsx
index a040da88a785f..fb965d03ebff6 100644
--- a/ui_framework/doc_site/src/views/table/table_example.jsx
+++ b/ui_framework/doc_site/src/views/table/table_example.jsx
@@ -1,28 +1,87 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
 
-export default createExample([{
-  title: 'Table',
-  html: require('./table.html'),
-  js: require('raw!./table.js'),
-  hasDarkTheme: false,
-}, {
-  title: 'ControlledTable',
-  html: require('./controlled_table.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'ControlledTable with LoadingItems',
-  html: require('./controlled_table_loading_items.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'ControlledTable with NoItems',
-  html: require('./controlled_table_no_items.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'ControlledTable with PromptForItems',
-  html: require('./controlled_table_prompt_for_items.html'),
-  hasDarkTheme: false,
-}]);
+const tableHtml = require('./table.html');
+const tableJs = require('raw!./table.js');
+const controlledTableHtml = require('./controlled_table.html');
+const controlledTableWithLoadingItemsHtml = require('./controlled_table_loading_items.html');
+const controlledTableWithNoItemsHtml = require('./controlled_table_no_items.html');
+const controlledTableWithPromptForItemsHtml = require('./controlled_table_prompt_for_items.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Table"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: tableHtml,
+      }, {
+        type: GuideSectionTypes.JS,
+        code: tableJs,
+      }]}
+    >
+      <GuideDemo
+        html={tableHtml}
+        js={tableJs}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ControlledTable"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: controlledTableHtml,
+      }]}
+    >
+      <GuideDemo
+        html={controlledTableHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ControlledTable with LoadingItems"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: controlledTableWithLoadingItemsHtml,
+      }]}
+    >
+      <GuideDemo
+        html={controlledTableWithLoadingItemsHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ControlledTable with NoItems"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: controlledTableWithNoItemsHtml,
+      }]}
+    >
+      <GuideDemo
+        html={controlledTableWithNoItemsHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ControlledTable with PromptForItems"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: controlledTableWithPromptForItemsHtml,
+      }]}
+    >
+      <GuideDemo
+        html={controlledTableWithPromptForItemsHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/tabs/tabs_example.jsx b/ui_framework/doc_site/src/views/tabs/tabs_example.jsx
index bdeabee6f4fea..1a98dd3969c50 100644
--- a/ui_framework/doc_site/src/views/tabs/tabs_example.jsx
+++ b/ui_framework/doc_site/src/views/tabs/tabs_example.jsx
@@ -1,12 +1,49 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Tabs',
-  html: require('./tabs.html'),
-  js: require('raw!./tabs.js'),
-  hasDarkTheme: false,
-}]);
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const html = require('./tabs.html');
+const js = require('raw!./tabs.js');
+
+export default class TabsExample extends Component {
+  render() {
+    return (
+      <GuidePage title={this.props.route.name}>
+       <GuideSection
+          title="Tabs"
+          source={[{
+            type: GuideSectionTypes.HTML,
+            code: html,
+          }, {
+            type: GuideSectionTypes.JS,
+            code: js,
+          }]}
+        >
+          <GuideText>
+            Wrap any series of components, e.g. Panel, in the VerticalRhythm component to space
+            them apart.
+          </GuideText>
+
+          <GuideDemo
+            html={html}
+            js={js}
+          />
+        </GuideSection>
+      </GuidePage>
+    );
+  }
+}
+
+TabsExample.propTypes = {
+  route: PropTypes.object.isRequired,
+};
diff --git a/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx b/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx
index b2a3e3bd95feb..d51b2edb3fdc2 100644
--- a/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx
+++ b/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx
@@ -1,25 +1,67 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
 
-export default createExample([{
-  title: 'ToolBar',
-  description: (
-    <p>Use the ToolBar to surface controls for manipulating and filtering content, e.g. in a list, table, or menu.</p>
-  ),
-  html: require('./tool_bar.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'ToolBar with Search only',
-  html: require('./tool_bar_search_only.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'ToolBarFooter',
-  description: (
-    <p>Use the ToolBarFooter in conjunction with the ToolBar. It can surface secondary controls or a subset of the primary controls.</p>
-  ),
-  html: require('./tool_bar_footer.html'),
-  hasDarkTheme: false,
-}]);
+const toolBarHtml = require('./tool_bar.html');
+const toolBarSearchOnlyHtml = require('./tool_bar_search_only.html');
+const toolBarFooterHtml = require('./tool_bar_footer.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="ToolBar"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: toolBarHtml,
+      }]}
+    >
+      <GuideText>
+        Use the ToolBar to surface controls for manipulating and filtering content, e.g. in a
+        list, table, or menu.
+      </GuideText>
+
+      <GuideDemo
+        html={toolBarHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ToolBar with Search only"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: toolBarSearchOnlyHtml,
+      }]}
+    >
+      <GuideDemo
+        html={toolBarSearchOnlyHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="ToolBarFooter"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: toolBarFooterHtml,
+      }]}
+    >
+      <GuideText>
+        Use the ToolBarFooter in conjunction with the ToolBar. It can surface secondary
+        controls or a subset of the primary controls.
+      </GuideText>
+
+      <GuideDemo
+        html={toolBarFooterHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/typography/typography_example.jsx b/ui_framework/doc_site/src/views/typography/typography_example.jsx
index 5654c45f9f15c..292e02676c0e9 100644
--- a/ui_framework/doc_site/src/views/typography/typography_example.jsx
+++ b/ui_framework/doc_site/src/views/typography/typography_example.jsx
@@ -1,28 +1,70 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'Title',
-  description: (
-    <p>Works well with an <code className="guideCode">h1</code>.</p>
-  ),
-  html: require('./title.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'SubTitle',
-  description: (
-    <p>Works well with an <code className="guideCode">h2</code>.</p>
-  ),
-  html: require('./sub_title.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'Text',
-  description: (
-    <p>Works well with a <code className="guideCode">p</code>.</p>
-  ),
-  html: require('./text.html'),
-  hasDarkTheme: false,
-}]);
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const titleHtml = require('./title.html');
+const subTitleHtml = require('./sub_title.html');
+const textHtml = require('./text.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Title"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: titleHtml,
+      }]}
+    >
+      <GuideText>
+        Works well with an <GuideCode>h1</GuideCode>.
+      </GuideText>
+
+      <GuideDemo
+        html={titleHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="SubTitle"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: subTitleHtml,
+      }]}
+    >
+      <GuideText>
+        Works well with an <GuideCode>h2</GuideCode>.
+      </GuideText>
+
+      <GuideDemo
+        html={subTitleHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="Text"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: textHtml,
+      }]}
+    >
+      <GuideText>
+        Works well with a <GuideCode>p</GuideCode>.
+      </GuideText>
+
+      <GuideDemo
+        html={textHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.jsx b/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.jsx
index 3f7c8070850bb..eda91d0de2527 100644
--- a/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.jsx
+++ b/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.jsx
@@ -1,31 +1,75 @@
-import React from 'react';
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
 
 import {
-  createExample,
-} from '../../services';
-
-export default createExample([{
-  title: 'VerticalRhythm',
-  description: (
-    <div>
-      <p>VerticalRhythm creates regular vertical spacing between elements.</p>
-      <p><strong>Note:</strong> It only works if two adjacent elements have this class applied, in which case it will create space between them.</p>
-    </div>
-  ),
-  html: require('./vertical_rhythm.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'VerticalRhythm as wrapper',
-  description: (
-    <p>Wrap any series of components, e.g. Panel, in the VerticalRhythm component to space them apart.</p>
-  ),
-  html: require('./vertical_rhythm_as_wrapper.html'),
-  hasDarkTheme: false,
-}, {
-  title: 'VerticalRhythm on component',
-  description: (
-    <p>You can also apply the VerticalRhythm class directly to components.</p>
-  ),
-  html: require('./vertical_rhythm_on_component.html'),
-  hasDarkTheme: false,
-}]);
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const verticalRhythmHtml = require('./vertical_rhythm.html');
+const verticalRhythmAsWrapperHtml = require('./vertical_rhythm_as_wrapper.html');
+const verticalRhythmOnComponentHtml = require('./vertical_rhythm_on_component.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="VerticalRhythm"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: verticalRhythmHtml,
+      }]}
+    >
+      <GuideText>
+        VerticalRhythm creates regular vertical spacing between elements.
+      </GuideText>
+
+      <GuideText>
+        <strong>Note:</strong> It only works if two adjacent elements have this class applied, in
+        which case it will create space between them.
+      </GuideText>
+
+      <GuideDemo
+        html={verticalRhythmHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="VerticalRhythm as wrapper"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: verticalRhythmAsWrapperHtml,
+      }]}
+    >
+      <GuideText>
+        Wrap any series of components, e.g. Panel, in the VerticalRhythm component to space them
+        apart.
+      </GuideText>
+
+      <GuideDemo
+        html={verticalRhythmAsWrapperHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="VerticalRhythm on component"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: verticalRhythmOnComponentHtml,
+      }]}
+    >
+      <GuideText>
+        You can also apply the VerticalRhythm class directly to components.
+      </GuideText>
+
+      <GuideDemo
+        html={verticalRhythmOnComponentHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);

From 15d1e7c8cfa14e58f632bfa8d85a3bb2c9290783 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 20 Feb 2017 08:05:26 -0700
Subject: [PATCH 024/150] Do not generate msearch request for visualizations
 that set requiresSearch to false (#9658)

* only watch searchSource when vis requires search

* add test
---
 src/fixtures/stubbed_search_source.js         |  6 ++
 .../public/visualize/__tests__/visualize.js   | 78 +++++++++++++++++++
 src/ui/public/visualize/visualize.js          | 50 ++++++------
 3 files changed, 110 insertions(+), 24 deletions(-)
 create mode 100644 src/ui/public/visualize/__tests__/visualize.js

diff --git a/src/fixtures/stubbed_search_source.js b/src/fixtures/stubbed_search_source.js
index 08b43ed7d9676..1ba0239d61973 100644
--- a/src/fixtures/stubbed_search_source.js
+++ b/src/fixtures/stubbed_search_source.js
@@ -6,6 +6,7 @@ export default function stubSearchSource(Private, $q, Promise) {
   let deferedResult = $q.defer();
   const indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
 
+  let onResultsCount = 0;
   return {
     sort: sinon.spy(),
     size: sinon.spy(),
@@ -24,11 +25,16 @@ export default function stubSearchSource(Private, $q, Promise) {
       deferedResult = $q.defer();
     },
     onResults: function () {
+      onResultsCount++;
+
       // Up to the test to resolve this manually
       // For example:
       // someHandler.resolve(require('fixtures/search_response'))
       return deferedResult.promise;
     },
+    getOnResultsCount: function () {
+      return onResultsCount;
+    },
     onError: function () { return $q.defer().promise; },
     _flatten: function () {
       return Promise.resolve({ index: indexPattern, body: {} });
diff --git a/src/ui/public/visualize/__tests__/visualize.js b/src/ui/public/visualize/__tests__/visualize.js
new file mode 100644
index 0000000000000..40253f5e862cc
--- /dev/null
+++ b/src/ui/public/visualize/__tests__/visualize.js
@@ -0,0 +1,78 @@
+import $ from 'jquery';
+import _ from 'lodash';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import sinon from 'auto-release-sinon';
+import AggResponseTabifyTableGroupProvider from 'ui/agg_response/tabify/_table_group';
+import VisProvider from 'ui/vis';
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+import FixturesStubbedSearchSourceProvider from 'fixtures/stubbed_search_source';
+describe('visualize directive', function () {
+
+  let $rootScope;
+  let TableGroup;
+  let $compile;
+  let $scope;
+  let $el;
+  let Vis;
+  let indexPattern;
+  let fixtures;
+  let searchSource;
+
+  beforeEach(ngMock.module('kibana', 'kibana/table_vis'));
+  beforeEach(ngMock.inject(function (Private, $injector) {
+    $rootScope = $injector.get('$rootScope');
+    $compile = $injector.get('$compile');
+    fixtures = require('fixtures/fake_hierarchical_data');
+    TableGroup = Private(AggResponseTabifyTableGroupProvider);
+    Vis = Private(VisProvider);
+    indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
+    searchSource = Private(FixturesStubbedSearchSourceProvider);
+  }));
+
+  // basically a parameterized beforeEach
+  function init(vis, esResponse) {
+    vis.aggs.forEach(function (agg, i) { agg.id = 'agg_' + (i + 1); });
+
+    $rootScope.vis = vis;
+    $rootScope.esResponse = esResponse;
+    $rootScope.uiState = require('fixtures/mock_ui_state');
+    $rootScope.searchSource = searchSource;
+    $el = $('<visualize vis="vis" search-source="searchSource" es-resp="esResponse" ui-state="uiState">');
+    $compile($el)($rootScope);
+    $rootScope.$apply();
+
+    $scope = $el.isolateScope();
+  }
+
+  function CreateVis(params, requiresSearch) {
+    return new Vis(indexPattern, {
+      type: 'table',
+      requiresSearch: requiresSearch,
+      params: params || {},
+      aggs: [
+        { type: 'count', schema: 'metric' },
+        {
+          type: 'range',
+          schema: 'bucket',
+          params: {
+            field: 'bytes',
+            ranges: [
+              { from: 0, to: 1000 },
+              { from: 1000, to: 2000 }
+            ]
+          }
+        }
+      ]
+    });
+  }
+
+  it('searchSource.onResults should not be called when requiresSearch is false', function () {
+    const requiresSearch = false;
+    init(new CreateVis(null, requiresSearch), fixtures.oneRangeBucket);
+
+    searchSource.crankResults();
+    $scope.$digest();
+    expect(searchSource.getOnResultsCount()).to.be(0);
+  });
+});
diff --git a/src/ui/public/visualize/visualize.js b/src/ui/public/visualize/visualize.js
index 81e7bdfb48575..5ffd16799aa49 100644
--- a/src/ui/public/visualize/visualize.js
+++ b/src/ui/public/visualize/visualize.js
@@ -171,31 +171,33 @@ uiModules
         if ($scope.renderbot) $scope.renderbot.updateParams();
       }));
 
-      $scope.$watch('searchSource', prereq(function (searchSource) {
-        if (!searchSource || attr.esResp) return;
-
-        // TODO: we need to have some way to clean up result requests
-        searchSource.onResults().then(function onResults(resp) {
-          if ($scope.searchSource !== searchSource) return;
-
-          $scope.esResp = resp;
-
-          return searchSource.onResults().then(onResults);
-        }).catch(notify.fatal);
-
-        searchSource.onError(e => {
-          $el.trigger('renderComplete');
-          if (isTermSizeZeroError(e)) {
-            return notify.error(
-              `Your visualization ('${$scope.vis.title}') has an error: it has a term ` +
-              `aggregation with a size of 0. Please set it to a number greater than 0 to resolve ` +
-              `the error.`
-            );
-          }
+      if (_.get($scope, 'vis.type.requiresSearch')) {
+        $scope.$watch('searchSource', prereq(function (searchSource) {
+          if (!searchSource || attr.esResp) return;
+
+          // TODO: we need to have some way to clean up result requests
+          searchSource.onResults().then(function onResults(resp) {
+            if ($scope.searchSource !== searchSource) return;
+
+            $scope.esResp = resp;
+
+            return searchSource.onResults().then(onResults);
+          }).catch(notify.fatal);
+
+          searchSource.onError(e => {
+            $el.trigger('renderComplete');
+            if (isTermSizeZeroError(e)) {
+              return notify.error(
+                `Your visualization ('${$scope.vis.title}') has an error: it has a term ` +
+                `aggregation with a size of 0. Please set it to a number greater than 0 to resolve ` +
+                `the error.`
+              );
+            }
 
-          notify.error(e);
-        }).catch(notify.fatal);
-      }));
+            notify.error(e);
+          }).catch(notify.fatal);
+        }));
+      }
 
       $scope.$watch('esResp', prereq(function (resp, prevResp) {
         if (!resp) return;

From a3ddaa1db85d10834d35208efc4468571b8f50c8 Mon Sep 17 00:00:00 2001
From: Richard Hoffman <coverslide@users.noreply.github.com>
Date: Tue, 21 Feb 2017 08:22:04 -0800
Subject: [PATCH 025/150] Add addTimeMarker to PointSeries chart config
 (#10169)

---
 src/ui/public/vislib/lib/types/point_series.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js
index c08ff9eb992d2..4a4d0ba4f5f71 100644
--- a/src/ui/public/vislib/lib/types/point_series.js
+++ b/src/ui/public/vislib/lib/types/point_series.js
@@ -42,6 +42,7 @@ export default function ColumnHandler(Private) {
   const createSeries = (cfg, series) => {
     return {
       type: 'point_series',
+      addTimeMarker: cfg.addTimeMarker,
       series: _.map(series, (seri) => {
         return createSerieFromParams(cfg, seri);
       })

From a5f4ac2793cc4a92e7fa80ecb3dc02e2d753f3be Mon Sep 17 00:00:00 2001
From: Spencer <spalger@users.noreply.github.com>
Date: Tue, 21 Feb 2017 09:43:55 -0700
Subject: [PATCH 026/150] [ui/tilemap] switch tile service based on env
 (#10007)

---
 src/server/config/schema.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/server/config/schema.js b/src/server/config/schema.js
index 660fcb9541cf4..6d9d1c81f2346 100644
--- a/src/server/config/schema.js
+++ b/src/server/config/schema.js
@@ -151,7 +151,11 @@ module.exports = () => Joi.object({
     allowAnonymous: Joi.boolean().default(false)
   }).default(),
   tilemap: Joi.object({
-    manifestServiceUrl: Joi.string().default('https://tiles-stage.elastic.co/v2/manifest'),
+    manifestServiceUrl: Joi.when('$dev', {
+      is: true,
+      then: Joi.string().default('https://tiles-stage.elastic.co/v2/manifest'),
+      otherwise: Joi.string().default('https://tiles.elastic.co/v2/manifest')
+    }),
     url: Joi.string(),
     options: Joi.object({
       attribution: Joi.string(),

From 623c0d3551ac629c62a3f774e6869ddcfe7a0c38 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 21 Feb 2017 15:19:28 -0500
Subject: [PATCH 027/150] Add shard allocation plugin (#10482)

---
 docs/plugins/known-plugins.asciidoc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/plugins/known-plugins.asciidoc b/docs/plugins/known-plugins.asciidoc
index 362f461921002..d4c69ff31ac03 100644
--- a/docs/plugins/known-plugins.asciidoc
+++ b/docs/plugins/known-plugins.asciidoc
@@ -17,6 +17,7 @@ This list of plugins is not guaranteed to work on your version of Kibana. Instea
 === Apps
 * https://github.com/sivasamyk/logtrail[LogTrail] - View, analyze, search and tail log events in realtime with a developer/sysadmin friendly interface
 * https://github.com/wtakase/kibana-own-home[Own Home] (wtakase) - enables multi-tenancy
+* https://github.com/asileon/kibana_shard_allocation[Shard Allocation] (asileon) - visualize elasticsearch shard allocation
 
 [float]
 === Timelion Extensions

From 1be84bb15d41038494d7ca01d3344118c47c8c61 Mon Sep 17 00:00:00 2001
From: Mike Dias <mike.rodrigues.dias@gmail.com>
Date: Tue, 21 Feb 2017 17:28:24 -0300
Subject: [PATCH 028/150] Add Cohort analysis plugin in the known plugins
 (#9697)

---
 docs/plugins/known-plugins.asciidoc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/plugins/known-plugins.asciidoc b/docs/plugins/known-plugins.asciidoc
index d4c69ff31ac03..daecacce4f4d5 100644
--- a/docs/plugins/known-plugins.asciidoc
+++ b/docs/plugins/known-plugins.asciidoc
@@ -36,6 +36,7 @@ This list of plugins is not guaranteed to work on your version of Kibana. Instea
 * https://github.com/clamarque/Kibana_health_metric_vis[Health Metric] (clamarque)
 * https://github.com/ommsolutions/kibana_ext_metrics_vis[Extended Metric] (ommsolutions)
 * https://github.com/virusu/3D_kibana_charts_vis[3D Charts] (virusu)
+* https://github.com/elo7/cohort[Cohort analysis] (elo7)
 
 [float]
 === Other

From 47ca135e7c15099a72b601b2e75be9a09134a9c8 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 21 Feb 2017 16:56:44 -0500
Subject: [PATCH 029/150] Update known-plugins.asciidoc (#10301) (#10493)

manual cherry-pick of dd6cb4a34e3520f0a6fc807d798dd1b799df2811, which was originally committed on 5.2. This is the forward port.
---
 docs/plugins/known-plugins.asciidoc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/plugins/known-plugins.asciidoc b/docs/plugins/known-plugins.asciidoc
index daecacce4f4d5..ddc5b376c94a0 100644
--- a/docs/plugins/known-plugins.asciidoc
+++ b/docs/plugins/known-plugins.asciidoc
@@ -37,6 +37,7 @@ This list of plugins is not guaranteed to work on your version of Kibana. Instea
 * https://github.com/ommsolutions/kibana_ext_metrics_vis[Extended Metric] (ommsolutions)
 * https://github.com/virusu/3D_kibana_charts_vis[3D Charts] (virusu)
 * https://github.com/elo7/cohort[Cohort analysis] (elo7)
+* https://github.com/amannocci/kibana-plugin-metric-percent[Percent] (amannocci)
 
 [float]
 === Other

From 5f58cd58a9f3bd56fca36fa686192bc3178b2c91 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 21 Feb 2017 17:22:23 -0500
Subject: [PATCH 030/150] Update known-plugins.asciidoc (#9693) (#10496)

This is a cherry-pick of e4dca4f. This was originally committed on 5.1. This is a forward port.
---
 docs/plugins/known-plugins.asciidoc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/plugins/known-plugins.asciidoc b/docs/plugins/known-plugins.asciidoc
index ddc5b376c94a0..46fc060a66d57 100644
--- a/docs/plugins/known-plugins.asciidoc
+++ b/docs/plugins/known-plugins.asciidoc
@@ -36,6 +36,7 @@ This list of plugins is not guaranteed to work on your version of Kibana. Instea
 * https://github.com/clamarque/Kibana_health_metric_vis[Health Metric] (clamarque)
 * https://github.com/ommsolutions/kibana_ext_metrics_vis[Extended Metric] (ommsolutions)
 * https://github.com/virusu/3D_kibana_charts_vis[3D Charts] (virusu)
+* https://github.com/DeanF/health_metric_vis[Colored Metric Visualization] (deanf)
 * https://github.com/elo7/cohort[Cohort analysis] (elo7)
 * https://github.com/amannocci/kibana-plugin-metric-percent[Percent] (amannocci)
 

From 21d9e5ad4de01caf91f50c759ffb336b851b037e Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Wed, 22 Feb 2017 10:38:32 +0100
Subject: [PATCH 031/150] fixing heatmap y axis labels (#10462)

---
 src/ui/public/vislib/lib/types/point_series.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js
index 4a4d0ba4f5f71..7eb6fb886b375 100644
--- a/src/ui/public/vislib/lib/types/point_series.js
+++ b/src/ui/public/vislib/lib/types/point_series.js
@@ -191,6 +191,7 @@ export default function ColumnHandler(Private) {
           inverted: true
         },
         labels: {
+          filter: false,
           axisFormatter: val => val
         },
         style: {

From 3d777270a270c58cb4a951ca92e8d988ec18e82c Mon Sep 17 00:00:00 2001
From: killolol <killolol@users.noreply.github.com>
Date: Wed, 22 Feb 2017 10:41:41 +0100
Subject: [PATCH 032/150] typo in word normal (#10485)

Maybe related to reported issue https://github.com/elastic/kibana/issues/10473
---
 src/ui/public/vislib_vis_type/vislib_vis_type.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/public/vislib_vis_type/vislib_vis_type.js b/src/ui/public/vislib_vis_type/vislib_vis_type.js
index d5272aba2710a..c917e11457517 100644
--- a/src/ui/public/vislib_vis_type/vislib_vis_type.js
+++ b/src/ui/public/vislib_vis_type/vislib_vis_type.js
@@ -34,7 +34,7 @@ export default function VislibVisTypeFactory(Private) {
     if (params.mode) {
       const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(params.mode);
       params.seriesParams[0].mode = stacked ? 'stacked' : 'normal';
-      const axisMode = ['stacked', 'overlap'].includes(params.mode) ? 'norlal' : params.mode;
+      const axisMode = ['stacked', 'overlap'].includes(params.mode) ? 'normal' : params.mode;
       params.valueAxes[0].scale.mode = axisMode;
       delete params.mode;
     }

From 0bd7f4264e16b50f9a493b3e34a2aac6f5857920 Mon Sep 17 00:00:00 2001
From: Brandon Kobel <brandon.kobel@gmail.com>
Date: Wed, 22 Feb 2017 07:14:21 -0500
Subject: [PATCH 033/150] Executing the visualize shared-item title/description
 tests in a try (#10441)

This function test can be flaky if we try to grab the attributes before
the visualization has finished rendering, so we're wrapping it in a try
---
 test/functional/apps/visualize/_shared_item.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/test/functional/apps/visualize/_shared_item.js b/test/functional/apps/visualize/_shared_item.js
index 54a4a7899f347..231d5393ca62a 100644
--- a/test/functional/apps/visualize/_shared_item.js
+++ b/test/functional/apps/visualize/_shared_item.js
@@ -21,11 +21,13 @@ bdd.describe('visualize app', function describeIndexTests() {
         description: 'AreaChart'
       };
       return PageObjects.visualize.clickVisualizationByName('Visualization AreaChart')
-        .then(() => PageObjects.common.getSharedItemTitleAndDescription())
-        .then(({ title, description }) => {
-          expect(title).to.eql(expected.title);
-          expect(description).to.eql(expected.description);
-        });
+        .then (() => PageObjects.common.try(function () {
+          return PageObjects.common.getSharedItemTitleAndDescription()
+            .then(({ title, description }) => {
+              expect(title).to.eql(expected.title);
+              expect(description).to.eql(expected.description);
+            });
+        }));
     });
   });
 });

From ca71e37abeab3749f22eb977a07e3c06bb95fbbf Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Wed, 22 Feb 2017 14:55:51 +0100
Subject: [PATCH 034/150] fixing heatmap labels (#10334)

---
 src/ui/public/vislib/lib/types/point_series.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js
index 7eb6fb886b375..5d32865a05c2a 100644
--- a/src/ui/public/vislib/lib/types/point_series.js
+++ b/src/ui/public/vislib/lib/types/point_series.js
@@ -105,6 +105,12 @@ export default function ColumnHandler(Private) {
             }
           }
         ];
+      } else {
+        config.valueAxes.forEach(axis => {
+          if (axis.labels) {
+            axis.labels.axisFormatter = data.data.yAxisFormatter || data.get('yAxisFormatter');
+          }
+        });
       }
 
       if (!config.categoryAxes) {
@@ -192,7 +198,7 @@ export default function ColumnHandler(Private) {
         },
         labels: {
           filter: false,
-          axisFormatter: val => val
+          axisFormatter: data.data.yAxisFormatter
         },
         style: {
           rangePadding: 0,

From 2cb4d5179f018d661d36e80db316a833271a4b9c Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jbudz@users.noreply.github.com>
Date: Wed, 22 Feb 2017 11:22:36 -0600
Subject: [PATCH 035/150] Bump makelogs to 3.2.3 (#10510)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2f31667cf0b3f..d749da869b487 100644
--- a/package.json
+++ b/package.json
@@ -222,7 +222,7 @@
     "keymirror": "0.1.1",
     "license-checker": "5.1.2",
     "load-grunt-config": "0.19.2",
-    "makelogs": "3.2.2",
+    "makelogs": "3.2.3",
     "marked-text-renderer": "0.1.0",
     "mocha": "2.5.3",
     "murmurhash3js": "3.0.1",

From 85facdd04d4ed79dc6f6321653034a4cca393e2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <weltenwort@users.noreply.github.com>
Date: Wed, 22 Feb 2017 18:27:49 +0100
Subject: [PATCH 036/150] Show event context (#9198)

This adds a link to the detail view of discover rows to switch to a view of the documents immediately before and after the selected document. Since that view uses the timestamp field of the index pattern, it is only available for time-based indices.

See #9198 for detailed screenshots.
---
 docs/management/advanced-options.asciidoc     |   3 +-
 .../kibana/public/context/NOTES.md            |  97 +++++++++++
 .../public/context/api/__tests__/anchor.js    |  80 ++++++++++
 .../kibana/public/context/api/anchor.js       |  31 ++++
 .../kibana/public/context/api/context.js      |  47 ++++++
 .../context/api/utils/__tests__/fields.js     |  49 ++++++
 .../context/api/utils/__tests__/queries.js    |  46 ++++++
 .../context/api/utils/__tests__/sorting.js    |  63 ++++++++
 .../kibana/public/context/api/utils/fields.js |  21 +++
 .../kibana/public/context/api/utils/ids.js    |   8 +
 .../public/context/api/utils/queries.js       |  29 ++++
 .../public/context/api/utils/sorting.js       |  96 +++++++++++
 .../kibana/public/context/app.html            | 142 ++++++++++++++++
 src/core_plugins/kibana/public/context/app.js | 107 +++++++++++++
 .../loading_button/loading_button.html        |  10 ++
 .../loading_button/loading_button.js          |  21 +++
 .../components/size_picker/size_picker.html   |   7 +
 .../components/size_picker/size_picker.js     |  45 ++++++
 .../components/size_picker/size_picker.less   |  14 ++
 .../kibana/public/context/index.html          |   9 ++
 .../kibana/public/context/index.js            |  48 ++++++
 .../kibana/public/context/query/actions.js    | 151 ++++++++++++++++++
 .../kibana/public/context/query/constants.js  |   6 +
 .../kibana/public/context/query/index.js      |   3 +
 .../kibana/public/context/query/state.js      |  10 ++
 .../query_parameters/__tests__/_utils.js      |  12 ++
 .../action_increase_predecessor_count.js      |  45 ++++++
 .../action_increase_successor_count.js        |  45 ++++++
 .../__tests__/action_set_predecessor_count.js |  36 +++++
 .../__tests__/action_set_query_parameters.js  |  50 ++++++
 .../__tests__/action_set_successor_count.js   |  36 +++++
 .../context/query_parameters/actions.js       |  57 +++++++
 .../context/query_parameters/constants.js     |   6 +
 .../public/context/query_parameters/index.js  |   7 +
 .../public/context/query_parameters/state.js  |  11 ++
 .../field_chooser/discover_field.html         |   6 +-
 .../kibana/public/discover/styles/main.less   |   4 +
 src/core_plugins/kibana/public/kibana.js      |   1 +
 .../doc_table/components/table_header.html    |   6 +-
 .../public/doc_table/components/table_row.js  |  20 ++-
 .../doc_table/components/table_row.less       |  19 +++
 .../doc_table/components/table_row/cell.html  |   2 +-
 .../components/table_row/details.html         |  22 ++-
 .../doc_table/components/table_row/open.html  |   4 +-
 src/ui/public/doc_table/doc_table.html        |   7 +-
 src/ui/public/styles/table.less               |   6 +-
 src/ui/public/styles/truncate.less            |  17 --
 src/ui/public/styles/variables/for-theme.less |   3 +-
 src/ui/settings/defaults.js                   |  10 +-
 .../apps/context/_discover_navigation.js      |  54 +++++++
 test/functional/apps/context/_size.js         |  63 ++++++++
 test/functional/apps/context/index.js         |  28 ++++
 test/functional/index.js                      |   1 +
 test/server_config.js                         |   4 +
 test/support/page_objects/context_page.js     |  58 +++++++
 test/support/page_objects/discover_page.js    |   5 +-
 test/support/page_objects/doc_table.js        |  40 +++++
 test/support/page_objects/index.js            |  38 +++--
 58 files changed, 1819 insertions(+), 47 deletions(-)
 create mode 100644 src/core_plugins/kibana/public/context/NOTES.md
 create mode 100644 src/core_plugins/kibana/public/context/api/__tests__/anchor.js
 create mode 100644 src/core_plugins/kibana/public/context/api/anchor.js
 create mode 100644 src/core_plugins/kibana/public/context/api/context.js
 create mode 100644 src/core_plugins/kibana/public/context/api/utils/__tests__/fields.js
 create mode 100644 src/core_plugins/kibana/public/context/api/utils/__tests__/queries.js
 create mode 100644 src/core_plugins/kibana/public/context/api/utils/__tests__/sorting.js
 create mode 100644 src/core_plugins/kibana/public/context/api/utils/fields.js
 create mode 100644 src/core_plugins/kibana/public/context/api/utils/ids.js
 create mode 100644 src/core_plugins/kibana/public/context/api/utils/queries.js
 create mode 100644 src/core_plugins/kibana/public/context/api/utils/sorting.js
 create mode 100644 src/core_plugins/kibana/public/context/app.html
 create mode 100644 src/core_plugins/kibana/public/context/app.js
 create mode 100644 src/core_plugins/kibana/public/context/components/loading_button/loading_button.html
 create mode 100644 src/core_plugins/kibana/public/context/components/loading_button/loading_button.js
 create mode 100644 src/core_plugins/kibana/public/context/components/size_picker/size_picker.html
 create mode 100644 src/core_plugins/kibana/public/context/components/size_picker/size_picker.js
 create mode 100644 src/core_plugins/kibana/public/context/components/size_picker/size_picker.less
 create mode 100644 src/core_plugins/kibana/public/context/index.html
 create mode 100644 src/core_plugins/kibana/public/context/index.js
 create mode 100644 src/core_plugins/kibana/public/context/query/actions.js
 create mode 100644 src/core_plugins/kibana/public/context/query/constants.js
 create mode 100644 src/core_plugins/kibana/public/context/query/index.js
 create mode 100644 src/core_plugins/kibana/public/context/query/state.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/__tests__/_utils.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_predecessor_count.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_successor_count.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_predecessor_count.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_query_parameters.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_successor_count.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/actions.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/constants.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/index.js
 create mode 100644 src/core_plugins/kibana/public/context/query_parameters/state.js
 create mode 100644 src/ui/public/doc_table/components/table_row.less
 create mode 100644 test/functional/apps/context/_discover_navigation.js
 create mode 100644 test/functional/apps/context/_size.js
 create mode 100644 test/functional/apps/context/index.js
 create mode 100644 test/support/page_objects/context_page.js
 create mode 100644 test/support/page_objects/doc_table.js

diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc
index 0c748cb86a870..a193f03a76847 100644
--- a/docs/management/advanced-options.asciidoc
+++ b/docs/management/advanced-options.asciidoc
@@ -78,7 +78,6 @@ Markdown.
 `notifications:lifetime:error`:: Specifies the duration in milliseconds for error notification displays. The default value is 300000. Set this field to `Infinity` to disable error notifications.
 `notifications:lifetime:warning`:: Specifies the duration in milliseconds for warning notification displays. The default value is 10000. Set this field to `Infinity` to disable warning notifications.
 `notifications:lifetime:info`:: Specifies the duration in milliseconds for information notification displays. The default value is 5000. Set this field to `Infinity` to disable information notifications.
-
 `timelion:showTutorial`:: Set this property to `true` to show the Timelion tutorial to users when they first open Timelion.
 `timelion:es.timefield`:: Default field containing a timestamp when using the `.es()` query.
 `timelion:es.default_index`:: Default index when using the `.es()` query.
@@ -89,3 +88,5 @@ Markdown.
 `timelion:graphite.url`:: [experimental] Used with graphite queries, this it the URL of your host
 `timelion:quandl.key`:: [experimental] Used with quandl queries, this is your API key from www.quandl.com
 `state:storeInSessionStorage`:: [experimental] Kibana tracks UI state in the URL, which can lead to problems when there is a lot of information there and the URL gets very long. Enabling this will store parts of the state in your browser session instead, to keep the URL shorter.
+`context:defaultSize`:: Specifies the initial number of surrounding entries to display in the context view. The default value is 5.
+`context:step`:: Specifies the number to increment or decrement the context size by when using the buttons in the context view. The default value is 5.
diff --git a/src/core_plugins/kibana/public/context/NOTES.md b/src/core_plugins/kibana/public/context/NOTES.md
new file mode 100644
index 0000000000000..eeaa25d24848b
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/NOTES.md
@@ -0,0 +1,97 @@
+# Discover Context App Implementation Notes
+
+The implementation of this app is intended to exhibit certain desirable
+properties by adhering to a set of *principles*. This document aims to explain
+those and the *concepts* employed to achieve that.
+
+
+## Principles
+
+**Single Source of Truth**: A good user experience depends on the UI displaying
+consistent information across the whole page. To achieve this, there should
+always be a single source of truth for the application's state. In this
+application this is the `ContextAppController::state` object.
+
+**Unidirectional Data Flow**: While a single state promotes rendering
+consistency, it does little to make the state changes easier to reason about.
+To avoid having state mutations scattered all over the code, this app
+implements a unidirectional data flow architecture. That means that the state
+is treated as immutable throughout the application except for actions, which
+may modify it to cause angular to re-render and watches to trigger.
+
+**Unit-Testability**: Creating unit tests for large parts of the UI code is
+made easy by expressing the as much of the logic as possible as
+side-effect-free functions. The only place where side-effects are allowed are
+actions. Due to the nature of AngularJS a certain amount of impure code must be
+employed in some cases, e.g. when dealing with the isolate scope bindings in
+`ContextAppController`.
+
+**Loose Coupling**: An attempt was made to couple the parts that make up this
+app as loosely as possible. This means using pure functions whenever possible
+and isolating the angular directives diligently. To that end, the app has been
+implemented as the independent `ContextApp` directive in [app.js](./app.js). It
+does not access the Kibana `AppState` directly but communicates only via its
+directive properties. The binding of these attributes to the state and thereby
+to the route is performed by the `CreateAppRouteController`in
+[index.js](./index.js). Similarly, the `SizePicker` directive only communicates
+with its parent via the passed properties.
+
+
+## Concepts
+
+To adhere to the principles mentioned above, this app borrows some concepts
+from the redux architecture that forms a ciruclar unidirectional data flow:
+
+```
+
+     |* create initial state
+     v
+  +->+
+  |  v
+  |  |* state
+  |  v
+  |  |* angular templates render state
+  |  v
+  |  |* angular calls actions in response to user action/system events
+  |  v
+  |  |* actions modify state
+  |  v
+  +--+
+
+```
+
+**State**: The state is the single source of truth at
+`ContextAppController::state` and may only be modified by actions.
+
+**Action**: Actions are functions that are called inreponse user or system
+actions and may modified the state the are bound to via their closure.
+
+
+## Directory Structure
+
+**index.js**: Defines the route and renders the `<context-app>` directive,
+binding it to the `AppState`.
+
+**app.js**: Defines the `<context-app>` directive, that is at the root of the
+application. Creates the store, reducer and bound actions/selectors.
+
+**query**: Exports the actions, reducers and selectors related to the
+query status and results.
+
+**query_parameters**: Exports the actions, reducers and selectors related to
+the parameters used to construct the query.
+
+**components/loading_button**: Defines the `<context-loading-button>`
+directive including its respective styles.
+
+**components/size_picker**: Defines the `<context-size-picker>`
+directive including its respective styles.
+
+**api/anchor.js**: Exports `fetchAnchor()` that creates and executes the
+query for the anchor document.
+
+**api/context.js**: Exports `fetchPredecessors()` and `fetchSuccessors()` that
+create and execute the queries for the preceeding and succeeding documents.
+
+**api/utils**: Exports various functions used to create and transform
+queries.
diff --git a/src/core_plugins/kibana/public/context/api/__tests__/anchor.js b/src/core_plugins/kibana/public/context/api/__tests__/anchor.js
new file mode 100644
index 0000000000000..02bd4220e6509
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/__tests__/anchor.js
@@ -0,0 +1,80 @@
+import expect from 'expect.js';
+import sinon from 'sinon';
+
+import { fetchAnchor } from 'plugins/kibana/context/api/anchor';
+
+
+describe('context app', function () {
+  describe('function fetchAnchor', function () {
+    it('should use the `search` api to query the given index', function () {
+      const indexPatternStub = createIndexPatternStub('index1');
+      const esStub = createEsStub(['hit1']);
+
+      return fetchAnchor(esStub, indexPatternStub, 'UID', { '@timestamp': 'desc' })
+        .then(() => {
+          expect(esStub.search.calledOnce).to.be(true);
+          expect(esStub.search.firstCall.args[0]).to.have.property('index', 'index1');
+        });
+    });
+
+    it('should include computed fields in the query', function () {
+      const indexPatternStub = createIndexPatternStub('index1');
+      const esStub = createEsStub(['hit1']);
+
+      return fetchAnchor(esStub, indexPatternStub, 'UID', { '@timestamp': 'desc' })
+        .then(() => {
+          expect(esStub.search.calledOnce).to.be(true);
+          expect(esStub.search.firstCall.args[0].body).to.have.keys([
+            'script_fields', 'docvalue_fields', 'stored_fields']);
+        });
+    });
+
+    it('should reject with an error when no hits were found', function () {
+      const indexPatternStub = createIndexPatternStub('index1');
+      const esStub = createEsStub([]);
+
+      return fetchAnchor(esStub, indexPatternStub, 'UID', { '@timestamp': 'desc' })
+        .then(
+          () => {
+            expect().fail('expected the promise to be rejected');
+          },
+          (error) => {
+            expect(error).to.be.an(Error);
+          }
+        );
+    });
+
+    it('should return the first hit after adding an anchor marker', function () {
+      const indexPatternStub = createIndexPatternStub('index1');
+      const esStub = createEsStub([{ property1: 'value1' }, {}]);
+
+      return fetchAnchor(esStub, indexPatternStub, 'UID', { '@timestamp': 'desc' })
+        .then((anchorDocument) => {
+          expect(anchorDocument).to.have.property('property1', 'value1');
+          expect(anchorDocument).to.have.property('$$_isAnchor', true);
+        });
+    });
+  });
+});
+
+
+function createIndexPatternStub(indices) {
+  return {
+    getComputedFields: sinon.stub()
+      .returns({}),
+    toIndexList: sinon.stub()
+      .returns(indices),
+  };
+}
+
+function createEsStub(hits) {
+  return {
+    search: sinon.stub()
+      .returns({
+        hits: {
+          hits,
+          total: hits.length,
+        },
+      }),
+  };
+}
diff --git a/src/core_plugins/kibana/public/context/api/anchor.js b/src/core_plugins/kibana/public/context/api/anchor.js
new file mode 100644
index 0000000000000..90ce76e114e7c
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/anchor.js
@@ -0,0 +1,31 @@
+import _ from 'lodash';
+
+import { addComputedFields } from './utils/fields';
+import { createAnchorQueryBody } from './utils/queries';
+
+
+async function fetchAnchor(es, indexPattern, uid, sort) {
+  const indices = await indexPattern.toIndexList();
+  const queryBody = addComputedFields(indexPattern, createAnchorQueryBody(uid, sort));
+  const response = await es.search({
+    index: indices,
+    body: queryBody,
+  });
+
+  if (_.get(response, ['hits', 'total'], 0) < 1) {
+    throw new Error('Failed to load anchor document.');
+  }
+
+  return Object.assign(
+    {},
+    response.hits.hits[0],
+    {
+      $$_isAnchor: true,
+    },
+  );
+}
+
+
+export {
+  fetchAnchor,
+};
diff --git a/src/core_plugins/kibana/public/context/api/context.js b/src/core_plugins/kibana/public/context/api/context.js
new file mode 100644
index 0000000000000..70f69ad805a64
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/context.js
@@ -0,0 +1,47 @@
+import _ from 'lodash';
+
+import { addComputedFields } from './utils/fields';
+import { getDocumentUid } from './utils/ids';
+import { createSuccessorsQueryBody } from './utils/queries.js';
+import { reverseQuerySort } from './utils/sorting';
+
+
+async function fetchSuccessors(es, indexPattern, anchorDocument, sort, size) {
+  const successorsQueryBody = prepareQueryBody(indexPattern, anchorDocument, sort, size);
+  const results = await performQuery(es, indexPattern, successorsQueryBody);
+  return results;
+}
+
+async function fetchPredecessors(es, indexPattern, anchorDocument, sort, size) {
+  const successorsQueryBody = prepareQueryBody(indexPattern, anchorDocument, sort, size);
+  const predecessorsQueryBody = reverseQuerySort(successorsQueryBody);
+  const reversedResults = await performQuery(es, indexPattern, predecessorsQueryBody);
+  const results = reversedResults.slice().reverse();
+  return results;
+}
+
+
+function prepareQueryBody(indexPattern, anchorDocument, sort, size) {
+  const successorsQueryBody = addComputedFields(
+    indexPattern,
+    createSuccessorsQueryBody(anchorDocument.sort, sort, size)
+  );
+  return successorsQueryBody;
+}
+
+async function performQuery(es, indexPattern, queryBody) {
+  const indices = await indexPattern.toIndexList();
+
+  const response = await es.search({
+    index: indices,
+    body: queryBody,
+  });
+
+  return _.get(response, ['hits', 'hits'], []);
+}
+
+
+export {
+  fetchPredecessors,
+  fetchSuccessors,
+};
diff --git a/src/core_plugins/kibana/public/context/api/utils/__tests__/fields.js b/src/core_plugins/kibana/public/context/api/utils/__tests__/fields.js
new file mode 100644
index 0000000000000..4da7475a0e120
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/utils/__tests__/fields.js
@@ -0,0 +1,49 @@
+import expect from 'expect.js';
+
+import { addComputedFields } from 'plugins/kibana/context/api/utils/fields';
+
+
+describe('context app', function () {
+  describe('function addComputedFields', function () {
+    it('should add the `script_fields` property defined in the given index pattern', function () {
+      const getComputedFields = () => ({
+        scriptFields: {
+          sourcefield1: {
+            script: '_source.field1',
+          },
+        }
+      });
+
+      const query = addComputedFields({ getComputedFields }, {});
+      expect(query).to.have.property('script_fields');
+      expect(query.script_fields).to.eql(getComputedFields().scriptFields);
+    });
+
+    it('should add the `docvalue_fields` property defined in the given index pattern', function () {
+      const getComputedFields = () => ({
+        docvalueFields: ['field1'],
+      });
+
+      const query = addComputedFields({ getComputedFields }, {});
+      expect(query).to.have.property('docvalue_fields');
+      expect(query.docvalue_fields).to.eql(getComputedFields().docvalueFields);
+    });
+
+    it('should add the `stored_fields` property defined in the given index pattern', function () {
+      const getComputedFields = () => ({
+        storedFields: ['field1'],
+      });
+
+      const query = addComputedFields({ getComputedFields }, {});
+      expect(query).to.have.property('stored_fields');
+      expect(query.stored_fields).to.eql(getComputedFields().storedFields);
+    });
+
+    it('should preserve other properties of the query', function () {
+      const getComputedFields = () => ({});
+
+      const query = addComputedFields({ getComputedFields }, { property1: 'value1' });
+      expect(query).to.have.property('property1', 'value1');
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/context/api/utils/__tests__/queries.js b/src/core_plugins/kibana/public/context/api/utils/__tests__/queries.js
new file mode 100644
index 0000000000000..bf6066d5604e3
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/utils/__tests__/queries.js
@@ -0,0 +1,46 @@
+import expect from 'expect.js';
+
+import {
+  createAnchorQueryBody,
+  createSuccessorsQueryBody,
+} from 'plugins/kibana/context/api/utils/queries';
+
+
+describe('context app', function () {
+  describe('function createAnchorQueryBody', function () {
+    it('should return a search definition that searches the given uid', function () {
+      const query = createAnchorQueryBody('UID', { '@timestamp': 'desc' });
+      expect(query.query.terms._uid[0]).to.eql('UID');
+    });
+
+    it('should return a search definition that sorts by the given criteria and uid', function () {
+      const query = createAnchorQueryBody('UID', { '@timestamp': 'desc' });
+      expect(query.sort).to.eql([
+        { '@timestamp': 'desc' },
+        { _uid: 'asc' },
+      ]);
+    });
+  });
+
+  describe('function createSuccessorsQueryBody', function () {
+    it('should return a search definition that includes the given size', function () {
+      const query = createSuccessorsQueryBody([0, 'UID'], { '@timestamp' : 'desc' }, 10);
+      expect(query).to.have.property('size', 10);
+    });
+
+    it('should return a search definition that sorts by the given criteria and uid', function () {
+      const query = createSuccessorsQueryBody([0, 'UID'], { '@timestamp' : 'desc' }, 10);
+      expect(query).to.have.property('sort');
+      expect(query.sort).to.eql([
+        { '@timestamp': 'desc' },
+        { _uid: 'asc' },
+      ]);
+    });
+
+    it('should return a search definition that searches after the given uid', function () {
+      const query = createSuccessorsQueryBody([0, 'UID'], { '@timestamp' : 'desc' }, 10);
+      expect(query).to.have.property('search_after');
+      expect(query.search_after).to.eql([0, 'UID']);
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/context/api/utils/__tests__/sorting.js b/src/core_plugins/kibana/public/context/api/utils/__tests__/sorting.js
new file mode 100644
index 0000000000000..3dfea787df227
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/utils/__tests__/sorting.js
@@ -0,0 +1,63 @@
+import expect from 'expect.js';
+
+import {
+  reverseQuerySort,
+  reverseSortDirection,
+  reverseSortDirective
+} from 'plugins/kibana/context/api/utils/sorting';
+
+
+describe('context app', function () {
+  describe('function reverseQuerySort', function () {
+    it('should reverse all the `sort` property values', function () {
+      expect(reverseQuerySort({
+        sort: [
+          { field1: { order: 'desc', mode: 'max' } },
+          { field2: 'asc' },
+          'field3',
+          '_score',
+        ],
+      })).to.eql({
+        sort: [
+          { field1: { order: 'asc', mode: 'max' } },
+          { field2: 'desc' },
+          { field3: 'desc' },
+          { _score: 'asc' },
+        ],
+      });
+    });
+  });
+
+  describe('function reverseSortDirection', function () {
+    it('should reverse a direction given as a string', function () {
+      expect(reverseSortDirection('asc')).to.eql('desc');
+      expect(reverseSortDirection('desc')).to.eql('asc');
+    });
+
+    it('should reverse a direction given in an option object', function () {
+      expect(reverseSortDirection({ order: 'asc' })).to.eql({ order: 'desc' });
+      expect(reverseSortDirection({ order: 'desc' })).to.eql({ order: 'asc' });
+    });
+
+    it('should preserve other properties than `order` in an option object', function () {
+      expect(reverseSortDirection({
+        order: 'asc',
+        other: 'field',
+      })).to.have.property('other', 'field');
+    });
+  });
+
+  describe('function reverseSortDirective', function () {
+    it('should return direction `asc` when given just `_score`', function () {
+      expect(reverseSortDirective('_score')).to.eql({ _score: 'asc' });
+    });
+
+    it('should return direction `desc` when given just a field name', function () {
+      expect(reverseSortDirective('field1')).to.eql({ field1: 'desc' });
+    });
+
+    it('should reverse direction when given an object', function () {
+      expect(reverseSortDirective({ field1: 'asc' })).to.eql({ field1: 'desc' });
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/context/api/utils/fields.js b/src/core_plugins/kibana/public/context/api/utils/fields.js
new file mode 100644
index 0000000000000..bb55aca77ce11
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/utils/fields.js
@@ -0,0 +1,21 @@
+import _ from 'lodash';
+
+
+const addComputedFields = _.curry(function addComputedFields(indexPattern, queryBody) {
+  const computedFields = indexPattern.getComputedFields();
+
+  return Object.assign(
+    {},
+    queryBody,
+    {
+      script_fields: computedFields.scriptFields,
+      docvalue_fields: computedFields.docvalueFields,
+      stored_fields: computedFields.storedFields,
+    },
+  );
+});
+
+
+export {
+  addComputedFields,
+};
diff --git a/src/core_plugins/kibana/public/context/api/utils/ids.js b/src/core_plugins/kibana/public/context/api/utils/ids.js
new file mode 100644
index 0000000000000..42bd4fac8b511
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/utils/ids.js
@@ -0,0 +1,8 @@
+function getDocumentUid(type, id) {
+  return `${type}#${id}`;
+}
+
+
+export {
+  getDocumentUid,
+};
diff --git a/src/core_plugins/kibana/public/context/api/utils/queries.js b/src/core_plugins/kibana/public/context/api/utils/queries.js
new file mode 100644
index 0000000000000..bcb0a07ab2365
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/utils/queries.js
@@ -0,0 +1,29 @@
+function createAnchorQueryBody(uid, contextSort) {
+  return {
+    _source: true,
+    query: {
+      terms: {
+        _uid: [uid],
+      },
+    },
+    sort: [ contextSort, { _uid: 'asc' } ],
+  };
+}
+
+function createSuccessorsQueryBody(anchorSortValues, contextSort, size) {
+  return {
+    _source: true,
+    query: {
+      match_all: {},
+    },
+    size,
+    sort: [ contextSort, { _uid: 'asc' } ],
+    search_after: anchorSortValues,
+  };
+}
+
+
+export {
+  createAnchorQueryBody,
+  createSuccessorsQueryBody,
+};
diff --git a/src/core_plugins/kibana/public/context/api/utils/sorting.js b/src/core_plugins/kibana/public/context/api/utils/sorting.js
new file mode 100644
index 0000000000000..b64f2b03fe026
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/api/utils/sorting.js
@@ -0,0 +1,96 @@
+import _ from 'lodash';
+
+/**
+ * A sort directive in object or string form.
+ *
+ * @typedef {(SortDirectiveString|SortDirectiveObject)} SortDirective
+ */
+
+/**
+ * A sort directive in object form.
+ *
+ * @typedef {Object.<FieldName, (SortDirection|SortOptions)>} SortDirectiveObject
+ */
+
+/**
+ * A sort order string.
+ *
+ * @typedef {('asc'|'desc')} SortDirection
+ */
+
+/**
+ * A field name.
+ *
+ * @typedef {string} FieldName
+ */
+
+/**
+ * A sort options object
+ *
+ * @typedef {Object} SortOptions
+ * @property {SortDirection} order
+ */
+
+
+/**
+ * Return a copy of a query with the sort direction reversed.
+ *
+ * @param {Object} query - The query to reverse the sort direction of.
+ *
+ * @returns {Object}
+ */
+function reverseQuerySort(query) {
+  return Object.assign(
+    {},
+    query,
+    {
+      sort: _.get(query, 'sort', []).map(reverseSortDirective),
+    }
+  );
+}
+
+/**
+ * Return a copy of the directive with the sort direction reversed. If the
+ * field name is '_score', it inverts the default sort direction in the same
+ * way as Elasticsearch itself.
+ *
+ * @param {SortDirective} sortDirective - The directive to reverse the
+ *     sort direction of
+ *
+ * @returns {SortDirective}
+ */
+function reverseSortDirective(sortDirective) {
+  if (_.isString(sortDirective)) {
+    return {
+      [sortDirective]: (sortDirective === '_score' ? 'asc' : 'desc'),
+    };
+  } else if (_.isPlainObject(sortDirective)) {
+    return _.mapValues(sortDirective, reverseSortDirection);
+  } else {
+    return sortDirective;
+  }
+}
+
+/**
+ * Return the reversed sort direction.
+ *
+ * @param {(SortDirection|SortOptions)} sortDirection
+ *
+ * @returns {(SortDirection|SortOptions)}
+ */
+function reverseSortDirection(sortDirection) {
+  if (_.isPlainObject(sortDirection)) {
+    return _.assign({}, sortDirection, {
+      order: reverseSortDirection(sortDirection.order),
+    });
+  } else {
+    return (sortDirection === 'asc' ? 'desc' : 'asc');
+  }
+}
+
+
+export {
+  reverseQuerySort,
+  reverseSortDirection,
+  reverseSortDirective,
+};
diff --git a/src/core_plugins/kibana/public/context/app.html b/src/core_plugins/kibana/public/context/app.html
new file mode 100644
index 0000000000000..5a0b193ebc972
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/app.html
@@ -0,0 +1,142 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalTitle">
+        Surrounding Documents in {{ contextApp.state.queryParameters.indexPattern.id }}
+      </div>
+    </div>
+  </div>
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+    <div class="kuiLocalTabs">
+      <div class="kuiLocalTab kuiLocalTab-isSelected" ng-bind="contextApp.state.queryParameters.anchorUid"></div>
+    </div>
+  </div>
+</div>
+
+<!-- Error feedback -->
+<div
+  class="kuiViewContent kuiViewContentItem"
+  ng-if="contextApp.state.loadingStatus.anchor === contextApp.constants.LOADING_STATUS.FAILED"
+>
+  <div class="kuiInfoPanel kuiInfoPanel--error kuiVerticalRhythm">
+    <div class="kuiInfoPanelHeader">
+      <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
+      <span class="kuiInfoPanelHeader__title">
+        Problem with query
+      </span>
+    </div>
+
+    <div class="kuiInfoPanelBody">
+      <div class="kuiInfoPanelBody__message">
+        Failed to load the anchor document. Please reload or visit
+        <a ng-href="{{ contextApp.state.navigation.discover.url }}">Discover</a>
+        to select a valid anchor document.
+      </div>
+    </div>
+  </div>
+</div>
+
+<div
+  class="kuiViewContent kuiViewContentItem"
+  ng-if="contextApp.state.loadingStatus.anchor !== contextApp.constants.LOADING_STATUS.FAILED"
+  role="main"
+>
+  <!-- Controls -->
+  <div class="kuiBar kuiVerticalRhythm">
+    <div class="kuiBarSection">
+      <context-loading-button
+        data-test-subj="predecessorLoadMoreButton"
+        is-disabled="![
+          contextApp.constants.LOADING_STATUS.LOADED,
+          contextApp.constants.LOADING_STATUS.FAILED,
+        ].includes(contextApp.state.loadingStatus.predecessors)"
+        icon="'fa-chevron-up'"
+        ng-click="contextApp.actions.fetchMorePredecessorRows()"
+      >
+        Load {{ contextApp.state.queryParameters.defaultStepSize }} more
+      </context-loading-button>
+      <context-size-picker
+        count="contextApp.state.queryParameters.predecessorCount"
+        data-test-subj="predecessorCountPicker"
+        is-disabled="contextApp.state.loadingStatus.anchor !== contextApp.constants.LOADING_STATUS.LOADED"
+        on-change-count="contextApp.actions.fetchGivenPredecessorRows"
+      ></context-size-picker>
+      <span>newer documents</span>
+      <span
+        class="kuiStatusText kuiStatusText--warning"
+        ng-if="(contextApp.state.loadingStatus.predecessors === contextApp.constants.LOADING_STATUS.LOADED)
+          && (contextApp.state.queryParameters.predecessorCount > contextApp.state.rows.predecessors.length)"
+      >
+        <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
+        <span ng-bind-template="Only {{ contextApp.state.rows.predecessors.length }} documents newer than the anchor could be found."></span>
+      </span>
+    </div>
+
+    <div class="kuiBarSection">
+    </div>
+  </div>
+
+  <!-- Loading feedback -->
+  <div
+    ng-if="[
+      contextApp.constants.LOADING_STATUS.UNINITIALIZED,
+      contextApp.constants.LOADING_STATUS.LOADING,
+    ].includes(contextApp.state.loadingStatus.anchor)"
+    class="kuiPanel kuiPanel--centered kuiVerticalRhythm"
+  >
+    <div class="kuiLoadingItems">
+      Loading&hellip;
+    </div>
+  </div>
+
+  <!-- Table -->
+  <div
+    ng-if="contextApp.state.loadingStatus.anchor === contextApp.constants.LOADING_STATUS.LOADED"
+    class="kuiPanel kuiVerticalRhythm"
+  >
+    <div class="discover-table" fixed-scroll>
+      <doc-table
+        hits="contextApp.state.rows.all"
+        index-pattern="contextApp.state.queryParameters.indexPattern"
+        sorting="contextApp.state.queryParameters.sort"
+        columns="contextApp.state.queryParameters.columns"
+        infinite-scroll="true"
+      ></doc-table>
+    </div>
+  </div>
+
+  <!-- Controls -->
+  <div class="kuiBar kuiVerticalRhythm">
+    <div class="kuiBarSection">
+      <context-loading-button
+        data-test-subj="successorLoadMoreButton"
+        is-disabled="![
+          contextApp.constants.LOADING_STATUS.LOADED,
+          contextApp.constants.LOADING_STATUS.FAILED,
+        ].includes(contextApp.state.loadingStatus.successors)"
+        icon="'fa-chevron-down'"
+        ng-click="contextApp.actions.fetchMoreSuccessorRows()"
+      >
+        Load {{ contextApp.state.queryParameters.defaultStepSize }} more
+      </context-loading-button>
+      <context-size-picker
+        count="contextApp.state.queryParameters.successorCount"
+        data-test-subj="successorCountPicker"
+        is-disabled="contextApp.state.loadingStatus.anchor !== contextApp.constants.LOADING_STATUS.LOADED"
+        on-change-count="contextApp.actions.fetchGivenSuccessorRows"
+      ></context-size-picker>
+      <div>older documents</div>
+      <span
+        class="kuiStatusText kuiStatusText--warning"
+        ng-if="(contextApp.state.loadingStatus.successors === contextApp.constants.LOADING_STATUS.LOADED)
+          && (contextApp.state.queryParameters.successorCount > contextApp.state.rows.successors.length)"
+      >
+        <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
+        <span ng-bind-template="Only {{ contextApp.state.rows.successors.length }} documents older than the anchor could be found."></span>
+      </span>
+    </div>
+
+    <div class="kuiBarSection">
+    </div>
+  </div>
+</div>
diff --git a/src/core_plugins/kibana/public/context/app.js b/src/core_plugins/kibana/public/context/app.js
new file mode 100644
index 0000000000000..82c9ef0535cca
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/app.js
@@ -0,0 +1,107 @@
+import _ from 'lodash';
+
+import uiModules from 'ui/modules';
+import contextAppTemplate from './app.html';
+import './components/loading_button';
+import './components/size_picker/size_picker';
+import {
+  createInitialQueryParametersState,
+  QueryParameterActionsProvider,
+  QUERY_PARAMETER_KEYS,
+} from './query_parameters';
+import {
+  createInitialLoadingStatusState,
+  LOADING_STATUS,
+  QueryActionsProvider,
+} from './query';
+
+const module = uiModules.get('apps/context', [
+  'elasticsearch',
+  'kibana',
+  'kibana/config',
+  'kibana/notify',
+  'ngRoute',
+]);
+
+module.directive('contextApp', function ContextApp() {
+  return {
+    bindToController: true,
+    controller: ContextAppController,
+    controllerAs: 'contextApp',
+    restrict: 'E',
+    scope: {
+      anchorUid: '=',
+      columns: '=',
+      indexPattern: '=',
+      predecessorCount: '=',
+      successorCount: '=',
+      sort: '=',
+      discoverUrl: '=',
+    },
+    template: contextAppTemplate,
+  };
+});
+
+function ContextAppController($scope, config, Private) {
+  const queryParameterActions = Private(QueryParameterActionsProvider);
+  const queryActions = Private(QueryActionsProvider);
+
+  this.state = createInitialState(
+    parseInt(config.get('context:step'), 10),
+    this.discoverUrl,
+  );
+
+  this.actions = _.mapValues(Object.assign(
+    {},
+    queryParameterActions,
+    queryActions,
+  ), (action) => (...args) => action(this.state)(...args));
+
+  this.constants = {
+    LOADING_STATUS,
+  };
+
+  $scope.$watchGroup([
+    () => this.state.rows.predecessors,
+    () => this.state.rows.anchor,
+    () => this.state.rows.successors,
+  ], (newValues) => this.actions.setAllRows(...newValues));
+
+  /**
+   * Sync query parameters to arguments
+   */
+  $scope.$watchCollection(
+    () => _.pick(this, QUERY_PARAMETER_KEYS),
+    (newValues) => {
+      // break the watch cycle
+      if (!_.isEqual(newValues, this.state.queryParameters)) {
+        this.actions.fetchAllRowsWithNewQueryParameters(newValues);
+      }
+    },
+  );
+
+  $scope.$watchCollection(
+    () => this.state.queryParameters,
+    (newValues) => {
+      _.assign(this, newValues);
+    },
+  );
+}
+
+function createInitialState(defaultStepSize, discoverUrl) {
+  return {
+    queryParameters: createInitialQueryParametersState(defaultStepSize),
+    rows: {
+      all: [],
+      anchor: null,
+      predecessors: [],
+      successors: [],
+    },
+    loadingStatus: createInitialLoadingStatusState(),
+    navigation: {
+      discover: {
+        url: discoverUrl,
+      },
+    },
+  };
+}
diff --git a/src/core_plugins/kibana/public/context/components/loading_button/loading_button.html b/src/core_plugins/kibana/public/context/components/loading_button/loading_button.html
new file mode 100644
index 0000000000000..a3ca64cbe8e2f
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/components/loading_button/loading_button.html
@@ -0,0 +1,10 @@
+<button
+  class="kuiButton kuiButton--basic kuiButton--iconText"
+  ng-disabled="isDisabled"
+>
+  <span
+    class="kuiButton__icon kuiIcon fa-spinner fa-spin"
+    ng-class="isDisabled ? ['fa-spinner', 'fa-spin'] : [icon]"
+  />
+  <span ng-transclude />
+</button>
diff --git a/src/core_plugins/kibana/public/context/components/loading_button/loading_button.js b/src/core_plugins/kibana/public/context/components/loading_button/loading_button.js
new file mode 100644
index 0000000000000..70a0764959685
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/components/loading_button/loading_button.js
@@ -0,0 +1,21 @@
+import uiModules from 'ui/modules';
+import contextLoadingButtonTemplate from './loading_button.html';
+
+
+const module = uiModules.get('apps/context', [
+  'kibana',
+  'ngRoute',
+]);
+
+module.directive('contextLoadingButton', function ContextLoadingButton() {
+  return {
+    replace: true,
+    restrict: 'E',
+    scope: {
+      isDisabled: '=',
+      icon: '=',
+    },
+    template: contextLoadingButtonTemplate,
+    transclude: true,
+  };
+});
diff --git a/src/core_plugins/kibana/public/context/components/size_picker/size_picker.html b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.html
new file mode 100644
index 0000000000000..6d1516279cb5d
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.html
@@ -0,0 +1,7 @@
+<input
+  class="kuiTextInput contextSizePicker"
+  ng-disabled="contextSizePicker.isDisabled"
+  ng-model-options="{updateOn: 'change', getterSetter: true, debounce: 200}"
+  ng-model="contextSizePicker.getOrSetCount"
+  type="number"
+>
diff --git a/src/core_plugins/kibana/public/context/components/size_picker/size_picker.js b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.js
new file mode 100644
index 0000000000000..1cadca59639d4
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.js
@@ -0,0 +1,45 @@
+import _ from 'lodash';
+import uiModules from 'ui/modules';
+import contextSizePickerTemplate from './size_picker.html';
+import './size_picker.less';
+
+const module = uiModules.get('apps/context', [
+  'kibana',
+]);
+
+module.directive('contextSizePicker', function ContextSizePicker() {
+  return {
+    bindToController: true,
+    controller: ContextSizePickerController,
+    controllerAs: 'contextSizePicker',
+    link: linkContextSizePicker,
+    replace: true,
+    restrict: 'E',
+    require: 'ngModel',
+    scope: {
+      count: '=',
+      isDisabled: '=',
+      onChangeCount: '=',  // To avoid inconsistent ngModel states this action
+                           // should make sure the new value is propagated back
+                           // to the `count` property. If that propagation
+                           // fails, the user input will be reset to the value
+                           // of `count`.
+    },
+    template: contextSizePickerTemplate,
+  };
+});
+
+function linkContextSizePicker(scope, element, attrs, ngModel) {
+  scope.countModel = ngModel;
+}
+
+function ContextSizePickerController($scope) {
+  $scope.$watch(
+    () => this.count,
+    () => $scope.countModel.$rollbackViewValue(),
+  );
+
+  this.getOrSetCount = (count) => (
+    _.isUndefined(count) ? this.count : this.onChangeCount(count)
+  );
+}
diff --git a/src/core_plugins/kibana/public/context/components/size_picker/size_picker.less b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.less
new file mode 100644
index 0000000000000..bec46e3c221e2
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.less
@@ -0,0 +1,14 @@
+/**
+ * 1. Hide increment and decrement buttons for type="number" input.
+ */
+.contextSizePicker {
+  appearance: textfield;
+  text-align: center;
+  width: 5em;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none; /* 1 */
+    margin: 0; /* 1 */
+  }
+}
diff --git a/src/core_plugins/kibana/public/context/index.html b/src/core_plugins/kibana/public/context/index.html
new file mode 100644
index 0000000000000..46069537ada7e
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/index.html
@@ -0,0 +1,9 @@
+<context-app
+  anchor-uid="contextAppRoute.anchorUid"
+  columns="contextAppRoute.state.columns"
+  discover-url="contextAppRoute.discoverUrl"
+  index-pattern="contextAppRoute.indexPattern"
+  predecessor-count="contextAppRoute.state.predecessorCount"
+  successor-count="contextAppRoute.state.successorCount"
+  sort="[contextAppRoute.indexPattern.timeFieldName, 'desc']"
+></context-app>
diff --git a/src/core_plugins/kibana/public/context/index.js b/src/core_plugins/kibana/public/context/index.js
new file mode 100644
index 0000000000000..f217b33da5fee
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/index.js
@@ -0,0 +1,48 @@
+import uiRoutes from 'ui/routes';
+
+import './app';
+import { getDocumentUid } from './api/utils/ids';
+import contextAppRouteTemplate from './index.html';
+
+
+uiRoutes
+.when('/context/:indexPattern/:type/:id', {
+  controller: ContextAppRouteController,
+  controllerAs: 'contextAppRoute',
+  resolve: {
+    indexPattern: function ($route, courier, savedSearches) {
+      return courier.indexPatterns.get($route.current.params.indexPattern);
+    },
+  },
+  template: contextAppRouteTemplate,
+});
+
+
+function ContextAppRouteController(
+  $routeParams,
+  $scope,
+  AppState,
+  chrome,
+  config,
+  indexPattern,
+) {
+  this.state = new AppState(createDefaultAppState(config));
+  this.state.save(true);
+
+  $scope.$watchGroup([
+    'contextAppRoute.state.columns',
+    'contextAppRoute.state.predecessorCount',
+    'contextAppRoute.state.successorCount',
+  ], () => this.state.save(true));
+  this.anchorUid = getDocumentUid($routeParams.type, $routeParams.id);
+  this.indexPattern = indexPattern;
+  this.discoverUrl = chrome.getNavLinkById('kibana:discover').lastSubUrl;
+}
+
+function createDefaultAppState(config) {
+  return {
+    columns: ['_source'],
+    predecessorCount: parseInt(config.get('context:defaultSize'), 10),
+    successorCount: parseInt(config.get('context:defaultSize'), 10),
+  };
+}
diff --git a/src/core_plugins/kibana/public/context/query/actions.js b/src/core_plugins/kibana/public/context/query/actions.js
new file mode 100644
index 0000000000000..83609ef6bceca
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query/actions.js
@@ -0,0 +1,151 @@
+import _ from 'lodash';
+
+import { fetchAnchor } from '../api/anchor';
+import { fetchPredecessors, fetchSuccessors } from '../api/context';
+import { QueryParameterActionsProvider } from '../query_parameters';
+import { LOADING_STATUS } from './constants';
+
+
+export function QueryActionsProvider(es, Notifier, Private, Promise) {
+  const {
+    increasePredecessorCount,
+    increaseSuccessorCount,
+    setPredecessorCount,
+    setQueryParameters,
+    setSuccessorCount,
+  } = Private(QueryParameterActionsProvider);
+
+  const notifier = new Notifier({
+    location: 'Context',
+  });
+
+  const setLoadingStatus = (state) => (subject, status) => (
+    state.loadingStatus[subject] = status
+  );
+
+  const fetchAnchorRow = (state) => () => {
+    const { queryParameters: { indexPattern, anchorUid, sort } } = state;
+
+    setLoadingStatus(state)('anchor', LOADING_STATUS.LOADING);
+
+    return Promise.try(() => (
+      fetchAnchor(es, indexPattern, anchorUid, _.zipObject([sort]))
+    ))
+      .then(
+        (anchorDocument) => {
+          setLoadingStatus(state)('anchor', LOADING_STATUS.LOADED);
+          state.rows.anchor = anchorDocument;
+          return anchorDocument;
+        },
+        (error) => {
+          setLoadingStatus(state)('anchor', LOADING_STATUS.FAILED);
+          notifier.error(error);
+          throw error;
+        }
+      );
+  };
+
+  const fetchPredecessorRows = (state) => () => {
+    const {
+      queryParameters: { indexPattern, predecessorCount, sort },
+      rows: { anchor },
+    } = state;
+
+    setLoadingStatus(state)('predecessors', LOADING_STATUS.LOADING);
+
+    return Promise.try(() => (
+      fetchPredecessors(es, indexPattern, anchor, _.zipObject([sort]), predecessorCount)
+    ))
+      .then(
+        (predecessorDocuments) => {
+          setLoadingStatus(state)('predecessors', LOADING_STATUS.LOADED);
+          state.rows.predecessors = predecessorDocuments;
+          return predecessorDocuments;
+        },
+        (error) => {
+          setLoadingStatus(state)('predecessors', LOADING_STATUS.FAILED);
+          notifier.error(error);
+          throw error;
+        },
+      );
+  };
+
+  const fetchSuccessorRows = (state) => () => {
+    const {
+      queryParameters: { indexPattern, sort, successorCount },
+      rows: { anchor },
+    } = state;
+
+    setLoadingStatus(state)('successors', LOADING_STATUS.LOADING);
+
+    return Promise.try(() => (
+      fetchSuccessors(es, indexPattern, anchor, _.zipObject([sort]), successorCount)
+    ))
+      .then(
+        (successorDocuments) => {
+          setLoadingStatus(state)('successors', LOADING_STATUS.LOADED);
+          state.rows.successors = successorDocuments;
+          return successorDocuments;
+        },
+        (error) => {
+          setLoadingStatus(state)('successors', LOADING_STATUS.FAILED);
+          notifier.error(error);
+          throw error;
+        },
+      );
+  };
+
+  const fetchAllRows = (state) => () => (
+    Promise.try(fetchAnchorRow(state))
+      .then(() => Promise.all([
+        fetchPredecessorRows(state)(),
+        fetchSuccessorRows(state)(),
+      ]))
+  );
+
+  const fetchAllRowsWithNewQueryParameters = (state) => (queryParameters) => {
+    setQueryParameters(state)(queryParameters);
+    return fetchAllRows(state)();
+  };
+
+  const fetchGivenPredecessorRows = (state) => (count) => {
+    setPredecessorCount(state)(count);
+    return fetchPredecessorRows(state)();
+  };
+
+  const fetchGivenSuccessorRows = (state) => (count) => {
+    setSuccessorCount(state)(count);
+    return fetchSuccessorRows(state)();
+  };
+
+  const fetchMorePredecessorRows = (state) => () => {
+    increasePredecessorCount(state)();
+    return fetchPredecessorRows(state)();
+  };
+
+  const fetchMoreSuccessorRows = (state) => () => {
+    increaseSuccessorCount(state)();
+    return fetchSuccessorRows(state)();
+  };
+
+  const setAllRows = (state) => (predecessorRows, anchorRow, successorRows) => (
+    state.rows.all = [
+      ...(predecessorRows || []),
+      ...(anchorRow ? [anchorRow] : []),
+      ...(successorRows || []),
+    ]
+  );
+
+  return {
+    fetchAllRows,
+    fetchAllRowsWithNewQueryParameters,
+    fetchAnchorRow,
+    fetchGivenPredecessorRows,
+    fetchGivenSuccessorRows,
+    fetchMorePredecessorRows,
+    fetchMoreSuccessorRows,
+    fetchPredecessorRows,
+    fetchSuccessorRows,
+    setAllRows,
+  };
+}
diff --git a/src/core_plugins/kibana/public/context/query/constants.js b/src/core_plugins/kibana/public/context/query/constants.js
new file mode 100644
index 0000000000000..4d63357f105ba
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query/constants.js
@@ -0,0 +1,6 @@
+export const LOADING_STATUS = {
+  FAILED: 'failed',
+  LOADED: 'loaded',
+  LOADING: 'loading',
+  UNINITIALIZED: 'uninitialized',
+};
diff --git a/src/core_plugins/kibana/public/context/query/index.js b/src/core_plugins/kibana/public/context/query/index.js
new file mode 100644
index 0000000000000..e0231e236fae4
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query/index.js
@@ -0,0 +1,3 @@
+export { QueryActionsProvider } from './actions';
+export { LOADING_STATUS } from './constants';
+export { createInitialLoadingStatusState } from './state';
diff --git a/src/core_plugins/kibana/public/context/query/state.js b/src/core_plugins/kibana/public/context/query/state.js
new file mode 100644
index 0000000000000..bfce1a2d65465
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query/state.js
@@ -0,0 +1,10 @@
+import { LOADING_STATUS } from './constants';
+
+
+export function createInitialLoadingStatusState() {
+  return {
+    anchor: LOADING_STATUS.UNINITIALIZED,
+    predecessors: LOADING_STATUS.UNINITIALIZED,
+    successors: LOADING_STATUS.UNINITIALIZED,
+  };
+}
diff --git a/src/core_plugins/kibana/public/context/query_parameters/__tests__/_utils.js b/src/core_plugins/kibana/public/context/query_parameters/__tests__/_utils.js
new file mode 100644
index 0000000000000..70328e9fc4fa3
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/__tests__/_utils.js
@@ -0,0 +1,12 @@
+import _ from 'lodash';
+
+
+export function createStateStub(overrides) {
+  return _.merge({
+    queryParameters: {
+      defaultStepSize: 3,
+      predecessorCount: 10,
+      successorCount: 10,
+    },
+  }, overrides);
+}
diff --git a/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_predecessor_count.js b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_predecessor_count.js
new file mode 100644
index 0000000000000..0f787515f1839
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_predecessor_count.js
@@ -0,0 +1,45 @@
+import expect from 'expect.js';
+
+import { createStateStub } from './_utils';
+import { QueryParameterActionsProvider } from '../actions';
+
+
+describe('context app', function () {
+  describe('action increasePredecessorCount', function () {
+    it('should increase the predecessorCount by the given value', function () {
+      const { increasePredecessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      increasePredecessorCount(state)(20);
+
+      expect(state.queryParameters.predecessorCount).to.equal(30);
+    });
+
+    it('should increase the predecessorCount by the default step size if not value is given', function () {
+      const { increasePredecessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      increasePredecessorCount(state)();
+
+      expect(state.queryParameters.predecessorCount).to.equal(13);
+    });
+
+    it('should limit the predecessorCount to 0 as a lower bound', function () {
+      const { increasePredecessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      increasePredecessorCount(state)(-20);
+
+      expect(state.queryParameters.predecessorCount).to.equal(0);
+    });
+
+    it('should limit the predecessorCount to 10000 as an upper bound', function () {
+      const { increasePredecessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      increasePredecessorCount(state)(20000);
+
+      expect(state.queryParameters.predecessorCount).to.equal(10000);
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_successor_count.js b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_successor_count.js
new file mode 100644
index 0000000000000..efa25bbe167c7
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_successor_count.js
@@ -0,0 +1,45 @@
+import expect from 'expect.js';
+
+import { createStateStub } from './_utils';
+import { QueryParameterActionsProvider } from '../actions';
+
+
+describe('context app', function () {
+  describe('action increaseSuccessorCount', function () {
+    it('should increase the successorCount by the given value', function () {
+      const { increaseSuccessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      increaseSuccessorCount(state)(20);
+
+      expect(state.queryParameters.successorCount).to.equal(30);
+    });
+
+    it('should increase the successorCount by the default step size if not value is given', function () {
+      const { increaseSuccessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      increaseSuccessorCount(state)();
+
+      expect(state.queryParameters.successorCount).to.equal(13);
+    });
+
+    it('should limit the successorCount to 0 as a lower bound', function () {
+      const { increaseSuccessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      increaseSuccessorCount(state)(-20);
+
+      expect(state.queryParameters.successorCount).to.equal(0);
+    });
+
+    it('should limit the successorCount to 10000 as an upper bound', function () {
+      const { increaseSuccessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      increaseSuccessorCount(state)(20000);
+
+      expect(state.queryParameters.successorCount).to.equal(10000);
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_predecessor_count.js b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_predecessor_count.js
new file mode 100644
index 0000000000000..6d80dce42fe9c
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_predecessor_count.js
@@ -0,0 +1,36 @@
+import expect from 'expect.js';
+
+import { createStateStub } from './_utils';
+import { QueryParameterActionsProvider } from '../actions';
+
+
+describe('context app', function () {
+  describe('action setPredecessorCount', function () {
+    it('should set the predecessorCount to the given value', function () {
+      const { setPredecessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      setPredecessorCount(state)(20);
+
+      expect(state.queryParameters.predecessorCount).to.equal(20);
+    });
+
+    it('should limit the predecessorCount to 0 as a lower bound', function () {
+      const { setPredecessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      setPredecessorCount(state)(-1);
+
+      expect(state.queryParameters.predecessorCount).to.equal(0);
+    });
+
+    it('should limit the predecessorCount to 10000 as an upper bound', function () {
+      const { setPredecessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      setPredecessorCount(state)(20000);
+
+      expect(state.queryParameters.predecessorCount).to.equal(10000);
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_query_parameters.js b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_query_parameters.js
new file mode 100644
index 0000000000000..7b010a512132e
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_query_parameters.js
@@ -0,0 +1,50 @@
+import expect from 'expect.js';
+
+import { createStateStub } from './_utils';
+import { QueryParameterActionsProvider } from '../actions';
+
+
+describe('context app', function () {
+  describe('action setQueryParameters', function () {
+    it('should update the queryParameters with valid properties from the given object', function () {
+      const { setQueryParameters } = new QueryParameterActionsProvider();
+      const state = createStateStub({
+        queryParameters: {
+          additionalParameter: 'ADDITIONAL_PARAMETER',
+        }
+      });
+
+      setQueryParameters(state)({
+        anchorUid: 'ANCHOR_UID',
+        columns: ['column'],
+        defaultStepSize: 3,
+        indexPattern: 'INDEX_PATTERN',
+        predecessorCount: 100,
+        successorCount: 100,
+        sort: ['field'],
+      });
+
+      expect(state.queryParameters).to.eql({
+        additionalParameter: 'ADDITIONAL_PARAMETER',
+        anchorUid: 'ANCHOR_UID',
+        columns: ['column'],
+        defaultStepSize: 3,
+        indexPattern: 'INDEX_PATTERN',
+        predecessorCount: 100,
+        successorCount: 100,
+        sort: ['field'],
+      });
+    });
+
+    it('should ignore invalid properties', function () {
+      const { setQueryParameters } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      setQueryParameters(state)({
+        additionalParameter: 'ADDITIONAL_PARAMETER',
+      });
+
+      expect(state.queryParameters).to.eql(createStateStub().queryParameters);
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_successor_count.js b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_successor_count.js
new file mode 100644
index 0000000000000..4e3744708e093
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/__tests__/action_set_successor_count.js
@@ -0,0 +1,36 @@
+import expect from 'expect.js';
+
+import { createStateStub } from './_utils';
+import { QueryParameterActionsProvider } from '../actions';
+
+
+describe('context app', function () {
+  describe('action setSuccessorCount', function () {
+    it('should set the successorCount to the given value', function () {
+      const { setSuccessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      setSuccessorCount(state)(20);
+
+      expect(state.queryParameters.successorCount).to.equal(20);
+    });
+
+    it('should limit the successorCount to 0 as a lower bound', function () {
+      const { setSuccessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      setSuccessorCount(state)(-1);
+
+      expect(state.queryParameters.successorCount).to.equal(0);
+    });
+
+    it('should limit the successorCount to 10000 as an upper bound', function () {
+      const { setSuccessorCount } = new QueryParameterActionsProvider();
+      const state = createStateStub();
+
+      setSuccessorCount(state)(20000);
+
+      expect(state.queryParameters.successorCount).to.equal(10000);
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/context/query_parameters/actions.js b/src/core_plugins/kibana/public/context/query_parameters/actions.js
new file mode 100644
index 0000000000000..6a838cd1374ec
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/actions.js
@@ -0,0 +1,57 @@
+import _ from 'lodash';
+
+import {
+  MAX_CONTEXT_SIZE,
+  MIN_CONTEXT_SIZE,
+  QUERY_PARAMETER_KEYS,
+} from './constants';
+
+
+export function QueryParameterActionsProvider() {
+  const setPredecessorCount = (state) => (predecessorCount) => (
+    state.queryParameters.predecessorCount = clamp(
+      MIN_CONTEXT_SIZE,
+      MAX_CONTEXT_SIZE,
+      predecessorCount,
+    )
+  );
+
+  const increasePredecessorCount = (state) => (
+    value = state.queryParameters.defaultStepSize,
+  ) => (
+    setPredecessorCount(state)(state.queryParameters.predecessorCount + value)
+  );
+
+  const setSuccessorCount = (state) => (successorCount) => (
+    state.queryParameters.successorCount = clamp(
+      MIN_CONTEXT_SIZE,
+      MAX_CONTEXT_SIZE,
+      successorCount,
+    )
+  );
+
+  const increaseSuccessorCount = (state) => (
+    value = state.queryParameters.defaultStepSize,
+  ) => (
+    setSuccessorCount(state)(state.queryParameters.successorCount + value)
+  );
+
+  const setQueryParameters = (state) => (queryParameters) => (
+    Object.assign(
+      state.queryParameters,
+      _.pick(queryParameters, QUERY_PARAMETER_KEYS),
+    )
+  );
+
+  return {
+    increasePredecessorCount,
+    increaseSuccessorCount,
+    setPredecessorCount,
+    setQueryParameters,
+    setSuccessorCount,
+  };
+}
+
+function clamp(minimum, maximum, value) {
+  return Math.max(Math.min(maximum, value), minimum);
+}
diff --git a/src/core_plugins/kibana/public/context/query_parameters/constants.js b/src/core_plugins/kibana/public/context/query_parameters/constants.js
new file mode 100644
index 0000000000000..939c4221bc883
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/constants.js
@@ -0,0 +1,6 @@
+import { createInitialQueryParametersState } from './state';
+
+
+export const MAX_CONTEXT_SIZE = 10000; // Elasticsearch's default maximum size limit
+export const MIN_CONTEXT_SIZE = 0;
+export const QUERY_PARAMETER_KEYS = Object.keys(createInitialQueryParametersState());
diff --git a/src/core_plugins/kibana/public/context/query_parameters/index.js b/src/core_plugins/kibana/public/context/query_parameters/index.js
new file mode 100644
index 0000000000000..dcc7b4e641ac7
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/index.js
@@ -0,0 +1,7 @@
+export { QueryParameterActionsProvider } from './actions';
+export {
+  MAX_CONTEXT_SIZE,
+  MIN_CONTEXT_SIZE,
+  QUERY_PARAMETER_KEYS,
+} from './constants';
+export { createInitialQueryParametersState } from './state';
diff --git a/src/core_plugins/kibana/public/context/query_parameters/state.js b/src/core_plugins/kibana/public/context/query_parameters/state.js
new file mode 100644
index 0000000000000..4f8a98d8d797e
--- /dev/null
+++ b/src/core_plugins/kibana/public/context/query_parameters/state.js
@@ -0,0 +1,11 @@
+export function createInitialQueryParametersState(defaultStepSize) {
+  return {
+    anchorUid: null,
+    columns: [],
+    defaultStepSize,
+    indexPattern: null,
+    predecessorCount: 0,
+    successorCount: 0,
+    sort: [],
+  };
+}
diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html b/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html
index d950b12d422f9..c1fcb430e71b8 100644
--- a/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html
+++ b/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html
@@ -1,5 +1,9 @@
 
-    <li class="sidebar-item" attr-field="{{::field.name}}">
+    <li
+      class="sidebar-item"
+      attr-field="{{::field.name}}"
+      data-test-subj="field-{{::field.name}}"
+    >
       <div ng-click="toggleDetails(field)" class="sidebar-item-title">
         <field-name field="field"></field-name>
         <button
diff --git a/src/core_plugins/kibana/public/discover/styles/main.less b/src/core_plugins/kibana/public/discover/styles/main.less
index 3f725765fea20..4f23100d61915 100644
--- a/src/core_plugins/kibana/public/discover/styles/main.less
+++ b/src/core_plugins/kibana/public/discover/styles/main.less
@@ -128,6 +128,10 @@
       font-size: 9px;
     }
 
+    .discover-table-row--highlight td {
+      background-color: #E2F1F6;
+    }
+
 .shard-failures {
   color: @discover-shard-failures-color;
   background-color: @discover-shard-failures-bg !important;
diff --git a/src/core_plugins/kibana/public/kibana.js b/src/core_plugins/kibana/public/kibana.js
index 5815cc33c2d15..9da35d7ef166e 100644
--- a/src/core_plugins/kibana/public/kibana.js
+++ b/src/core_plugins/kibana/public/kibana.js
@@ -14,6 +14,7 @@ import 'plugins/kibana/dashboard/index';
 import 'plugins/kibana/management/index';
 import 'plugins/kibana/doc';
 import 'plugins/kibana/dev_tools';
+import 'plugins/kibana/context';
 import 'ui/vislib';
 import 'ui/agg_response';
 import 'ui/agg_types';
diff --git a/src/ui/public/doc_table/components/table_header.html b/src/ui/public/doc_table/components/table_header.html
index cfd232243cfec..59c49bcd7d3e3 100644
--- a/src/ui/public/doc_table/components/table_header.html
+++ b/src/ui/public/doc_table/components/table_header.html
@@ -1,9 +1,9 @@
 <tr>
   <th width="1%"></th>
-  <th ng-if="indexPattern.timeFieldName">
+  <th ng-if="indexPattern.timeFieldName" data-test-subj="docTableHeaderField">
     <span>Time <i ng-class="headerClass(indexPattern.timeFieldName)" ng-click="sort(indexPattern.timeFieldName)" tooltip="Sort by time"></i></span>
   </th>
-  <th ng-repeat="name in columns">
+  <th ng-repeat="name in columns" data-test-subj="docTableHeaderField">
     <span class="table-header-name">
       {{name | shortDots}} <i ng-class="headerClass(name)" ng-click="sort(name)" tooltip="{{tooltip(name)}}" tooltip-append-to-body="1"></i>
     </span>
@@ -13,4 +13,4 @@
       <i ng-click="moveRight(name)" class="fa fa-angle-double-right" ng-show="!$last" tooltip="Move column to the right" tooltip-append-to-body="1"></i>
     </span>
   </th>
-</tr>
\ No newline at end of file
+</tr>
diff --git a/src/ui/public/doc_table/components/table_row.js b/src/ui/public/doc_table/components/table_row.js
index 33fa7fb8d8c11..058d0d97ba40b 100644
--- a/src/ui/public/doc_table/components/table_row.js
+++ b/src/ui/public/doc_table/components/table_row.js
@@ -1,10 +1,12 @@
 import _ from 'lodash';
 import $ from 'jquery';
+import rison from 'rison-node';
 import 'ui/highlight';
 import 'ui/highlight/highlight_tags';
 import 'ui/doc_viewer';
 import 'ui/filters/trust_as_html';
 import 'ui/filters/short_dots';
+import './table_row.less';
 import noWhiteSpace from 'ui/utils/no_white_space';
 import openRowHtml from 'ui/doc_table/components/table_row/open.html';
 import detailsHtml from 'ui/doc_table/components/table_row/details.html';
@@ -24,7 +26,7 @@ const MIN_LINE_LENGTH = 20;
  * <tr ng-repeat="row in rows" kbn-table-row="row"></tr>
  * ```
  */
-module.directive('kbnTableRow', ['$compile', function ($compile) {
+module.directive('kbnTableRow', function ($compile, $httpParamSerializer, kbnUrl) {
   const cellTemplate = _.template(noWhiteSpace(require('ui/doc_table/components/table_row/cell.html')));
   const truncateByHeightTemplate = _.template(noWhiteSpace(require('ui/partials/truncate_by_height.html')));
 
@@ -89,6 +91,20 @@ module.directive('kbnTableRow', ['$compile', function ($compile) {
         $scope.filter(field, $scope.flattenedRow[column], type);
       };
 
+      $scope.getContextAppHref = () => {
+        const path = kbnUrl.eval('#/context/{{ indexPattern }}/{{ anchorType }}/{{ anchorId }}', {
+          anchorId: $scope.row._id,
+          anchorType: $scope.row._type,
+          indexPattern: $scope.indexPattern.id,
+        });
+        const hash = $httpParamSerializer({
+          _a: rison.encode({
+            columns: $scope.columns,
+          }),
+        });
+        return `${path}?${hash}`;
+      };
+
       // create a tr element that lists the value for each *column*
       function createSummaryRow(row) {
         const indexPattern = $scope.indexPattern;
@@ -180,4 +196,4 @@ module.directive('kbnTableRow', ['$compile', function ($compile) {
       }
     }
   };
-}]);
+});
diff --git a/src/ui/public/doc_table/components/table_row.less b/src/ui/public/doc_table/components/table_row.less
new file mode 100644
index 0000000000000..c3cea6388dd15
--- /dev/null
+++ b/src/ui/public/doc_table/components/table_row.less
@@ -0,0 +1,19 @@
+@import (reference) "~ui/styles/variables";
+
+/**
+ * 1. Visually align the actions with the tabs. We can improve this by using flexbox instead, at a later point.
+ */
+.documentTableRow__actions {
+  float: right;
+  font-family: @font-family-base;
+  padding-top: 8px; /* 1 */
+}
+
+/**
+ * 1. Put some space between the actions.
+ */
+.documentTableRow__action {
+  & + & {
+    margin-left: 10px; /* 1 */
+  }
+}
diff --git a/src/ui/public/doc_table/components/table_row/cell.html b/src/ui/public/doc_table/components/table_row/cell.html
index ce8be42f6e3cf..6f371f078ce06 100644
--- a/src/ui/public/doc_table/components/table_row/cell.html
+++ b/src/ui/public/doc_table/components/table_row/cell.html
@@ -8,7 +8,7 @@
   attributes='class="discover-table-datafield"';
 }
 %>
-<td <%= attributes %>>
+<td <%= attributes %> data-test-subj="docTableField">
   <%= formatted %>
   <span class="table-cell-filter">
     <% if (filterable) { %>
diff --git a/src/ui/public/doc_table/components/table_row/details.html b/src/ui/public/doc_table/components/table_row/details.html
index d83d868dbefeb..ab80689ecd382 100644
--- a/src/ui/public/doc_table/components/table_row/details.html
+++ b/src/ui/public/doc_table/components/table_row/details.html
@@ -1,6 +1,20 @@
 <td colspan="{{ columns.length + 2 }}">
-  <a class="pull-right" ng-href="#/doc/{{indexPattern.id}}/{{row._index}}/{{row._type}}/?id={{row._id | uriescape}}">
-    <small>Link to /{{row._index}}/{{row._type}}/{{row._id | uriescape}}</small></i>
-  </a>
+  <div class="documentTableRow__actions">
+    <a
+      class="kuiLink documentTableRow__action"
+      data-test-subj="docTableRowAction"
+      ng-href="{{ getContextAppHref() }}"
+      ng-if="indexPattern.hasTimeField()"
+    >
+      View surrounding documents
+    </a>
+    <a
+      class="kuiLink documentTableRow__action"
+      data-test-subj="docTableRowAction"
+      ng-href="#/doc/{{indexPattern.id}}/{{row._index}}/{{row._type}}/?id={{row._id | uriescape}}"
+    >
+      View single document
+    </a>
+  </div>
   <doc-viewer hit="row" filter="filter" columns="columns" index-pattern="indexPattern"></doc-viewer>
-</td>
\ No newline at end of file
+</td>
diff --git a/src/ui/public/doc_table/components/table_row/open.html b/src/ui/public/doc_table/components/table_row/open.html
index 5fc93269dce7b..ee61869d639e9 100644
--- a/src/ui/public/doc_table/components/table_row/open.html
+++ b/src/ui/public/doc_table/components/table_row/open.html
@@ -1,6 +1,6 @@
-<td ng-click="toggleRow()">
+<td ng-click="toggleRow()" data-test-subj="docTableExpandToggleColumn">
   <i
     class="fa discover-table-open-icon"
     ng-class="{ 'fa-caret-down': open, 'fa-caret-right': !open }">
   </i>
-</td>
\ No newline at end of file
+</td>
diff --git a/src/ui/public/doc_table/doc_table.html b/src/ui/public/doc_table/doc_table.html
index 1f7f0c0c90ce0..c44694385c961 100644
--- a/src/ui/public/doc_table/doc_table.html
+++ b/src/ui/public/doc_table/doc_table.html
@@ -21,7 +21,7 @@
     </table>
   </paginate>
 
-  <table ng-if="infiniteScroll" class="kbn-table table" ng-if="indexPattern">
+  <table ng-if="infiniteScroll" class="kbn-table table" ng-if="indexPattern" data-test-subj="docTable">
     <thead
       kbn-table-header
       columns="columns"
@@ -35,7 +35,10 @@
         sorting="sorting"
         index-pattern="indexPattern"
         filter="filter"
-        class="discover-table-row"></tr>
+        class="discover-table-row"
+        ng-class="{'discover-table-row--highlight': row['$$_isAnchor']}"
+        data-test-subj="docTableRow{{ row['$$_isAnchor'] ? ' docTableAnchorRow' : ''}}"
+      ></tr>
     </tbody>
   </table>
   <kbn-infinite-scroll ng-if="infiniteScroll" more="addRows"></kbn-infinite-scroll>
diff --git a/src/ui/public/styles/table.less b/src/ui/public/styles/table.less
index 68969e18abd19..2ffa21eb5f485 100644
--- a/src/ui/public/styles/table.less
+++ b/src/ui/public/styles/table.less
@@ -21,6 +21,10 @@ kbn-table, .kbn-table, tbody[kbn-rows] {
     }
   }
 
+  /**
+   * 1. Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted
+   *    row in the Context Log.
+   */
   dl.source {
     margin-bottom: 0;
     line-height: 2em;
@@ -31,7 +35,7 @@ kbn-table, .kbn-table, tbody[kbn-rows] {
     }
 
     dt {
-      background: @table-dt-bg;
+      background-color: rgba(108, 135, 142, 0.15); /* 1 */
       color: @table-dt-color;
       padding: @padding-xs-vertical @padding-xs-horizontal;
       margin-right: @padding-xs-horizontal;
diff --git a/src/ui/public/styles/truncate.less b/src/ui/public/styles/truncate.less
index 0b6e013308bcc..30ba5fea2a4ea 100644
--- a/src/ui/public/styles/truncate.less
+++ b/src/ui/public/styles/truncate.less
@@ -1,20 +1,3 @@
-@import (reference) "~ui/styles/variables";
-
-@truncate1: fade(@truncate-color, 0%);
-@truncate2: fade(@truncate-color, 1%);
-@truncate3: fade(@truncate-color, 99%);
-@truncate4: fade(@truncate-color, 100%);
-
 .truncate-by-height {
-  position: relative;
   overflow: hidden;
-
-  &:before {
-    content: " ";
-    width: 100%;
-    height: 15px; // copied into index.html!
-    position: absolute;
-    left: 0;
-    background: linear-gradient(to bottom, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
-  }
 }
diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less
index 5d41f0f7c0439..89dbd407060b0 100644
--- a/src/ui/public/styles/variables/for-theme.less
+++ b/src/ui/public/styles/variables/for-theme.less
@@ -52,6 +52,8 @@
 @discover-field-details-bg: @kibanaGray5;
 @discover-field-details-progress-bar-bg: @gray;
 
+@discover-table-highlight-bg: #faebcc;
+
 
 // Field name ==================================================================
 @field-name-color: @kibanaGray3;
@@ -80,7 +82,6 @@
 
 
 // table =======================================================================
-@table-dt-bg: @gray-lighter;
 @table-dt-color: @brand-primary;
 @table-cell-hover-bg: white;
 @table-cell-hover-hover-bg: @gray-lighter;
diff --git a/src/ui/settings/defaults.js b/src/ui/settings/defaults.js
index 6c3baa3edbd6e..c3c5f43159dc6 100644
--- a/src/ui/settings/defaults.js
+++ b/src/ui/settings/defaults.js
@@ -310,6 +310,14 @@ export default function defaultSettingsProvider() {
     'indexPattern:placeholder': {
       value: 'logstash-*',
       description: 'The placeholder for the field "Index name or pattern" in the "Settings > Indices" tab.',
-    }
+    },
+    'context:defaultSize': {
+      value: 5,
+      description: 'The number of surrounding entries to show in the context view',
+    },
+    'context:step': {
+      value: 5,
+      description: 'The step size to increment or decrement the context size by',
+    },
   };
 }
diff --git a/test/functional/apps/context/_discover_navigation.js b/test/functional/apps/context/_discover_navigation.js
new file mode 100644
index 0000000000000..e838cd2635524
--- /dev/null
+++ b/test/functional/apps/context/_discover_navigation.js
@@ -0,0 +1,54 @@
+import expect from 'expect.js';
+
+import { bdd, esClient } from '../../../support';
+import PageObjects from '../../../support/page_objects';
+
+
+const TEST_DISCOVER_START_TIME = '2015-09-19 06:31:44.000';
+const TEST_DISCOVER_END_TIME = '2015-09-23 18:31:44.000';
+const TEST_COLUMN_NAMES = ['@message'];
+
+bdd.describe('context link in discover', function contextSize() {
+  bdd.before(async function() {
+    await PageObjects.common.navigateToApp('discover');
+    await PageObjects.header.setAbsoluteRange(TEST_DISCOVER_START_TIME, TEST_DISCOVER_END_TIME);
+    await Promise.all(TEST_COLUMN_NAMES.map((columnName) => (
+      PageObjects.discover.clickFieldListItemAdd(columnName)
+    )));
+  });
+
+  bdd.it('should open the context view with the selected document as anchor', async function () {
+    const discoverDocTable = await PageObjects.docTable.getTable();
+    const firstRow = (await PageObjects.docTable.getBodyRows(discoverDocTable))[0];
+    const firstTimestamp = await (await PageObjects.docTable.getFields(firstRow))[0]
+      .getVisibleText();
+
+    // add a column in Discover
+    await (await PageObjects.docTable.getRowExpandToggle(firstRow)).click();
+    const firstDetailsRow = (await PageObjects.docTable.getDetailsRows(discoverDocTable))[0];
+    await (await PageObjects.docTable.getRowActions(firstDetailsRow))[0].click();
+
+    // check the column in the Context View
+    await PageObjects.common.try(async () => {
+      const contextDocTable = await PageObjects.docTable.getTable();
+      const anchorRow = await PageObjects.docTable.getAnchorRow(contextDocTable);
+      const anchorTimestamp = await (await PageObjects.docTable.getFields(anchorRow))[0]
+        .getVisibleText();
+      expect(anchorTimestamp).to.equal(firstTimestamp);
+    });
+  });
+
+  bdd.it('should open the context view with the same columns', async function () {
+    const docTable = await PageObjects.docTable.getTable();
+    await PageObjects.common.try(async () => {
+      const headerFields = await PageObjects.docTable.getHeaderFields(docTable);
+      const columnNames = await Promise.all(headerFields.map((headerField) => (
+        headerField.getVisibleText()
+      )));
+      expect(columnNames).to.eql([
+        'Time',
+        ...TEST_COLUMN_NAMES,
+      ]);
+    });
+  });
+});
diff --git a/test/functional/apps/context/_size.js b/test/functional/apps/context/_size.js
new file mode 100644
index 0000000000000..adfa0670b7db9
--- /dev/null
+++ b/test/functional/apps/context/_size.js
@@ -0,0 +1,63 @@
+import expect from 'expect.js';
+
+import { bdd, esClient } from '../../../support';
+import PageObjects from '../../../support/page_objects';
+
+
+const TEST_INDEX_PATTERN = 'logstash-*';
+const TEST_ANCHOR_TYPE = 'apache';
+const TEST_ANCHOR_ID = 'AU_x3_BrGFA8no6QjjaI';
+const TEST_DEFAULT_CONTEXT_SIZE = 7;
+const TEST_STEP_SIZE = 3;
+
+bdd.describe('context size', function contextSize() {
+  bdd.before(async function() {
+    await esClient.updateConfigDoc({
+      'context:defaultSize': `${TEST_DEFAULT_CONTEXT_SIZE}`,
+      'context:step': `${TEST_STEP_SIZE}`,
+    });
+  });
+
+  bdd.it('should default to the `context:defaultSize` setting', async function () {
+    await PageObjects.context.navigateTo(TEST_INDEX_PATTERN, TEST_ANCHOR_TYPE, TEST_ANCHOR_ID);
+
+    const docTable = await PageObjects.docTable.getTable();
+    await PageObjects.common.try(async function () {
+      expect(await PageObjects.docTable.getBodyRows(docTable)).to.have.length(2 * TEST_DEFAULT_CONTEXT_SIZE + 1);
+    });
+    await PageObjects.common.try(async function() {
+      const predecessorCountPicker = await PageObjects.context.getPredecessorCountPicker();
+      expect(await predecessorCountPicker.getProperty('value')).to.equal(`${TEST_DEFAULT_CONTEXT_SIZE}`);
+    });
+    await PageObjects.common.try(async function() {
+      const successorCountPicker = await PageObjects.context.getSuccessorCountPicker();
+      expect(await successorCountPicker.getProperty('value')).to.equal(`${TEST_DEFAULT_CONTEXT_SIZE}`);
+    });
+  });
+
+  bdd.it('should increase according to the `context:step` setting when clicking the `load newer` button', async function() {
+    await PageObjects.context.navigateTo(TEST_INDEX_PATTERN, TEST_ANCHOR_TYPE, TEST_ANCHOR_ID);
+
+    const docTable = await PageObjects.docTable.getTable();
+    await (await PageObjects.context.getPredecessorLoadMoreButton()).click();
+    await PageObjects.common.try(async function () {
+      expect(await PageObjects.docTable.getBodyRows(docTable)).to.have.length(
+        2 * TEST_DEFAULT_CONTEXT_SIZE + TEST_STEP_SIZE + 1
+      );
+    });
+  });
+
+  bdd.it('should increase according to the `context:step` setting when clicking the `load older` button', async function() {
+    await PageObjects.context.navigateTo(TEST_INDEX_PATTERN, TEST_ANCHOR_TYPE, TEST_ANCHOR_ID);
+
+    const docTable = await PageObjects.docTable.getTable();
+    const successorLoadMoreButton = await PageObjects.context.getSuccessorLoadMoreButton();
+    await this.remote.moveMouseTo(successorLoadMoreButton);  // possibly scroll until the button is visible
+    await successorLoadMoreButton.click();
+    await PageObjects.common.try(async function () {
+      expect(await PageObjects.docTable.getBodyRows(docTable)).to.have.length(
+        2 * TEST_DEFAULT_CONTEXT_SIZE + TEST_STEP_SIZE + 1
+      );
+    });
+  });
+});
diff --git a/test/functional/apps/context/index.js b/test/functional/apps/context/index.js
new file mode 100644
index 0000000000000..d789ff3c2d005
--- /dev/null
+++ b/test/functional/apps/context/index.js
@@ -0,0 +1,28 @@
+
+import {
+  bdd,
+  defaultTimeout,
+  elasticDump,
+  remote,
+  scenarioManager,
+} from '../../../support';
+
+import PageObjects from '../../../support/page_objects';
+
+bdd.describe('context app', function () {
+  this.timeout = defaultTimeout;
+
+  bdd.before(async function () {
+    await PageObjects.remote.setWindowSize(1200,800);
+    await scenarioManager.loadIfEmpty('logstashFunctional');
+    await elasticDump.elasticLoad('visualize','.kibana');
+    await PageObjects.common.navigateToApp('discover');
+  });
+
+  bdd.after(function unloadMakelogs() {
+    return scenarioManager.unload('logstashFunctional');
+  });
+
+  require('./_discover_navigation');
+  require('./_size');
+});
diff --git a/test/functional/index.js b/test/functional/index.js
index 65bf202538814..605bb1bee9d5d 100644
--- a/test/functional/index.js
+++ b/test/functional/index.js
@@ -35,6 +35,7 @@ define(function (require) {
       'intern/dojo/node!./apps/visualize',
       'intern/dojo/node!./apps/console',
       'intern/dojo/node!./apps/dashboard',
+      'intern/dojo/node!./apps/context',
       'intern/dojo/node!./status_page'
     ].filter((suite) => {
       if (!requestedApps) return true;
diff --git a/test/server_config.js b/test/server_config.js
index 869f281e376f6..5528867bfcf00 100644
--- a/test/server_config.js
+++ b/test/server_config.js
@@ -34,6 +34,10 @@ module.exports = {
       pathname: kibanaURL,
       hash: '/discover',
     },
+    context: {
+      pathname: kibanaURL,
+      hash: '/context',
+    },
     visualize: {
       pathname: kibanaURL,
       hash: '/visualize',
diff --git a/test/support/page_objects/context_page.js b/test/support/page_objects/context_page.js
new file mode 100644
index 0000000000000..bb201066ebe6f
--- /dev/null
+++ b/test/support/page_objects/context_page.js
@@ -0,0 +1,58 @@
+import rison from 'rison-node';
+
+import { config } from '../';
+import PageObjects from './';
+import getUrl from '../../utils/get_url';
+
+
+const DEFAULT_INITIAL_STATE = {
+  columns: ['@message'],
+};
+
+export default class ContextPage {
+  init(remote) {
+    this.remote = remote;
+  }
+
+  async navigateTo(indexPattern, anchorType, anchorId, overrideInitialState = {}) {
+    const initialState = rison.encode({
+      ...DEFAULT_INITIAL_STATE,
+      ...overrideInitialState,
+    });
+    const appUrl = getUrl.noAuth(config.servers.kibana, {
+      ...config.apps.context,
+      hash: `${config.apps.context.hash}/${indexPattern}/${anchorType}/${anchorId}?_a=${initialState}`,
+    });
+
+    await this.remote.get(appUrl);
+    await this.remote.refresh();
+    await this.waitUntilContextLoadingHasFinished();
+  }
+
+  getPredecessorCountPicker() {
+    return PageObjects.common.findTestSubject('predecessorCountPicker');
+  }
+
+  getSuccessorCountPicker() {
+    return PageObjects.common.findTestSubject('successorCountPicker');
+  }
+
+  getPredecessorLoadMoreButton() {
+    return PageObjects.common.findTestSubject('predecessorLoadMoreButton');
+  }
+
+  getSuccessorLoadMoreButton() {
+    return PageObjects.common.findTestSubject('predecessorLoadMoreButton');
+  }
+
+  waitUntilContextLoadingHasFinished() {
+    return PageObjects.common.try(async () => {
+      if (
+        !(await this.getSuccessorLoadMoreButton().isEnabled())
+        || !(await this.getPredecessorLoadMoreButton().isEnabled())
+      ) {
+        throw new Error('loading context rows');
+      }
+    });
+  }
+}
diff --git a/test/support/page_objects/discover_page.js b/test/support/page_objects/discover_page.js
index dc332fa858034..f47520c3f935f 100644
--- a/test/support/page_objects/discover_page.js
+++ b/test/support/page_objects/discover_page.js
@@ -291,7 +291,10 @@ export default class DiscoverPage {
   }
 
   async clickFieldListItemAdd(field) {
-    await PageObjects.common.findTestSubject('fieldToggle-' + field).click();
+    const listEntry = await PageObjects.common.findTestSubject(`field-${field}`);
+    await this.remote.moveMouseTo(listEntry);
+    await PageObjects.common.findTestSubject(`fieldToggle-${field}`)
+      .click();
   }
 
   async clickFieldListItemVisualize(field) {
diff --git a/test/support/page_objects/doc_table.js b/test/support/page_objects/doc_table.js
new file mode 100644
index 0000000000000..0c31073a59c91
--- /dev/null
+++ b/test/support/page_objects/doc_table.js
@@ -0,0 +1,40 @@
+import PageObjects from './';
+
+export default class DocTable {
+
+  init(remote) {
+    this.remote = remote;
+  }
+
+  getTable() {
+    return PageObjects.common.findTestSubject('docTable');
+  }
+
+  async getBodyRows(table) {
+    return await table.findAllByCssSelector('[data-test-subj~="docTableRow"]');
+  }
+
+  async getAnchorRow(table) {
+    return await table.findByCssSelector('[data-test-subj~="docTableAnchorRow"]');
+  }
+
+  async getRowExpandToggle(row) {
+    return await row.findByCssSelector('[data-test-subj~="docTableExpandToggleColumn"]');
+  }
+
+  async getDetailsRows(table) {
+    return await table.findAllByCssSelector('[data-test-subj~="docTableRow"] + tr');
+  }
+
+  async getRowActions(row) {
+    return await row.findAllByCssSelector('[data-test-subj~="docTableRowAction"]');
+  }
+
+  async getFields(row) {
+    return await row.findAllByCssSelector('[data-test-subj~="docTableField"]');
+  }
+
+  async getHeaderFields(table) {
+    return await table.findAllByCssSelector('[data-test-subj~="docTableHeaderField"]');
+  }
+}
diff --git a/test/support/page_objects/index.js b/test/support/page_objects/index.js
index 9566525c4f24e..9673f8e85021a 100644
--- a/test/support/page_objects/index.js
+++ b/test/support/page_objects/index.js
@@ -1,6 +1,7 @@
 
 import Common from './common';
 import ConsolePage from './console_page';
+import ContextPage from './context_page';
 import DashboardPage from './dashboard_page';
 import DiscoverPage from './discover_page';
 import HeaderPage from './header_page';
@@ -9,9 +10,11 @@ import ShieldPage from './shield_page';
 import VisualizePage from './visualize_page';
 import VisualizePointSeriesOptions from './visualize_point_series_options';
 import MonitoringPage from './monitoring_page';
+import DocTable from './doc_table';
 
 const common = new Common();
 const consolePage = new ConsolePage();
+const contextPage = new ContextPage();
 const dashboardPage = new DashboardPage();
 const discoverPage = new DiscoverPage();
 const headerPage = new HeaderPage();
@@ -21,26 +24,33 @@ const visualizePage = new VisualizePage();
 const visualizePointSeriesOptions = new VisualizePointSeriesOptions();
 const monitoringPage = new MonitoringPage();
 
+const docTable = new DocTable();
+
 class PageObjects {
 
   constructor() {
     this.isInitialized = false;
     this.remote = undefined;
+    this.pageObjects = [
+      common,
+      consolePage,
+      contextPage,
+      dashboardPage,
+      discoverPage,
+      headerPage,
+      settingsPage,
+      shieldPage,
+      visualizePage,
+      visualizePointSeriesOptions,
+      monitoringPage,
+      docTable,
+    ];
   }
 
   init(remote) {
     this.isInitialized = true;
     this.remote = remote;
-    common.init(remote);
-    consolePage.init(remote);
-    dashboardPage.init(remote);
-    discoverPage.init(remote);
-    headerPage.init(remote);
-    settingsPage.init(remote);
-    shieldPage.init(remote);
-    visualizePage.init(remote);
-    visualizePointSeriesOptions.init(remote);
-    monitoringPage.init(remote);
+    this.pageObjects.map((pageObject) => pageObject.init(remote));
   }
 
   assertInitialized() {
@@ -58,6 +68,10 @@ class PageObjects {
     return this.assertInitialized() && consolePage;
   }
 
+  get context() {
+    return this.assertInitialized() && contextPage;
+  }
+
   get dashboard() {
     return this.assertInitialized() && dashboardPage;
   }
@@ -90,6 +104,10 @@ class PageObjects {
     return this.assertInitialized() && monitoringPage;
   }
 
+  get docTable() {
+    return this.assertInitialized() && docTable;
+  }
+
 }
 
 export default new PageObjects();

From 7cc913dce99e98335fcc9fdc1166187674c88600 Mon Sep 17 00:00:00 2001
From: Spencer <spalger@users.noreply.github.com>
Date: Wed, 22 Feb 2017 10:40:29 -0700
Subject: [PATCH 037/150] [npm] upgrade elasticsearch-js (#10509)

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d749da869b487..12fc20dacc67e 100644
--- a/package.json
+++ b/package.json
@@ -115,8 +115,8 @@
     "d3": "3.5.6",
     "d3-cloud": "1.2.1",
     "dragula": "3.7.0",
-    "elasticsearch": "12.1.2",
-    "elasticsearch-browser": "12.1.2",
+    "elasticsearch": "13.0.0-beta2",
+    "elasticsearch-browser": "13.0.0-beta2",
     "encode-uri-query": "1.0.0",
     "even-better": "7.0.2",
     "expiry-js": "0.1.7",

From 9de7ad931379faee0b337d1ab2253ebcad3027f3 Mon Sep 17 00:00:00 2001
From: Spencer <spalger@users.noreply.github.com>
Date: Wed, 22 Feb 2017 10:41:44 -0700
Subject: [PATCH 038/150] [Promise.race/tests] make completion time an
 inclusive range (#10511)

---
 src/ui/public/promises/__tests__/promises.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/public/promises/__tests__/promises.js b/src/ui/public/promises/__tests__/promises.js
index c34f585269b4f..4547a30eab033 100644
--- a/src/ui/public/promises/__tests__/promises.js
+++ b/src/ui/public/promises/__tests__/promises.js
@@ -110,8 +110,8 @@ describe('Promise service', function () {
       const p2 = new Promise(resolve => setTimeout(resolve, 5000));
       await Promise.race([p1, p2]);
       const time = Date.now() - start;
-      expect(time).to.be.lessThan(1000);
-      expect(time).to.be.greaterThan(100);
+      expect(time).to.not.be.lessThan(100);
+      expect(time).to.not.be.greaterThan(2000);
     });
     it('allows non-promises in the array', async () => {
       expect(await Promise.race([1,2,3])).to.be(1);

From a0536b1fce4326241633cfe441f8104ed3f97c1f Mon Sep 17 00:00:00 2001
From: Brandon Kobel <brandon.kobel@gmail.com>
Date: Wed, 22 Feb 2017 16:48:35 -0500
Subject: [PATCH 039/150] Fixing a naming collision the shared-item visualize
 tests were hitting (#10517)

---
 test/fixtures/dump_data/visualize.data.json    | 2 +-
 test/functional/apps/visualize/_shared_item.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/fixtures/dump_data/visualize.data.json b/test/fixtures/dump_data/visualize.data.json
index a41403fe6f72d..e3b8e2972abf0 100644
--- a/test/fixtures/dump_data/visualize.data.json
+++ b/test/fixtures/dump_data/visualize.data.json
@@ -1,2 +1,2 @@
 {"_index":".kibana","_type":"index-pattern","_id":"logstash-*","_score":1,"_source":{"title":"logstash-*","timeFieldName":"@timestamp","fields":"[{\"name\":\"referer\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"agent\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:image:width\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"xss.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"headings.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.user.lastname\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:tag.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"geo.dest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:section.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"utc_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:card\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.char\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"clientip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image:height\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"host\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"machine.ram\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"links\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"id\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@tags.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"phpmemory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.twitter:card.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"ip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:modified_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:site_name.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"request.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:tag\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"agent.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"spaces\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:site.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"headings\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"_source\",\"type\":\"_source\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"relatedContent.og:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"request\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"index.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"extension\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"memory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"_index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"relatedContent.twitter:site\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"geo.coordinates\",\"type\":\"geo_point\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"meta.related\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"response.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@message.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"machine.os\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.article:section\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"xss\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"links.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"geo.srcdest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"extension.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"machine.os.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@tags\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"host.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:type.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"geo.src\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"spaces.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:image:height.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:site_name\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"@message\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.twitter:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"@timestamp\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"bytes\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"response\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"meta.user.firstname\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":true,\"doc_values\":false},{\"name\":\"relatedContent.og:image:width.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.og:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"relatedContent.article:published_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"indexed\":true,\"analyzed\":false,\"doc_values\":true},{\"name\":\"_id\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"_type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false},{\"name\":\"_score\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"indexed\":false,\"analyzed\":false,\"doc_values\":false}]"}}
-{"_index":".kibana","_type":"visualization","_id":"Visualization-AreaChart","_score":1,"_source":{"title":"Visualization AreaChart","visState":"{\"title\":\"New Visualization\",\"type\":\"area\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"smoothLines\":false,\"scale\":\"linear\",\"interpolate\":\"linear\",\"mode\":\"stacked\",\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"date_histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"@timestamp\",\"interval\":\"auto\",\"customInterval\":\"2h\",\"min_doc_count\":1,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"AreaChart","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
+{"_index":".kibana","_type":"visualization","_id":"Shared-Item-Visualization-AreaChart","_score":1,"_source":{"title":"Shared-Item Visualization AreaChart","visState":"{\"title\":\"New Visualization\",\"type\":\"area\",\"params\":{\"shareYAxis\":true,\"addTooltip\":true,\"addLegend\":true,\"smoothLines\":false,\"scale\":\"linear\",\"interpolate\":\"linear\",\"mode\":\"stacked\",\"times\":[],\"addTimeMarker\":false,\"defaultYExtents\":false,\"setYExtents\":false,\"yAxis\":{}},\"aggs\":[{\"id\":\"1\",\"type\":\"count\",\"schema\":\"metric\",\"params\":{}},{\"id\":\"2\",\"type\":\"date_histogram\",\"schema\":\"segment\",\"params\":{\"field\":\"@timestamp\",\"interval\":\"auto\",\"customInterval\":\"2h\",\"min_doc_count\":1,\"extended_bounds\":{}}}],\"listeners\":{}}","uiStateJSON":"{}","description":"AreaChart","version":1,"kibanaSavedObjectMeta":{"searchSourceJSON":"{\"index\":\"logstash-*\",\"query\":{\"query_string\":{\"query\":\"*\",\"analyze_wildcard\":true}},\"filter\":[]}"}}}
diff --git a/test/functional/apps/visualize/_shared_item.js b/test/functional/apps/visualize/_shared_item.js
index 231d5393ca62a..67eaf88c27495 100644
--- a/test/functional/apps/visualize/_shared_item.js
+++ b/test/functional/apps/visualize/_shared_item.js
@@ -17,10 +17,10 @@ bdd.describe('visualize app', function describeIndexTests() {
 
     bdd.it('should have the correct shared-item title and description', function () {
       const expected = {
-        title: 'Visualization AreaChart',
+        title: 'Shared-Item Visualization AreaChart',
         description: 'AreaChart'
       };
-      return PageObjects.visualize.clickVisualizationByName('Visualization AreaChart')
+      return PageObjects.visualize.clickVisualizationByName('Shared-Item Visualization AreaChart')
         .then (() => PageObjects.common.try(function () {
           return PageObjects.common.getSharedItemTitleAndDescription()
             .then(({ title, description }) => {

From a93f8e2885cab87816e114a04edc702767aa51b3 Mon Sep 17 00:00:00 2001
From: Richard Hoffman <coverslide@users.noreply.github.com>
Date: Wed, 22 Feb 2017 14:10:45 -0800
Subject: [PATCH 040/150] [breadcrumbs] - fix breadcrumb url matcher, add
 management intermediary routes (#10084)

[breadcrumbs] Redirect to parent page for management intermediate route paths

[breadcrumbs] Fix snake case and camelcase routes handling, update tests

[breadcrumbs] omit "indices" index pattern breadcrumb

[breadcrumbs] Document the BreadCrumbUrl object

[breadcrumbs] Remove hardcoded omitPages, fix double slash bug
---
 .../kibana/public/management/app.html         |  2 ++
 .../kibana/public/management/index.js         | 10 ++++--
 .../management/sections/indices/_create.js    |  2 +-
 .../management/sections/indices/_edit.html    |  2 +-
 .../management/sections/objects/_objects.js   |  5 +++
 src/ui/public/chrome/api/angular.js           |  1 -
 .../kbn_top_nav/__tests__/bread_crumb_urls.js | 35 +++++++++++++++----
 .../bread_crumbs/bread_crumb_urls.js          | 14 +++++---
 .../bread_crumbs/bread_crumbs.html            | 10 +++---
 .../kbn_top_nav/bread_crumbs/bread_crumbs.js  | 23 ++++++------
 10 files changed, 69 insertions(+), 35 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/app.html b/src/core_plugins/kibana/public/management/app.html
index 0c3d442232f42..b607f5b707d06 100644
--- a/src/core_plugins/kibana/public/management/app.html
+++ b/src/core_plugins/kibana/public/management/app.html
@@ -7,6 +7,8 @@
       <bread-crumbs
         data-transclude-slot="topLeftCorner"
         omit-current-page="true"
+        use-links="true"
+        omit-pages="omitPages"
       ></bread-crumbs>
 
       <!-- Tabs. -->
diff --git a/src/core_plugins/kibana/public/management/index.js b/src/core_plugins/kibana/public/management/index.js
index 79d720ae13a10..35f819251aa95 100644
--- a/src/core_plugins/kibana/public/management/index.js
+++ b/src/core_plugins/kibana/public/management/index.js
@@ -20,19 +20,25 @@ uiRoutes
   template: landingTemplate
 });
 
+uiRoutes
+.when('/management/:section', {
+  redirectTo: '/management'
+});
+
 require('ui/index_patterns/route_setup/load_default')({
   whenMissingRedirectTo: '/management/kibana/index'
 });
 
 uiModules
 .get('apps/management')
-.directive('kbnManagementApp', function (Private, $route, $location, timefilter, buildNum, buildSha) {
+.directive('kbnManagementApp', function (Private, $location, timefilter, buildNum, buildSha) {
   return {
     restrict: 'E',
     template: appTemplate,
     transclude: true,
     scope: {
-      sectionName: '@section'
+      sectionName: '@section',
+      omitPages: '@omitBreadcrumbPages'
     },
 
     link: function ($scope) {
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_create.js b/src/core_plugins/kibana/public/management/sections/indices/_create.js
index 0c070892a99a9..0efb97ad80d73 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_create.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/_create.js
@@ -9,7 +9,7 @@ import uiModules from 'ui/modules';
 import createTemplate from 'plugins/kibana/management/sections/indices/_create.html';
 
 uiRoutes
-.when('/management/kibana/index/', {
+.when('/management/kibana/index', {
   template: createTemplate
 });
 
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_edit.html b/src/core_plugins/kibana/public/management/sections/indices/_edit.html
index 08b2ce9ed73c2..17619cb80be9e 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_edit.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/_edit.html
@@ -1,4 +1,4 @@
-<kbn-management-app section="kibana">
+<kbn-management-app section="kibana" omit-breadcrumb-pages="['indices']">
   <kbn-management-indices>
     <div ng-controller="managementIndicesEdit" data-test-subj="editIndexPattern">
       <div class="page-header">
diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.js b/src/core_plugins/kibana/public/management/sections/objects/_objects.js
index abc36d05cb3c2..544ed3574eeb8 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/_objects.js
+++ b/src/core_plugins/kibana/public/management/sections/objects/_objects.js
@@ -14,6 +14,11 @@ uiRoutes
   template: objectIndexHTML
 });
 
+uiRoutes
+.when('/management/kibana/objects/:service', {
+  redirectTo: '/management/kibana/objects'
+});
+
 uiModules.get('apps/management')
 .directive('kbnManagementObjects', function (kbnIndex, Notifier, Private, kbnUrl, Promise, confirmModal) {
   return {
diff --git a/src/ui/public/chrome/api/angular.js b/src/ui/public/chrome/api/angular.js
index 72dbd0192de10..23eea6259768c 100644
--- a/src/ui/public/chrome/api/angular.js
+++ b/src/ui/public/chrome/api/angular.js
@@ -59,7 +59,6 @@ export default function (chrome, internals) {
         }
 
         return path.substr(1, length)
-          .replace(/_/g, ' ') // Present snake-cased breadcrumb names as individual words
           .split('/');
       };
 
diff --git a/src/ui/public/kbn_top_nav/__tests__/bread_crumb_urls.js b/src/ui/public/kbn_top_nav/__tests__/bread_crumb_urls.js
index 0290af224e086..8db81c0ac8b58 100644
--- a/src/ui/public/kbn_top_nav/__tests__/bread_crumb_urls.js
+++ b/src/ui/public/kbn_top_nav/__tests__/bread_crumb_urls.js
@@ -10,26 +10,27 @@ describe('getBreadCrumbUrls', function () {
       'http://test.com/path1/path2/a/longlonglonglong');
     expect(breadCrumbUrls.length).to.equal(4);
     expect(breadCrumbUrls[0].url).to.equal('http://test.com/path1');
-    expect(breadCrumbUrls[0].breadcrumb).to.equal('path1');
+    expect(breadCrumbUrls[0].title).to.equal('Path 1');
 
     expect(breadCrumbUrls[1].url).to.equal('http://test.com/path1/path2');
-    expect(breadCrumbUrls[1].breadcrumb).to.equal('path2');
+    expect(breadCrumbUrls[1].title).to.equal('Path 2');
 
     expect(breadCrumbUrls[2].url).to.equal('http://test.com/path1/path2/a');
-    expect(breadCrumbUrls[2].breadcrumb).to.equal('a');
+    expect(breadCrumbUrls[2].title).to.equal('A');
 
     expect(breadCrumbUrls[3].url).to.equal('http://test.com/path1/path2/a/longlonglonglong');
-    expect(breadCrumbUrls[3].breadcrumb).to.equal('longlonglonglong');
+    expect(breadCrumbUrls[3].title).to.equal('Longlonglonglong');
   });
 
   it('is case insensitive', function () {
-    const breadCrumbUrls = getBreadCrumbUrls(['Path1', 'Path2'], 'http://TEST.com/paTh1/path2');
+    const breadCrumbUrls = getBreadCrumbUrls(['paTh1', 'path2'], 'http://TEST.com/paTh1/path2');
     expect(breadCrumbUrls.length).to.equal(2);
     expect(breadCrumbUrls[0].url).to.equal('http://TEST.com/paTh1');
-    expect(breadCrumbUrls[0].breadcrumb).to.equal('Path1');
+    expect(breadCrumbUrls[0].path).to.equal('paTh1');
+    expect(breadCrumbUrls[0].title).to.equal('Pa Th 1');
 
     expect(breadCrumbUrls[1].url).to.equal('http://TEST.com/paTh1/path2');
-    expect(breadCrumbUrls[1].breadcrumb).to.equal('Path2');
+    expect(breadCrumbUrls[1].title).to.equal('Path 2');
   });
 
   it('handles no breadcrumbs case', function () {
@@ -37,4 +38,24 @@ describe('getBreadCrumbUrls', function () {
     expect(breadCrumbUrls.length).to.equal(0);
   });
 
+  it('handles spaces in breadcrumbs', function () {
+    const breadCrumbUrls = getBreadCrumbUrls(
+      ['something', 'somethingElse', 'snake_case', 'longLongLongLong'],
+      'http://test.com/something/somethingElse/snake_case/longLongLongLong');
+    expect(breadCrumbUrls.length).to.equal(4);
+    expect(breadCrumbUrls[0].url).to.equal('http://test.com/something');
+    expect(breadCrumbUrls[0].title).to.equal('Something');
+
+    expect(breadCrumbUrls[1].url).to.equal('http://test.com/something/somethingElse');
+    expect(breadCrumbUrls[1].path).to.equal('somethingElse');
+    expect(breadCrumbUrls[1].title).to.equal('Something Else');
+
+    expect(breadCrumbUrls[2].url).to.equal('http://test.com/something/somethingElse/snake_case');
+    expect(breadCrumbUrls[2].path).to.equal('snake_case');
+    expect(breadCrumbUrls[2].title).to.equal('Snake Case');
+
+    expect(breadCrumbUrls[3].url).to.equal('http://test.com/something/somethingElse/snake_case/longLongLongLong');
+    expect(breadCrumbUrls[3].title).to.equal('Long Long Long Long');
+  });
+
 });
diff --git a/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumb_urls.js b/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumb_urls.js
index 78123a3e908ba..fc5146a613642 100644
--- a/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumb_urls.js
+++ b/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumb_urls.js
@@ -1,6 +1,8 @@
+import _ from 'lodash';
 /**
  * @typedef BreadCrumbUrl {Object}
- * @property breadcrumb {String} a breadcrumb
+ * @property title {String} the display title for the breadcrumb
+ * @property path {String} the subdirectory for this particular breadcrumb
  * @property url {String} a url for the breadcrumb
  */
 
@@ -13,11 +15,13 @@
  * was generated for.
  */
 export function getBreadCrumbUrls(breadcrumbs, url) {
-  return breadcrumbs.map(breadcrumb => {
-    const breadCrumbStartIndex = url.toLowerCase().lastIndexOf(breadcrumb.toLowerCase());
+  // the url should not have a slash on the end or else the route will not be properly built
+  const urlBase = url.replace(/\/+$/, '').replace(breadcrumbs.join('/'), '');
+  return breadcrumbs.map((path, index) => {
     return {
-      breadcrumb,
-      url: url.substring(0, breadCrumbStartIndex + breadcrumb.length)
+      path: path,
+      title: _.startCase(path),
+      url: urlBase + breadcrumbs.slice(0, index + 1).join('/')
     };
   });
 }
diff --git a/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.html b/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.html
index 2c2e5186ce3ca..459c178473ff0 100644
--- a/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.html
+++ b/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.html
@@ -1,9 +1,9 @@
-<div class="kuiLocalBreadcrumbs">
-  <div class="kuiLocalBreadcrumb" ng-if="useLinks" ng-repeat="breadCrumbUrl in breadCrumbUrls">
-    <a class=kuiLocalBreadcrumb__link" href="{{breadCrumbUrl.url}}">{{breadCrumbUrl.breadcrumb}}</a>
+<div class="kuiLocalBreadcrumbs" data-test-subj="breadcrumbs">
+  <div class="kuiLocalBreadcrumb" ng-if="useLinks && (!omitPages || !omitPages.includes(breadcrumb.path))" ng-repeat="breadcrumb in breadcrumbs">
+    <a class=kuiLocalBreadcrumb__link" href="{{breadcrumb.url}}">{{breadcrumb.title}}</a>
   </div>
-  <div class="kuiLocalBreadcrumb" ng-if="!useLinks" ng-repeat="breadcrumb in breadcrumbs">
-    {{ breadcrumb }}
+  <div class="kuiLocalBreadcrumb" ng-if="!useLinks && (!omitPages || !omitPages.includes(breadcrumb.path))" ng-repeat="breadcrumb in breadcrumbs">
+    {{ breadcrumb.title }}
   </div>
   <div class="kuiLocalBreadcrumb" ng-if="pageTitle">
     {{ pageTitle }}
diff --git a/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.js b/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.js
index bb02fef4971e0..eff1ecfa43c80 100644
--- a/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.js
+++ b/src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.js
@@ -30,22 +30,19 @@ module.directive('breadCrumbs', function ($location) {
     },
     template: breadCrumbsTemplate,
     controller: function ($scope) {
-      // Capitalize the first letter of each bread crumb.
-      $scope.breadcrumbs = chrome.getBreadcrumbs().map(breadcrumb => _.startCase(breadcrumb));
-
-      if ($scope.omitCurrentPage === true) {
-        $scope.breadcrumbs.pop();
-      }
-
-      if ($scope.omitPages) {
-        $scope.breadcrumbs = $scope.breadcrumbs.filter(breadcrumb =>
-          !$scope.omitPages.includes(breadcrumb.toLowerCase())
-        );
-      }
+      const breadcrumbs = chrome.getBreadcrumbs();
 
       if ($scope.useLinks) {
         const url = '#' + $location.path();
-        $scope.breadCrumbUrls = getBreadCrumbUrls($scope.breadcrumbs, url);
+        $scope.breadcrumbs = getBreadCrumbUrls(breadcrumbs, url);
+      } else {
+        $scope.breadcrumbs = breadcrumbs.map(path => ({
+          path: path,
+          title: _.startCase(path)
+        }));
+      }
+      if ($scope.omitCurrentPage === true) {
+        $scope.breadcrumbs.pop();
       }
     }
   };

From a8989cc2ee3134433c0bea50aa1938735c383d68 Mon Sep 17 00:00:00 2001
From: jasper <elastic-jasper@users.noreply.github.com>
Date: Wed, 22 Feb 2017 23:08:30 -0500
Subject: [PATCH 041/150] docs: Fixes key for Tribe's requestTimeout (#10525)

Backports PR #10503

**Commit 1:**
Update doc

Include elasticsearch.tribe.requestTimeout setting

* Original sha: 5a01e24695a7380b908b2bd4b72733de7f94bd31
* Authored by Nikhil Patel <niks999@gmail.com> on 2017-02-22T11:17:01Z
* Committed by GitHub <noreply@github.com> on 2017-02-22T11:17:01Z
---
 docs/setup/settings.asciidoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/setup/settings.asciidoc b/docs/setup/settings.asciidoc
index 6500e9ac2f036..04c2de1f58cc1 100644
--- a/docs/setup/settings.asciidoc
+++ b/docs/setup/settings.asciidoc
@@ -84,7 +84,7 @@ authority for your Elasticsearch instance.
 to `false`.
 `elasticsearch.tribe.pingTimeout:`:: *Default: the value of the `elasticsearch.tribe.requestTimeout` setting* Time in milliseconds to
 wait for Elasticsearch to respond to pings.
-`elasticsearch.requestTimeout:`:: *Default: 30000* Time in milliseconds to wait for responses from the back end or
+`elasticsearch.tribe.requestTimeout:`:: *Default: 30000* Time in milliseconds to wait for responses from the back end or
 Elasticsearch. This value must be a positive integer.
 `elasticsearch.tribe.requestHeadersWhitelist:`:: *Default: `[ 'authorization' ]`* List of Kibana client-side headers to send to Elasticsearch.
 To send *no* client-side headers, set this value to [] (an empty list).

From 925b7daee74b1186e0633b9e5df314685ea6218d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <weltenwort@users.noreply.github.com>
Date: Thu, 23 Feb 2017 12:24:48 +0100
Subject: [PATCH 042/150] Apply kui framework styles to single doc view
 (#10200)

* Apply kui framework styles to single doc view
* Clean up header content
* Replace usage of entry with document

relates to #10198
---
 src/core_plugins/kibana/public/doc/index.html | 93 ++++++++++++-------
 1 file changed, 60 insertions(+), 33 deletions(-)

diff --git a/src/core_plugins/kibana/public/doc/index.html b/src/core_plugins/kibana/public/doc/index.html
index ccc3f6768d0e6..7c17126f16f91 100644
--- a/src/core_plugins/kibana/public/doc/index.html
+++ b/src/core_plugins/kibana/public/doc/index.html
@@ -1,47 +1,74 @@
 <div ng-controller="doc" class="app-container">
+  <div class="kuiLocalNav">
+    <div class="kuiLocalNavRow">
+      <div class="kuiLocalNavRow__section">
+        <div class="kuiLocalTitle">
+          Single Document
+        </div>
+      </div>
+    </div>
+    <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+      <div class="kuiLocalTabs">
+        <div
+          class="kuiLocalTab kuiLocalTab-isSelected"
+          ng-bind-template="{{ hit._type }}#{{ hit._id | uriescape }}"
+          ng-if="!!hit"
+        ></div>
+        <div
+          class="kuiLocalTab kuiLocalTab-isSelected"
+          ng-if="!hit"
+        >Unknown Id</div>
+      </div>
+    </div>
+  </div>
 
-  <div class="container-fluid">
-    <div class="row">
-
-      <!-- no results -->
-      <div class="col-md-12" ng-if="status === 'notFound'">
-          <div class="col-md-12">
-            <h1>Failed to locate document. <i aria-hidden="true" class="fa fa-meh-o"></i></h1>
-
-            <p>
-              Unfortunately I could not find any documents matching that id, of that type, in that index. I tried really hard. I wanted it to be there. Sometimes I swear documents grow legs and just walk out of the index. Sneaky. I wish I could offer some advice here, something to make you feel better
-            </p>
-
+  <div class="kuiViewContent">
+    <!-- no results -->
+    <div class="kuiViewContentItem" ng-if="status === 'notFound'">
+      <div class="kuiInfoPanel kuiInfoPanel--error kuiVerticalRhythm">
+        <div class="kuiInfoPanelHeader">
+          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
+          <span class="kuiInfoPanelHeader__title">
+            Failed to locate document
+          </span>
+        </div>
+        <div class="kuiInfoPanelBody">
+          <div class="kuiInfoPanelBody__message">
+            Unfortunately I could not find any documents matching that id, of that type, in that index. I tried really hard. I wanted it to be there. Sometimes I swear documents grow legs and just walk out of the index. Sneaky. I wish I could offer some advice here, something to make you feel better
           </div>
+        </div>
       </div>
+    </div>
 
-            <!-- no results -->
-      <div class="col-md-12" ng-if="status === 'error'">
-          <div class="col-md-12">
-            <h1>This is bad. <i aria-hidden="true" class="fa fa-meh-o"></i></h1>
-
-            <p>
-              Oh no. Something went very wrong. Its not just that I couldn't find your document, I couldn't even try. The index was missing, or the type. Go check out Elasticsearch, something isn't quite right here.
-            </p>
-
+    <!-- error -->
+    <div class="kuiViewContentItem" ng-if="status === 'error'">
+      <div class="kuiInfoPanel kuiInfoPanel--error kuiVerticalRhythm">
+        <div class="kuiInfoPanelHeader">
+          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
+          <span class="kuiInfoPanelHeader__title">
+            Failed to execute query
+          </span>
+        </div>
+        <div class="kuiInfoPanelBody">
+          <div class="kuiInfoPanelBody__message">
+            Oh no. Something went very wrong. Its not just that I couldn't find your document, I couldn't even try. The index was missing, or the type. Go check out Elasticsearch, something isn't quite right here.
           </div>
+        </div>
       </div>
+    </div>
 
-      <!-- loading -->
-      <div class="col-md-12" ng-if="status === undefined">
-        <div class="discover-overlay">
-          <h2>Searching</h2>
-          <div class="spinner large"></div>
-          <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
+    <!-- loading -->
+    <div class="kuiViewContentItem" ng-if="status === undefined">
+      <div class="kuiPanel kuiPanel--centered">
+        <div class="kuiLoadingItems">
+          Loading&hellip;
         </div>
       </div>
+    </div>
 
-      <!-- result -->
-      <div class="col-md-12" ng-if="status === 'found'">
-        <h2><b>Doc:</b> {{hit._index}}/{{hit._type}}/{{hit._id | uriescape}}</h2>
-
-        <doc-viewer hit="hit" index-pattern="indexPattern"></doc-viewer>
-      </div>
+    <!-- result -->
+    <div class="kuiViewContentItem" ng-if="status === 'found'">
+      <doc-viewer hit="hit" index-pattern="indexPattern"></doc-viewer>
     </div>
   </div>
 </div>

From 743f8c05902f3c5462a778eac88c9fc4292b3f36 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 23 Feb 2017 08:53:52 -0800
Subject: [PATCH 043/150] [UI Framework] Add View component. Add support for
 full-screen examples. (#10454)

* Move kuiView into UI Framework. Add View example. Add support for full-screen examples.

* Organize nav items by components and sandboxes.
---
 src/ui/public/styles/base.less                | 23 --------------
 ui_framework/components/index.scss            |  1 +
 ui_framework/components/view/_index.scss      |  1 +
 ui_framework/components/view/_view.scss       | 22 +++++++++++++
 ui_framework/dist/ui_framework.css            | 22 +++++++++++++
 .../guide_code_viewer/_guide_code_viewer.scss |  2 +-
 .../src/components/guide_components.scss      |  1 +
 .../components/guide_demo/_guide_demo.scss    |  6 ++++
 .../src/components/guide_demo/guide_demo.jsx  |  8 ++---
 .../src/components/guide_nav/_guide_nav.scss  | 11 +++++++
 .../src/components/guide_nav/guide_nav.jsx    | 30 ++++++++++++++++--
 .../components/guide_page/_guide_page.scss    |  6 ++--
 .../guide_sandbox/_guide_sandbox.scss         | 10 ++++++
 .../guide_sandbox/guide_sandbox.jsx           |  7 +++++
 .../guide_sandbox_code_toggle.jsx             | 31 +++++++++++++++++++
 .../guide_sandbox_code_toggle_container.js    | 13 ++++++++
 .../guide_section/_guide_section.scss         |  1 +
 .../guide_section/guide_section.jsx           |  8 +++--
 ui_framework/doc_site/src/components/index.js |  4 +++
 .../doc_site/src/services/routes/routes.js    | 12 +++++--
 ui_framework/doc_site/src/views/_app.scss     |  6 ++--
 ui_framework/doc_site/src/views/app_view.jsx  |  3 +-
 .../doc_site/src/views/view/view_sandbox.html | 15 +++++++++
 .../doc_site/src/views/view/view_sandbox.jsx  | 26 ++++++++++++++++
 24 files changed, 227 insertions(+), 42 deletions(-)
 create mode 100644 ui_framework/components/view/_index.scss
 create mode 100644 ui_framework/components/view/_view.scss
 create mode 100644 ui_framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss
 create mode 100644 ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.jsx
 create mode 100644 ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.jsx
 create mode 100644 ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js
 create mode 100644 ui_framework/doc_site/src/views/view/view_sandbox.html
 create mode 100644 ui_framework/doc_site/src/views/view/view_sandbox.jsx

diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 843aa58fba443..c546d7a0cfc09 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -613,29 +613,6 @@ fieldset {
   font-size: 14px;
 }
 
-.kuiView {
-  background-color: #FFFFFF;
-  flex: 1 1 auto;
-}
-
-.kuiViewContent {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  width: 100%;
-}
-
-.kuiViewContent--constrainedWidth {
-  width: 100%;
-  max-width: 1100px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.kuiViewContentItem {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
 .kuiNotice {
   padding: 40px 60px 48px;
   margin: 20px;
diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss
index 870485c85adf3..11c0b1829c405 100644
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@@ -264,3 +264,4 @@ body {
 @import "tool_bar/index";
 @import "typography/index";
 @import "vertical_rhythm/index";
+@import "view/index";
diff --git a/ui_framework/components/view/_index.scss b/ui_framework/components/view/_index.scss
new file mode 100644
index 0000000000000..9cc2954055e54
--- /dev/null
+++ b/ui_framework/components/view/_index.scss
@@ -0,0 +1 @@
+@import "view";
diff --git a/ui_framework/components/view/_view.scss b/ui_framework/components/view/_view.scss
new file mode 100644
index 0000000000000..1771b78b01cc9
--- /dev/null
+++ b/ui_framework/components/view/_view.scss
@@ -0,0 +1,22 @@
+.kuiView {
+  background-color: #FFFFFF;
+  flex: 1 1 auto;
+}
+
+.kuiViewContent {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  width: 100%;
+}
+
+.kuiViewContent--constrainedWidth {
+  width: 100%;
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.kuiViewContentItem {
+  padding-left: 20px;
+  padding-right: 20px;
+}
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index a6a3667f7fc10..269539121a53e 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1776,3 +1776,25 @@ body {
 
 .kuiVerticalRhythm + .kuiVerticalRhythm {
   margin-top: 10px; }
+
+.kuiView {
+  background-color: #FFFFFF;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto; }
+
+.kuiViewContent {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  width: 100%; }
+
+.kuiViewContent--constrainedWidth {
+  width: 100%;
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto; }
+
+.kuiViewContentItem {
+  padding-left: 20px;
+  padding-right: 20px; }
diff --git a/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
index 65511fa561ed5..e8e10dc1876c5 100644
--- a/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
+++ b/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
@@ -4,7 +4,7 @@
   right: 0;
   bottom: 0;
   width: $guideCodeViewerWidth;
-  padding: 40px 20px 40px 0;
+  padding: 40px 20px;
   background-color: white;
   transform: translateX($guideCodeViewerWidth);
   transition: transform $guideCodeViewerTransition;
diff --git a/ui_framework/doc_site/src/components/guide_components.scss b/ui_framework/doc_site/src/components/guide_components.scss
index 5650bee7369f2..816241a05f5fa 100644
--- a/ui_framework/doc_site/src/components/guide_components.scss
+++ b/ui_framework/doc_site/src/components/guide_components.scss
@@ -7,5 +7,6 @@ $guideVerticalRhythm: 20px;
 @import "guide_nav/guide_nav";
 @import "guide_page/guide_page";
 @import "guide_page_side_nav/guide_page_side_nav";
+@import "guide_sandbox/guide_sandbox";
 @import "guide_section/guide_section";
 @import "guide_text/guide_text";
diff --git a/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss b/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss
index be542fe311b61..d387ae75a6c36 100644
--- a/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss
+++ b/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss
@@ -1,3 +1,9 @@
 .guideDemo {
   margin-top: $guideVerticalRhythm;
 }
+
+.guideDemo--fullScreen {
+  width: 100%;
+  height: 100%;
+  margin-top: 0;
+}
diff --git a/ui_framework/doc_site/src/components/guide_demo/guide_demo.jsx b/ui_framework/doc_site/src/components/guide_demo/guide_demo.jsx
index 30ee411111d77..1d48e57a9b1ee 100644
--- a/ui_framework/doc_site/src/components/guide_demo/guide_demo.jsx
+++ b/ui_framework/doc_site/src/components/guide_demo/guide_demo.jsx
@@ -32,14 +32,12 @@ export class GuideDemo extends Component {
 
   render() {
     const classes = classNames('guideDemo', {
+      'guideDemo--fullScreen': this.props.isFullScreen,
       'theme-dark': this.props.isDarkTheme,
     });
 
     return (
-      <div className={classes}>
-        <div
-          ref={c => (this.content = c)}
-        />
+      <div className={classes} ref={c => (this.content = c)}>
       </div>
     );
   }
@@ -49,6 +47,7 @@ GuideDemo.propTypes = {
   js: PropTypes.string.isRequired,
   html: PropTypes.string.isRequired,
   css: PropTypes.string.isRequired,
+  isFullScreen: PropTypes.bool.isRequired,
   isDarkTheme: PropTypes.bool.isRequired,
 };
 
@@ -56,5 +55,6 @@ GuideDemo.defaultProps = {
   js: '',
   html: '',
   css: '',
+  isFullScreen: false,
   isDarkTheme: false,
 };
diff --git a/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss b/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
index da314e75cdfa5..b36f3e217ad49 100644
--- a/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
+++ b/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
@@ -72,12 +72,23 @@
   align-content: flex-start;
 }
 
+.guideNavSectionTitle {
+  min-width: 200px;
+  padding: 8px 20px;
+  margin-left: 5px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+}
+
 .guideNavItem {
+  min-width: 200px;
   color: white;
   text-decoration: none;
   font-size: 20px;
   line-height: 20px;
   padding: 8px 20px;
+  margin-left: 5px;
   border-radius: 3px;
 
   &:hover {
diff --git a/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx b/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
index 3c3212e909915..bf3c29d013400 100644
--- a/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
+++ b/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
@@ -17,7 +17,20 @@ export const GuideNav = props => {
     'is-menu-button-pinned': props.isNavOpen,
   });
 
-  const navItems = props.items.map((item, index) => {
+  const componentNavItems = props.components.map((item, index) => {
+    return (
+      <Link
+        key={index}
+        className="guideNavItem"
+        to={item.path}
+        onClick={props.onClickNavItem}
+      >
+        {item.name}
+      </Link>
+    );
+  });
+
+  const sandboxNavItems = props.sandboxes.map((item, index) => {
     return (
       <Link
         key={index}
@@ -48,7 +61,17 @@ export const GuideNav = props => {
 
       <div className="guideNavItemsContainer">
         <div className="guideNavItems">
-          {navItems}
+          <div className="guideNavSectionTitle">
+            Components
+          </div>
+
+          {componentNavItems}
+
+          <div className="guideNavSectionTitle">
+            Sandboxes
+          </div>
+
+          {sandboxNavItems}
         </div>
       </div>
     </div>
@@ -60,6 +83,7 @@ GuideNav.propTypes = {
   onToggleNav: PropTypes.func,
   onClickNavItem: PropTypes.func,
   version: PropTypes.string,
-  items: PropTypes.array,
+  components: PropTypes.array,
+  sandboxes: PropTypes.array,
 };
 
diff --git a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss
index 2e7bc596a0ed3..258ac521f9071 100644
--- a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss
+++ b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss
@@ -6,10 +6,12 @@
 }
 
 .guidePageBody {
+  $topPadding: 40px;
+
   flex: 1 1 auto;
-  padding: 0 80px 0 120px + $guideSideNavWidth;
+  padding: $topPadding 80px 0 120px + $guideSideNavWidth;
 
   @include whenNarrowerThan($normalBreakpoint) {
-    padding: 0 20px 0 20px + $guideSideNavSmallWidth;
+    padding: $topPadding 20px 0 20px + $guideSideNavSmallWidth;
   }
 }
diff --git a/ui_framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss b/ui_framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss
new file mode 100644
index 0000000000000..9a13abd7e8e6e
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss
@@ -0,0 +1,10 @@
+.guideSandbox {
+  width: 100%;
+  height: 100%;
+}
+
+.guideSandboxCodeToggle {
+  position: fixed;
+  top: 70px;
+  right: 10px;
+}
diff --git a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.jsx b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.jsx
new file mode 100644
index 0000000000000..b1cfdc8276c7c
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const GuideSandbox = props => (
+  <div className="guideSandbox">
+    {props.children}
+  </div>
+);
diff --git a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.jsx b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.jsx
new file mode 100644
index 0000000000000..a9bc023b934b1
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.jsx
@@ -0,0 +1,31 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+export class GuideSandboxCodeToggle extends Component {
+  constructor(props) {
+    super(props);
+    this.onClickSource = this.onClickSource.bind(this);
+  }
+
+  onClickSource() {
+    this.props.openCodeViewer(this.props.source);
+  }
+
+  render() {
+    return (
+      <button
+        className="guideSandboxCodeToggle guideSection__sourceButton"
+        onClick={this.onClickSource}
+      >
+        <span className="fa fa-code"></span>
+      </button>
+    );
+  }
+}
+
+GuideSandboxCodeToggle.propTypes = {
+  source: PropTypes.array,
+  openCodeViewer: PropTypes.func,
+};
diff --git a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js
new file mode 100644
index 0000000000000..8a2a5475ae665
--- /dev/null
+++ b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+
+import { GuideSandboxCodeToggle } from './guide_sandbox_code_toggle.jsx';
+import {
+  openCodeViewer,
+} from '../../actions';
+
+export const GuideSandboxCodeToggleContainer = connect(
+  null,
+  {
+    openCodeViewer,
+  },
+)(GuideSandboxCodeToggle);
diff --git a/ui_framework/doc_site/src/components/guide_section/_guide_section.scss b/ui_framework/doc_site/src/components/guide_section/_guide_section.scss
index 5a56f594d4b66..b574a8a71bb18 100644
--- a/ui_framework/doc_site/src/components/guide_section/_guide_section.scss
+++ b/ui_framework/doc_site/src/components/guide_section/_guide_section.scss
@@ -20,6 +20,7 @@
   }
 
   .guideSection__sourceButton {
+    border: none;
     line-height: 10px;
     padding: 4px 10px;
     background-color: #19a8e0;
diff --git a/ui_framework/doc_site/src/components/guide_section/guide_section.jsx b/ui_framework/doc_site/src/components/guide_section/guide_section.jsx
index e5ea51b3a344e..2a1561f61e610 100644
--- a/ui_framework/doc_site/src/components/guide_section/guide_section.jsx
+++ b/ui_framework/doc_site/src/components/guide_section/guide_section.jsx
@@ -37,10 +37,12 @@ export class GuideSection extends Component {
           <div className="guideSection__title">
             {this.props.title}
           </div>
-          <div
-            className="guideSection__sourceButton fa fa-code"
+          <button
+            className="guideSection__sourceButton"
             onClick={this.onClickSource}
-          />
+          >
+            <span className="fa fa-code"></span>
+          </button>
         </div>
 
         {this.props.children}
diff --git a/ui_framework/doc_site/src/components/index.js b/ui_framework/doc_site/src/components/index.js
index ee0da8682fba9..5e709f8d8c14f 100644
--- a/ui_framework/doc_site/src/components/index.js
+++ b/ui_framework/doc_site/src/components/index.js
@@ -6,6 +6,10 @@ export { GuideNav } from './guide_nav/guide_nav.jsx';
 export { GuidePageContainer as GuidePage } from './guide_page/guide_page_container';
 export { GuidePageSideNav } from './guide_page_side_nav/guide_page_side_nav.jsx';
 export { GuidePageSideNavItem } from './guide_page_side_nav/guide_page_side_nav_item.jsx';
+export { GuideSandbox } from './guide_sandbox/guide_sandbox.jsx';
+export {
+  GuideSandboxCodeToggleContainer as GuideSandboxCodeToggle
+} from './guide_sandbox/guide_sandbox_code_toggle_container';
 export { GuideSectionContainer as GuideSection } from './guide_section/guide_section_container';
 export { GuideSectionTypes } from './guide_section/guide_section_types';
 export { GuideText } from './guide_text/guide_text.jsx';
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index 1797e68093174..750a804f56a5f 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -63,6 +63,9 @@ import TypographyExample
 import VerticalRhythmExample
   from '../../views/vertical_rhythm/vertical_rhythm_example.jsx';
 
+import ViewSandbox
+  from '../../views/view/view_sandbox.jsx';
+
 // Component route names should match the component name exactly.
 const components = [{
   name: 'ActionItem',
@@ -129,10 +132,15 @@ const components = [{
   component: VerticalRhythmExample,
 }];
 
+const sandboxes = [{
+  name: 'View',
+  component: ViewSandbox,
+}];
+
 export default {
   components: Slugify.each(components, 'name', 'path'),
+  sandboxes: Slugify.each(sandboxes, 'name', 'path'),
   getAppRoutes: function getAppRoutes() {
-    const list = this.components;
-    return list.slice(0);
+    return this.components.concat(this.sandboxes);
   },
 };
diff --git a/ui_framework/doc_site/src/views/_app.scss b/ui_framework/doc_site/src/views/_app.scss
index 380f76d700447..381ed4fd41453 100644
--- a/ui_framework/doc_site/src/views/_app.scss
+++ b/ui_framework/doc_site/src/views/_app.scss
@@ -9,14 +9,14 @@
 
 .guideContent {
   flex: 1 1 auto;
-  padding-top: 100px;
+  padding-top: $guideNavHeight;
   transition: padding-right $guideCodeViewerTransition;
 
   &.is-code-viewer-open {
-    padding-right: $guideCodeViewerWidth;
+    padding-right: $guideCodeViewerWidth - 20px;
 
     @include whenNarrowerThan($normalBreakpoint) {
-      padding-right: $guideCodeViewerSmallWidth;
+      padding-right: $guideCodeViewerSmallWidth - 20px;
     }
   }
 }
diff --git a/ui_framework/doc_site/src/views/app_view.jsx b/ui_framework/doc_site/src/views/app_view.jsx
index 93890202b16b0..b14366e51f23e 100644
--- a/ui_framework/doc_site/src/views/app_view.jsx
+++ b/ui_framework/doc_site/src/views/app_view.jsx
@@ -58,7 +58,8 @@ export class AppView extends Component {
           onToggleNav={this.onToggleNav}
           onClickNavItem={this.onClickNavItem}
           version={pkg.version}
-          items={Routes.components}
+          components={Routes.components}
+          sandboxes={Routes.sandboxes}
         />
 
         <div className={contentClasses}>
diff --git a/ui_framework/doc_site/src/views/view/view_sandbox.html b/ui_framework/doc_site/src/views/view/view_sandbox.html
new file mode 100644
index 0000000000000..1178db911f3c4
--- /dev/null
+++ b/ui_framework/doc_site/src/views/view/view_sandbox.html
@@ -0,0 +1,15 @@
+<div
+  class="kuiView"
+  style="background-color: pink"
+>
+  <!-- Constrained width, centered content -->
+  <div
+    class="kuiViewContent kuiViewContent--constrainedWidth"
+    style="background-color: white"
+  >
+    <div class="kuiViewContentItem">
+      View content with constrained width (background colors
+      for demonstration purposes only)
+    </div>
+  </div>
+</div>
diff --git a/ui_framework/doc_site/src/views/view/view_sandbox.jsx b/ui_framework/doc_site/src/views/view/view_sandbox.jsx
new file mode 100644
index 0000000000000..8f2cb06bfc009
--- /dev/null
+++ b/ui_framework/doc_site/src/views/view/view_sandbox.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  GuideDemo,
+  GuideSandbox,
+  GuideSandboxCodeToggle,
+  GuideSectionTypes,
+} from '../../components';
+
+const html = require('./view_sandbox.html');
+
+export default props => (
+  <GuideSandbox>
+    <GuideDemo
+      isFullScreen={true}
+      html={html}
+    />
+
+    <GuideSandboxCodeToggle
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: html,
+      }]}
+    />
+  </GuideSandbox>
+);

From e19802317c579e76cd050b365e6dd04b47b0e62e Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Thu, 23 Feb 2017 12:12:49 -0500
Subject: [PATCH 044/150] Bring back appStatus.dirty - it was part of the
 public plugin API (#10534)

---
 src/core_plugins/kibana/public/dashboard/dashboard.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js
index e441bfb96b897..fd5175c303c9a 100644
--- a/src/core_plugins/kibana/public/dashboard/dashboard.js
+++ b/src/core_plugins/kibana/public/dashboard/dashboard.js
@@ -74,6 +74,14 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         quickRanges,
         AppState);
 
+      // Part of the exposed plugin API - do not remove without careful consideration.
+      this.appStatus = {
+        dirty: !dash.id
+      };
+      dashboardState.stateMonitor.onChange(status => {
+        this.appStatus.dirty = status.dirty || !dash.id;
+      });
+
       dashboardState.updateFilters(queryFilter);
       let pendingVisCount = _.size(dashboardState.getPanels());
 

From 864a2fb9e460c995e474a8611ce178fdf1577c94 Mon Sep 17 00:00:00 2001
From: Joe Fleming <w33ble@users.noreply.github.com>
Date: Thu, 23 Feb 2017 10:36:03 -0700
Subject: [PATCH 045/150] Show warning when importing a missing type (#10521)

* show warning when importing a missing type

* remove template string concatenation
---
 .../management/sections/objects/_objects.js   | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.js b/src/core_plugins/kibana/public/management/sections/objects/_objects.js
index 544ed3574eeb8..c7f02f0f5e8f6 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/_objects.js
+++ b/src/core_plugins/kibana/public/management/sections/objects/_objects.js
@@ -169,8 +169,20 @@ uiModules.get('apps/management')
           notify.error('The file could not be processed.');
         }
 
-        return Promise.map(docs, function (doc) {
-          const service = find($scope.services, { type: doc._type }).service;
+        return Promise.map(docs, (doc) => {
+          const { service } = find($scope.services, { type: doc._type }) || {};
+
+          if (!service) {
+            const msg = `Skipped import of "${doc._source.title}" (${doc._id})`;
+            const reason = `Invalid type: "${doc._type}"`;
+
+            notify.warning(`${msg}, ${reason}`, {
+              lifetime: 0,
+            });
+
+            return;
+          }
+
           return service.get().then(function (obj) {
             obj.id = doc._id;
             return obj.applyESResp(doc).then(function () {
@@ -179,7 +191,8 @@ uiModules.get('apps/management')
           });
         })
         .then(refreshIndex)
-        .then(refreshData, notify.error);
+        .then(refreshData)
+        .catch(notify.error);
       };
 
       function refreshIndex() {

From dd640d7c99cdf47b522f2da415b6015bb45d4a25 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 23 Feb 2017 11:38:44 -0800
Subject: [PATCH 046/150] Add EventsSandbox and HeaderBarSandbox examples.
 (#10544)

[UI Framework] Add EventsSandbox and HeaderBarSandbox examples.
---
 .../doc_site/src/services/routes/routes.js    |  12 +
 .../src/views/event/events_sandbox.html       |  78 ++++++
 .../src/views/event/events_sandbox.jsx        |  26 ++
 .../views/header_bar/header_bar_sandbox.html  | 230 ++++++++++++++++++
 .../views/header_bar/header_bar_sandbox.jsx   |  26 ++
 5 files changed, 372 insertions(+)
 create mode 100644 ui_framework/doc_site/src/views/event/events_sandbox.html
 create mode 100644 ui_framework/doc_site/src/views/event/events_sandbox.jsx
 create mode 100644 ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.html
 create mode 100644 ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.jsx

diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index 750a804f56a5f..b4fdcb0a35323 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -12,12 +12,18 @@ import ButtonExample
 import EventExample
   from '../../views/event/event_example.jsx';
 
+import EventsSandbox
+  from '../../views/event/events_sandbox.jsx';
+
 import FormExample
   from '../../views/form/form_example.jsx';
 
 import HeaderBarExample
   from '../../views/header_bar/header_bar_example.jsx';
 
+import HeaderBarSandbox
+  from '../../views/header_bar/header_bar_sandbox.jsx';
+
 import IconExample
   from '../../views/icon/icon_example.jsx';
 
@@ -133,6 +139,12 @@ const components = [{
 }];
 
 const sandboxes = [{
+  name: 'Events',
+  component: EventsSandbox,
+}, {
+  name: 'HeaderBar with Table',
+  component: HeaderBarSandbox,
+}, {
   name: 'View',
   component: ViewSandbox,
 }];
diff --git a/ui_framework/doc_site/src/views/event/events_sandbox.html b/ui_framework/doc_site/src/views/event/events_sandbox.html
new file mode 100644
index 0000000000000..22b7eb68d6360
--- /dev/null
+++ b/ui_framework/doc_site/src/views/event/events_sandbox.html
@@ -0,0 +1,78 @@
+<div class="kuiView">
+  <!-- Constrained width, centered content -->
+  <div class="kuiViewContent kuiViewContent--constrainedWidth">
+    <div class="kuiViewContentItem">
+
+      <div class="kuiHeaderBar">
+        <div class="kuiHeaderBarSection">
+          <h2 class="kuiSubTitle">
+            Cluster of Almonds
+          </h2>
+        </div>
+
+        <div class="kuiHeaderBarSection">
+          <div class="kuiText">
+            <a class="kuiLink" href="#">View all 21 almonds</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="kuiMenu kuiVerticalRhythm">
+        <div class="kuiMenuItem">
+          <div class="kuiEvent">
+            <div class="kuiEventSymbol">
+              <span class="kuiIcon kuiIcon--info fa-info"></span>
+            </div>
+
+            <div class="kuiEventBody">
+              <div class="kuiEventBody__message">
+                margarine_masher_toad sitting of 1 is less than opossum of 2
+              </div>
+
+              <div class="kuiEventBody__metadata">
+                August 4, 2021 02:23:28
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="kuiMenuItem">
+          <div class="kuiEvent">
+            <div class="kuiEventSymbol">
+              <span class="kuiIcon kuiIcon--error fa-warning"></span>
+            </div>
+
+            <div class="kuiEventBody">
+              <div class="kuiEventBody__message">
+                Cluster stork is red because 17 pillory stars are unenamored
+              </div>
+
+              <div class="kuiEventBody__metadata">
+                August 3, 2021 12:00:54
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="kuiMenuItem">
+          <div class="kuiEvent">
+            <div class="kuiEventSymbol">
+              <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
+            </div>
+
+            <div class="kuiEventBody">
+              <div class="kuiEventBody__message">
+                Elastic band nematode vision marshmallow directed: 50,100
+              </div>
+
+              <div class="kuiEventBody__metadata">
+                July 27, 2021 11:20:09
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
diff --git a/ui_framework/doc_site/src/views/event/events_sandbox.jsx b/ui_framework/doc_site/src/views/event/events_sandbox.jsx
new file mode 100644
index 0000000000000..6861810ec0b56
--- /dev/null
+++ b/ui_framework/doc_site/src/views/event/events_sandbox.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  GuideDemo,
+  GuideSandbox,
+  GuideSandboxCodeToggle,
+  GuideSectionTypes,
+} from '../../components';
+
+const html = require('./events_sandbox.html');
+
+export default props => (
+  <GuideSandbox>
+    <GuideDemo
+      isFullScreen={true}
+      html={html}
+    />
+
+    <GuideSandboxCodeToggle
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: html,
+      }]}
+    />
+  </GuideSandbox>
+);
diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.html b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.html
new file mode 100644
index 0000000000000..378f4c9eca590
--- /dev/null
+++ b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.html
@@ -0,0 +1,230 @@
+<div class="kuiView">
+  <!-- Constrained width, centered content -->
+  <div class="kuiViewContent kuiViewContent--constrainedWidth">
+    <div class="kuiViewContentItem">
+      <div class="kuiHeaderBar kuiVerticalRhythm">
+        <div class="kuiHeaderBarSection">
+          <h2 class="kuiSubTitle">
+            Elysium stork
+          </h2>
+        </div>
+
+        <div class="kuiHeaderBarSection">
+          <span class="kuiText">
+            <span class="kuiStatusText kuiStatusText--error">
+              <span class="kuiStatusText__icon kuiIcon fa-warning"></span>
+              Rope Hoth
+            </span>
+          </span>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <div class="kuiControlledTable kuiVerticalRhythm">
+        <!-- ToolBar -->
+        <div class="kuiToolBar">
+          <div class="kuiToolBarSearch">
+            <div class="kuiToolBarSearchBox">
+              <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
+              <input
+                class="kuiToolBarSearchBox__input"
+                type="text"
+                placeholder="Search..."
+              >
+            </div>
+          </div>
+
+          <div class="kuiToolBarSection">
+            <button class="kuiButton kuiButton--primary">
+              Add
+            </button>
+
+            <button class="kuiButton kuiButton--basic kuiButton--icon">
+              <span class="kuiButton__icon kuiIcon fa-gear"></span>
+            </button>
+
+            <button class="kuiButton kuiButton--basic kuiButton--icon">
+              <span class="kuiButton__icon kuiIcon fa-bars"></span>
+            </button>
+          </div>
+
+          <div class="kuiToolBarSection">
+            <div class="kuiToolBarText">
+              1 &ndash; 20 of 33
+            </div>
+
+            <div class="kuiButtonGroup kuiButtonGroup--united">
+              <button class="kuiButton kuiButton--basic kuiButton--icon">
+                <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+              </button>
+              <button class="kuiButton kuiButton--basic kuiButton--icon">
+                <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Table -->
+        <table class="kuiTable">
+          <thead>
+            <tr>
+              <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
+                <input type="checkbox" class="kuiCheckBox">
+              </th>
+              <th class="kuiTableHeaderCell">
+                Title
+              </th>
+              <th class="kuiTableHeaderCell">
+                Status
+              </th>
+              <th class="kuiTableHeaderCell">
+                Date created
+              </th>
+              <th class="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
+                Orders of magnitude
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr class="kuiTableRow">
+              <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+                <div class="kuiTableRowCell__liner">
+                  <input type="checkbox" class="kuiCheckBox">
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  <a class="kuiLink" href="#">Alligator</a>
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  <div class="kuiIcon kuiIcon--success fa-check"></div>
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+                </div>
+              </td>
+              <td class="kuiTableRowCell kuiTableRowCell--alignRight">
+                <div class="kuiTableRowCell__liner">
+                  1
+                </div>
+              </td>
+            </tr>
+
+            <tr class="kuiTableRow">
+              <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+                <div class="kuiTableRowCell__liner">
+                  <input type="checkbox" class="kuiCheckBox">
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  <a class="kuiLink" href="#">Boomerang</a>
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  <div class="kuiIcon kuiIcon--success fa-check"></div>
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+                </div>
+              </td>
+              <td class="kuiTableRowCell kuiTableRowCell--alignRight">
+                <div class="kuiTableRowCell__liner">
+                  10
+                </div>
+              </td>
+            </tr>
+
+            <tr class="kuiTableRow">
+              <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+                <div class="kuiTableRowCell__liner">
+                  <input type="checkbox" class="kuiCheckBox">
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  <a class="kuiLink" href="#">Celebration</a>
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  <div class="kuiIcon kuiIcon--warning fa-bolt"></div>
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+                </div>
+              </td>
+              <td class="kuiTableRowCell kuiTableRowCell--alignRight">
+                <div class="kuiTableRowCell__liner">
+                  100
+                </div>
+              </td>
+            </tr>
+
+            <tr class="kuiTableRow">
+              <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+                <div class="kuiTableRowCell__liner">
+                  <input type="checkbox" class="kuiCheckBox">
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  <a class="kuiLink" href="#">Dog</a>
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  <div class="kuiIcon kuiIcon--error fa-warning"></div>
+                </div>
+              </td>
+              <td class="kuiTableRowCell">
+                <div class="kuiTableRowCell__liner">
+                  Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+                </div>
+              </td>
+              <td class="kuiTableRowCell kuiTableRowCell--alignRight">
+                <div class="kuiTableRowCell__liner">
+                  1000
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- ToolBarFooter -->
+        <div class="kuiToolBarFooter">
+          <div class="kuiToolBarFooterSection">
+            <div class="kuiToolBarText">
+              5 Items selected
+            </div>
+          </div>
+
+          <div class="kuiToolBarFooterSection">
+            <div class="kuiToolBarText">
+              1 &ndash; 20 of 33
+            </div>
+
+            <div class="kuiButtonGroup kuiButtonGroup--united">
+              <button class="kuiButton kuiButton--basic kuiButton--icon">
+                <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+              </button>
+              <button class="kuiButton kuiButton--basic kuiButton--icon">
+                <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.jsx b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.jsx
new file mode 100644
index 0000000000000..6b9571503f644
--- /dev/null
+++ b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  GuideDemo,
+  GuideSandbox,
+  GuideSandboxCodeToggle,
+  GuideSectionTypes,
+} from '../../components';
+
+const html = require('./header_bar_sandbox.html');
+
+export default props => (
+  <GuideSandbox>
+    <GuideDemo
+      isFullScreen={true}
+      html={html}
+    />
+
+    <GuideSandboxCodeToggle
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: html,
+      }]}
+    />
+  </GuideSandbox>
+);

From 1cf8277e1b8e50c6773fbf5faa62858ca2b8bf12 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 23 Feb 2017 12:34:59 -0800
Subject: [PATCH 047/150] Add Fluid Table component. (#10516)

---
 ui_framework/components/table/_table.scss     | 12 ++++
 ui_framework/dist/ui_framework.css            | 11 ++++
 .../doc_site/src/views/table/fluid_table.html | 65 +++++++++++++++++++
 .../src/views/table/table_example.jsx         | 18 +++++
 4 files changed, 106 insertions(+)
 create mode 100644 ui_framework/doc_site/src/views/table/fluid_table.html

diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
index 52421ab28adbd..2cfee9ef39a81 100644
--- a/ui_framework/components/table/_table.scss
+++ b/ui_framework/components/table/_table.scss
@@ -25,6 +25,18 @@ $tableCellPadding: 7px 8px 8px;
   background-color: #FFFFFF;
 }
 
+/**
+ * 1. Allow contents of cells to determine table's width.
+ */
+.kuiTable--fluid {
+  width: auto; /* 1 */
+
+  .kuiTableHeaderCell,
+  .kuiTableRowCell {
+    max-width: none; /* 1 */
+  }
+}
+
 .kuiTableHeaderCell {
   @include tableCell;
   padding: $tableCellPadding;
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 269539121a53e..6d0753efa4090 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1375,6 +1375,17 @@ body {
   border-collapse: collapse;
   background-color: #FFFFFF; }
 
+/**
+ * 1. Allow contents of cells to determine table's width.
+ */
+.kuiTable--fluid {
+  width: auto;
+  /* 1 */ }
+  .kuiTable--fluid .kuiTableHeaderCell,
+  .kuiTable--fluid .kuiTableRowCell {
+    max-width: none;
+    /* 1 */ }
+
 .kuiTableHeaderCell {
   font-size: 14px;
   font-weight: 400;
diff --git a/ui_framework/doc_site/src/views/table/fluid_table.html b/ui_framework/doc_site/src/views/table/fluid_table.html
new file mode 100644
index 0000000000000..8285ae344cb7e
--- /dev/null
+++ b/ui_framework/doc_site/src/views/table/fluid_table.html
@@ -0,0 +1,65 @@
+<table class="kuiTable kuiTable--fluid">
+  <thead>
+    <tr>
+      <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
+        System
+      </th>
+      <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
+        Action
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr class="kuiTableRow">
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Cryogenics
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          <select class="kuiSelect">
+            <option selected>On</option>
+            <option>Off</option>
+            <option>Self-destruct</option>
+          </select>
+        </div>
+      </td>
+    </tr>
+
+    <tr class="kuiTableRow">
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Propellant
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          <select class="kuiSelect">
+            <option selected>On</option>
+            <option>Off</option>
+            <option>Self-destruct</option>
+          </select>
+        </div>
+      </td>
+    </tr>
+
+    <tr class="kuiTableRow">
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Rockets
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          <select class="kuiSelect">
+            <option>On</option>
+            <option selected>Off</option>
+            <option>Self-destruct</option>
+          </select>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/ui_framework/doc_site/src/views/table/table_example.jsx b/ui_framework/doc_site/src/views/table/table_example.jsx
index fb965d03ebff6..8164777c4fd7c 100644
--- a/ui_framework/doc_site/src/views/table/table_example.jsx
+++ b/ui_framework/doc_site/src/views/table/table_example.jsx
@@ -9,10 +9,12 @@ import {
   GuidePage,
   GuideSection,
   GuideSectionTypes,
+  GuideText,
 } from '../../components';
 
 const tableHtml = require('./table.html');
 const tableJs = require('raw!./table.js');
+const fluidTableHtml = require('./fluid_table.html');
 const controlledTableHtml = require('./controlled_table.html');
 const controlledTableWithLoadingItemsHtml = require('./controlled_table_loading_items.html');
 const controlledTableWithNoItemsHtml = require('./controlled_table_no_items.html');
@@ -36,6 +38,22 @@ export default props => (
       />
     </GuideSection>
 
+    <GuideSection
+      title="Fluid Table"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: fluidTableHtml,
+      }]}
+    >
+      <GuideText>
+        For when you want the content of a table&rsquo;s cells to determine its width.
+      </GuideText>
+
+      <GuideDemo
+        html={fluidTableHtml}
+      />
+    </GuideSection>
+
     <GuideSection
       title="ControlledTable"
       source={[{

From 76d1a463b805992597adc400b41a3c568a60db8a Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 23 Feb 2017 15:19:14 -0800
Subject: [PATCH 048/150] Add example of Table with MenuButtons. (#10554)

---
 .../menu_button/_menu_button_group.scss       |  4 +
 ui_framework/components/table/_table.scss     |  4 -
 ui_framework/dist/ui_framework.css            | 10 +-
 .../doc_site/src/views/table/fluid_table.html |  4 +-
 .../src/views/table/table_example.jsx         | 13 +++
 .../views/table/table_with_menu_buttons.html  | 99 +++++++++++++++++++
 6 files changed, 124 insertions(+), 10 deletions(-)
 create mode 100644 ui_framework/doc_site/src/views/table/table_with_menu_buttons.html

diff --git a/ui_framework/components/menu_button/_menu_button_group.scss b/ui_framework/components/menu_button/_menu_button_group.scss
index c3aecb5ef5e37..e8a53967e8b3a 100644
--- a/ui_framework/components/menu_button/_menu_button_group.scss
+++ b/ui_framework/components/menu_button/_menu_button_group.scss
@@ -5,3 +5,7 @@
     margin-left: 4px;
   }
 }
+
+.kuiMenuButtonGroup--alignRight {
+  justify-content: flex-end;
+}
diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
index 2cfee9ef39a81..42ed81c169f66 100644
--- a/ui_framework/components/table/_table.scss
+++ b/ui_framework/components/table/_table.scss
@@ -8,10 +8,6 @@ $tableCellPadding: 7px 8px 8px;
   font-weight: 400;
   text-align: left;
   max-width: 20px; /* 1 */
-
-  &:last-child {
-    padding-right: 16px;
-  }
 }
 
 /**
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 6d0753efa4090..c687f47c13f90 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1121,6 +1121,12 @@ body {
   .kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton {
     margin-left: 4px; }
 
+.kuiMenuButtonGroup--alignRight {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+          justify-content: flex-end; }
+
 .kuiMicroButton {
   display: inline-block;
   /* 1 */
@@ -1395,8 +1401,6 @@ body {
   padding: 7px 8px 8px;
   line-height: 1.5;
   color: #a7a7a7; }
-  .kuiTableHeaderCell:last-child {
-    padding-right: 16px; }
 
 /**
  * 1. Prevent rapid clicking from selecting text.
@@ -1431,8 +1435,6 @@ body {
   /* 1 */
   color: #191E23;
   border-top: 1px solid #E4E4E4; }
-  .kuiTableRowCell:last-child {
-    padding-right: 16px; }
 
 /**
    * 1. Vertically align all children.
diff --git a/ui_framework/doc_site/src/views/table/fluid_table.html b/ui_framework/doc_site/src/views/table/fluid_table.html
index 8285ae344cb7e..2ae844ee8907e 100644
--- a/ui_framework/doc_site/src/views/table/fluid_table.html
+++ b/ui_framework/doc_site/src/views/table/fluid_table.html
@@ -1,10 +1,10 @@
 <table class="kuiTable kuiTable--fluid">
   <thead>
     <tr>
-      <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
+      <th class="kuiTableHeaderCell">
         System
       </th>
-      <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
+      <th class="kuiTableHeaderCell">
         Action
       </th>
     </tr>
diff --git a/ui_framework/doc_site/src/views/table/table_example.jsx b/ui_framework/doc_site/src/views/table/table_example.jsx
index 8164777c4fd7c..c2e0c3fa0a208 100644
--- a/ui_framework/doc_site/src/views/table/table_example.jsx
+++ b/ui_framework/doc_site/src/views/table/table_example.jsx
@@ -15,6 +15,7 @@ import {
 const tableHtml = require('./table.html');
 const tableJs = require('raw!./table.js');
 const fluidTableHtml = require('./fluid_table.html');
+const tableWithMenuButtonsHtml = require('./table_with_menu_buttons.html');
 const controlledTableHtml = require('./controlled_table.html');
 const controlledTableWithLoadingItemsHtml = require('./controlled_table_loading_items.html');
 const controlledTableWithNoItemsHtml = require('./controlled_table_no_items.html');
@@ -54,6 +55,18 @@ export default props => (
       />
     </GuideSection>
 
+    <GuideSection
+      title="Table with MenuButtons"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: tableWithMenuButtonsHtml,
+      }]}
+    >
+      <GuideDemo
+        html={tableWithMenuButtonsHtml}
+      />
+    </GuideSection>
+
     <GuideSection
       title="ControlledTable"
       source={[{
diff --git a/ui_framework/doc_site/src/views/table/table_with_menu_buttons.html b/ui_framework/doc_site/src/views/table/table_with_menu_buttons.html
new file mode 100644
index 0000000000000..3af5f9bb35ae6
--- /dev/null
+++ b/ui_framework/doc_site/src/views/table/table_with_menu_buttons.html
@@ -0,0 +1,99 @@
+<table class="kuiTable">
+  <thead>
+    <tr>
+      <th class="kuiTableHeaderCell">
+        Reminder
+      </th>
+      <th class="kuiTableHeaderCell">
+        A
+      </th>
+      <th class="kuiTableHeaderCell">
+        B
+      </th>
+      <th class="kuiTableHeaderCell">
+        C
+      </th>
+      <th class="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
+        Actions
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr class="kuiTableRow">
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Core temperature critical
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          A
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          B
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          C
+        </div>
+      </td>
+      <td class="kuiTableRowCell kuiTableRowCell--alignRight">
+        <div class="kuiTableRowCell__liner">
+          <div class="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
+            <button class="kuiMenuButton kuiMenuButton--basic">
+              Acknowledge
+            </button>
+            <button class="kuiMenuButton kuiMenuButton--basic">
+              Silence
+            </button>
+            <button class="kuiMenuButton kuiMenuButton--danger">
+              Delete
+            </button>
+          </div>
+        </div>
+      </td>
+    </tr>
+
+    <tr class="kuiTableRow">
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Time for your snack
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          A
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          B
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          C
+        </div>
+      </td>
+      <td class="kuiTableRowCell kuiTableRowCell--alignRight">
+        <div class="kuiTableRowCell__liner">
+          <div class="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
+            <button class="kuiMenuButton kuiMenuButton--basic">
+              Acknowledge
+            </button>
+            <button class="kuiMenuButton kuiMenuButton--basic">
+              Silence
+            </button>
+            <button class="kuiMenuButton kuiMenuButton--danger">
+              Delete
+            </button>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>

From 92d9e470bbf9be116bbd8d5eea353e55f028f0fd Mon Sep 17 00:00:00 2001
From: Toby McLaughlin <toby@jarpy.net>
Date: Fri, 24 Feb 2017 12:52:47 +1100
Subject: [PATCH 049/150] Document Monitoring settings under Docker (#10497)

---
 docs/setup/docker.asciidoc | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/setup/docker.asciidoc b/docs/setup/docker.asciidoc
index da7b6fa79c601..57e69b680f6d2 100644
--- a/docs/setup/docker.asciidoc
+++ b/docs/setup/docker.asciidoc
@@ -88,6 +88,16 @@ mappings are available:
 `SERVER_PORT`:: `server.port`
 `SERVER_SSL_CERT`:: `server.ssl.cert`
 `SERVER_SSL_KEY`:: `server.ssl.key`
+`XPACK_MONITORING_ELASTICSEARCH_URL`:: `xpack.monitoring.elasticsearch.url`
+`XPACK_MONITORING_ELASTICSEARCH_USERNAME`:: `xpack.monitoring.elasticsearch.username`
+`XPACK_MONITORING_ELASTICSEARCH_PASSWORD`:: `xpack.monitoring.elasticsearch.password`
+`XPACK_MONITORING_ENABLED`:: `xpack.monitoring.enabled`
+`XPACK_MONITORING_MAX_BUCKET_SIZE`:: `xpack.monitoring.max_bucket_size`
+`XPACK_MONITORING_MIN_INTERVAL_SECONDS`:: `xpack.monitoring.min_interval_seconds`
+`XPACK_MONITORING_NODE_RESOLVER`:: `xpack.monitoring.node_resolver`
+`XPACK_MONITORING_REPORT_STATS`:: `xpack.monitoring.report_stats`
+`XPACK_MONITORING_KIBANA_COLLECTION_ENABLED`:: `xpack.monitoring.kibana.collection.enabled`
+`XPACK_MONITORING_KIBANA_COLLECTION_INTERVAL`:: `xpack.monitoring.kibana.collection.interval`
 `XPACK_SECURITY_COOKIENAME`:: `xpack.security.cookieName`
 `XPACK_SECURITY_ENCRYPTIONKEY`:: `xpack.security.encryptionKey`
 `XPACK_SECURITY_SECURECOOKIES`:: `xpack.security.secureCookies`
@@ -115,5 +125,3 @@ The following settings have different default values when using the Docker image
 `elasticsearch.url`:: `http://elasticsearch:9200`
 `elasticsearch.username`:: `elastic`
 `elasticsearch.password`:: `changeme`
-
-

From 4c5044a302b1178722bdeb670a7e8f876a81b5d8 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Fri, 24 Feb 2017 10:28:47 +0100
Subject: [PATCH 050/150] Clarifying changing chart type option (#10463)

* fixing #10427

* fixing test
---
 src/core_plugins/kbn_vislib_vis_types/public/area.js  | 11 ++++++++++-
 .../public/controls/point_series/series.html          |  5 +++--
 .../kbn_vislib_vis_types/public/histogram.js          | 11 ++++++++++-
 .../kbn_vislib_vis_types/public/horizontal_bar.js     | 11 ++++++++++-
 src/core_plugins/kbn_vislib_vis_types/public/line.js  | 11 ++++++++++-
 .../apps/visualize/_point_series_options.js           |  2 +-
 6 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/src/core_plugins/kbn_vislib_vis_types/public/area.js
index bd2175ac09db4..e4a971d662314 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/area.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/area.js
@@ -88,7 +88,16 @@ export default function PointSeriesVisType(Private) {
         setYExtents: false
       },
       positions: ['top', 'left', 'right', 'bottom'],
-      chartTypes: ['line', 'area', 'histogram'],
+      chartTypes: [{
+        value: 'line',
+        text: 'line'
+      }, {
+        value: 'area',
+        text: 'area'
+      }, {
+        value: 'histogram',
+        text: 'bar'
+      }],
       axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
       scaleTypes: ['linear', 'log', 'square root'],
       chartModes: ['normal', 'stacked'],
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
index 3b9a68327e6d1..d8eac4052719d 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
@@ -11,6 +11,7 @@
   >
     <div class="kuiSideBarCollapsibleTitle">
       <div
+        ng-init="isSeriesOpen = ($index === 0)"
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="isSeriesOpen = !isSeriesOpen"
       >
@@ -31,14 +32,14 @@
 
         <div class="kuiSideBarFormRow">
           <label class="kuiSideBarFormRow__label" for="{{ 'seriesType' + $index }}">
-            Type
+            Chart Type
           </label>
           <div class="kuiSideBarFormRow__control">
             <select
               id="{{ 'seriesType' + $index }}"
               class="kuiSelect kuiSideBarSelect"
               ng-model="chart.type"
-              ng-options="mode for mode in vis.type.params.chartTypes"
+              ng-options="mode.value as mode.text for mode in vis.type.params.chartTypes"
             ></select>
           </div>
         </div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js
index 5bcea96fb5da3..cc8748ec2a721 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js
@@ -86,7 +86,16 @@ export default function PointSeriesVisType(Private) {
         setYExtents: false
       },
       positions: ['top', 'left', 'right', 'bottom'],
-      chartTypes: ['line', 'area', 'histogram'],
+      chartTypes: [{
+        value: 'line',
+        text: 'line'
+      }, {
+        value: 'area',
+        text: 'area'
+      }, {
+        value: 'histogram',
+        text: 'bar'
+      }],
       axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
       scaleTypes: ['linear', 'log', 'square root'],
       chartModes: ['normal', 'stacked'],
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
index 56da8ae6ab042..baf7270a0a7f7 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
@@ -85,7 +85,16 @@ export default function PointSeriesVisType(Private) {
         setYExtents: false
       },
       positions: ['top', 'left', 'right', 'bottom'],
-      chartTypes: ['line', 'area', 'histogram'],
+      chartTypes: [{
+        value: 'line',
+        text: 'line'
+      }, {
+        value: 'area',
+        text: 'area'
+      }, {
+        value: 'histogram',
+        text: 'bar'
+      }],
       axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
       scaleTypes: ['linear', 'log', 'square root'],
       chartModes: ['normal', 'stacked'],
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/line.js b/src/core_plugins/kbn_vislib_vis_types/public/line.js
index 861b2e0e5cf89..896e5163ab296 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/line.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/line.js
@@ -75,7 +75,16 @@ export default function PointSeriesVisType(Private) {
         setYExtents: false
       },
       positions: ['top', 'left', 'right', 'bottom'],
-      chartTypes: ['line', 'area', 'histogram'],
+      chartTypes: [{
+        value: 'line',
+        text: 'line'
+      }, {
+        value: 'area',
+        text: 'area'
+      }, {
+        value: 'histogram',
+        text: 'bar'
+      }],
       axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
       scaleTypes: ['linear', 'log', 'square root'],
       chartModes: ['normal', 'stacked'],
diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js
index ee19dc45fe5da..8198d875f7657 100644
--- a/test/functional/apps/visualize/_point_series_options.js
+++ b/test/functional/apps/visualize/_point_series_options.js
@@ -125,7 +125,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     bdd.it('should change average series type to histogram', function () {
       return PageObjects.visualizeOptions.toggleCollapsibleTitle('RightAxis-1')
         .then(function () {
-          return PageObjects.visualizeOptions.setSeriesType(1, 'histogram');
+          return PageObjects.visualizeOptions.setSeriesType(1, 'bar');
         })
         .then(function () {
           return PageObjects.visualize.clickGo();

From c253583a3defc866aab06cc9241e6c4db59b5743 Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Fri, 24 Feb 2017 09:26:37 -0500
Subject: [PATCH 051/150] Warn if the title is a duplicate (#10321)

* Warn if the title is a duplicate

* warn when copyOnSave is checked.  add a test

* update message

* fix tests

* Fix issues with substring matching

add more tests.

* make case insensitive and return matching title

* Fix bug caused by subtle difference between this.type and type

Add a comment and rename one of the variables to make the distinction
clearer.

* add debug messages.

* fix tests again

* uncomment out tests

* more debug messages

* save more screenshots

* Need to wait till save finishes or the page may redirect the url after the page has navigated away

* address code review comments
---
 .../public/courier/__tests__/saved_object.js  |   5 +
 .../saved_object/get_title_already_exists.js  |  36 ++++++
 .../courier/saved_object/saved_object.js      | 106 +++++++++++++----
 .../ui/saved_object_save_as_checkbox.html     |   7 +-
 .../apps/dashboard/_dashboard_save.js         |  86 ++++++++++++++
 .../apps/dashboard/_dashboard_time.js         |   6 +-
 test/functional/apps/dashboard/index.js       |   1 +
 test/functional/apps/visualize/_area_chart.js |   2 +-
 test/support/page_objects/common.js           |  23 +++-
 test/support/page_objects/dashboard_page.js   | 109 +++++++++++++-----
 10 files changed, 316 insertions(+), 65 deletions(-)
 create mode 100644 src/ui/public/courier/saved_object/get_title_already_exists.js
 create mode 100644 test/functional/apps/dashboard/_dashboard_save.js

diff --git a/src/ui/public/courier/__tests__/saved_object.js b/src/ui/public/courier/__tests__/saved_object.js
index 5120750766a45..01112b1b448f5 100644
--- a/src/ui/public/courier/__tests__/saved_object.js
+++ b/src/ui/public/courier/__tests__/saved_object.js
@@ -69,6 +69,9 @@ describe('Saved Object', function () {
    * @param {Object} mockDocResponse
    */
   function stubESResponse(mockDocResponse) {
+    // Stub out search for duplicate title:
+    sinon.stub(esAdminStub, 'search').returns(BluebirdPromise.resolve({ hits: { total: 0 } }));
+
     sinon.stub(esDataStub, 'mget').returns(BluebirdPromise.resolve({ docs: [mockDocResponse] }));
     sinon.stub(esDataStub, 'index').returns(BluebirdPromise.resolve(mockDocResponse));
     sinon.stub(esAdminStub, 'mget').returns(BluebirdPromise.resolve({ docs: [mockDocResponse] }));
@@ -85,6 +88,7 @@ describe('Saved Object', function () {
    */
   function createInitializedSavedObject(config = {}) {
     const savedObject = new SavedObject(config);
+    savedObject.title = 'my saved object';
     return savedObject.init();
   }
 
@@ -278,6 +282,7 @@ describe('Saved Object', function () {
       });
 
       it('on failure', function () {
+        stubESResponse(getMockedDocResponse('id'));
         return createInitializedSavedObject({ type: 'dashboard' }).then(savedObject => {
           sinon.stub(DocSource.prototype, 'doIndex', () => {
             expect(savedObject.isSaving).to.be(true);
diff --git a/src/ui/public/courier/saved_object/get_title_already_exists.js b/src/ui/public/courier/saved_object/get_title_already_exists.js
new file mode 100644
index 0000000000000..667c2a52100c6
--- /dev/null
+++ b/src/ui/public/courier/saved_object/get_title_already_exists.js
@@ -0,0 +1,36 @@
+import _ from 'lodash';
+/**
+ * Returns true if the given saved object has a title that already exists, false otherwise. Search is case
+ * insensitive.
+ * @param savedObject {SavedObject} The object with the title to check.
+ * @param esAdmin {Object} Used to query es
+ * @returns {Promise<string|undefined>} Returns the title that matches. Because this search is not case
+ * sensitive, it may not exactly match the title of the object.
+ */
+export function getTitleAlreadyExists(savedObject, esAdmin) {
+  const { index, title, id } = savedObject;
+  const esType = savedObject.getEsType();
+  if (!title) {
+    throw new Error('Title must be supplied');
+  }
+
+  const body = {
+    query: {
+      bool: {
+        must: { match_phrase: { title } },
+        must_not: { match: { id } }
+      }
+    }
+  };
+
+  // Elastic search will return the most relevant results first, which means exact matches should come
+  // first, and so we shouldn't need to request everything. Using 10 just to be on the safe side.
+  const size = 10;
+  return esAdmin.search({ index, type: esType, body, size })
+    .then((response) => {
+      const match = _.find(response.hits.hits, function currentVersion(hit) {
+        return hit._source.title.toLowerCase() === title.toLowerCase();
+      });
+      return match ? match._source.title : undefined;
+    });
+}
diff --git a/src/ui/public/courier/saved_object/saved_object.js b/src/ui/public/courier/saved_object/saved_object.js
index 8ccf2df854365..a7d35e2dae21d 100644
--- a/src/ui/public/courier/saved_object/saved_object.js
+++ b/src/ui/public/courier/saved_object/saved_object.js
@@ -18,6 +18,27 @@ import MappingSetupProvider from 'ui/utils/mapping_setup';
 
 import DocSourceProvider from '../data_source/admin_doc_source';
 import SearchSourceProvider from '../data_source/search_source';
+import { getTitleAlreadyExists } from './get_title_already_exists';
+
+/**
+ * An error message to be used when the user rejects a confirm overwrite.
+ * @type {string}
+ */
+const OVERWRITE_REJECTED = 'Overwrite confirmation was rejected';
+/**
+ * An error message to be used when the user rejects a confirm save with duplicate title.
+ * @type {string}
+ */
+const SAVE_DUPLICATE_REJECTED = 'Save with duplicate title confirmation was rejected';
+
+/**
+ * @param error {Error} the error
+ * @return {boolean}
+ */
+function isErrorNonFatal(error) {
+  if (!error) return false;
+  return error.message === OVERWRITE_REJECTED || error.message === SAVE_DUPLICATE_REJECTED;
+}
 
 export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private, Notifier, confirmModalPromise, indexPatterns) {
 
@@ -35,10 +56,17 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
     const docSource = new DocSource();
 
     // type name for this object, used as the ES-type
-    const type = config.type;
+    const esType = config.type;
+    this.index = kbnIndex;
 
     this.getDisplayName = function () {
-      return type;
+      return esType;
+    };
+
+    // NOTE: this.type (not set in this file, but somewhere else) is the sub type, e.g. 'area' or
+    // 'data table', while esType is the more generic type - e.g. 'visualization' or 'saved search'.
+    this.getEsType = function () {
+      return esType;
     };
 
     /**
@@ -51,7 +79,7 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
 
     // Create a notifier for sending alerts
     const notify = new Notifier({
-      location: 'Saved ' + type
+      location: 'Saved ' + this.getDisplayName()
     });
 
     // mapping definition for the fields that this object will expose
@@ -96,7 +124,9 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
      * @return {Promise<IndexPattern | null>}
      */
     const hydrateIndexPattern = () => {
-      if (!this.searchSource) { return Promise.resolve(null); }
+      if (!this.searchSource) {
+        return Promise.resolve(null);
+      }
 
       if (config.clearSavedIndexPattern) {
         this.searchSource.set('index', undefined);
@@ -105,7 +135,9 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
 
       let index = config.indexPattern || this.searchSource.getOwn('index');
 
-      if (!index) { return Promise.resolve(null); }
+      if (!index) {
+        return Promise.resolve(null);
+      }
 
       // If index is not an IndexPattern object at this point, then it's a string id of an index.
       if (!(index instanceof indexPatterns.IndexPattern)) {
@@ -128,17 +160,17 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
      * @resolved {SavedObject}
      */
     this.init = _.once(() => {
-      // ensure that the type is defined
-      if (!type) throw new Error('You must define a type name to use SavedObject objects.');
+      // ensure that the esType is defined
+      if (!esType) throw new Error('You must define a type name to use SavedObject objects.');
 
       // tell the docSource where to find the doc
       docSource
         .index(kbnIndex)
-        .type(type)
+        .type(esType)
         .id(this.id);
 
-      // check that the mapping for this type is defined
-      return mappingSetup.isDefined(type)
+      // check that the mapping for this esType is defined
+      return mappingSetup.isDefined(esType)
         .then(function (defined) {
           // if it is already defined skip this step
           if (defined) return true;
@@ -152,8 +184,8 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
             }
           };
 
-          // tell mappingSetup to set type
-          return mappingSetup.setup(type, mapping);
+          // tell mappingSetup to set esType
+          return mappingSetup.setup(esType, mapping);
         })
         .then(() => {
           // If there is not id, then there is no document to fetch from elasticsearch
@@ -180,7 +212,7 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
     this.applyESResp = (resp) => {
       this._source = _.cloneDeep(resp._source);
 
-      if (resp.found != null && !resp.found) throw new errors.SavedObjectNotFound(type, this.id);
+      if (resp.found != null && !resp.found) throw new errors.SavedObjectNotFound(esType, this.id);
 
       const meta = resp._source.kibanaSavedObjectMeta || {};
       delete resp._source.kibanaSavedObjectMeta;
@@ -258,12 +290,6 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
       return esAdmin.indices.refresh({ index: kbnIndex });
     }
 
-    /**
-     * An error message to be used when the user rejects a confirm overwrite.
-     * @type {string}
-     */
-    const OVERWRITE_REJECTED = 'Overwrite confirmation was rejected';
-
     /**
      * Attempts to create the current object using the serialized source. If an object already
      * exists, a warning message requests an overwrite confirmation.
@@ -290,6 +316,27 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
         });
     };
 
+    /**
+     * Returns a promise that resolves to true if either the title is unique, or if the user confirmed they
+     * wished to save the duplicate title.  Promise is rejected if the user rejects the confirmation.
+     */
+    const warnIfDuplicateTitle = () => {
+      // Don't warn if the user isn't updating the title, otherwise that would become very annoying to have
+      // to confirm the save every time, except when copyOnSave is true, then we do want to check.
+      if (this.title === this.lastSavedTitle && !this.copyOnSave) {
+        return Promise.resolve();
+      }
+
+      return getTitleAlreadyExists(this, esAdmin)
+        .then((duplicateTitle) => {
+          if (!duplicateTitle) return true;
+          const confirmMessage =
+            `A ${this.getDisplayName()} with the title '${duplicateTitle}' already exists. Would you like to save anyway?`;
+
+          return confirmModalPromise(confirmMessage, { confirmButtonText: `Save ${this.getDisplayName()}` })
+            .catch(() => Promise.reject(new Error(SAVE_DUPLICATE_REJECTED)));
+        });
+    };
 
     /**
      * @typedef {Object} SaveOptions
@@ -325,9 +372,14 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
       const source = this.serialize();
 
       this.isSaving = true;
-      const doSave = saveOptions.confirmOverwrite ? createSource(source) : docSource.doIndex(source);
-      return doSave
-        .then((id) => { this.id = id; })
+
+      return warnIfDuplicateTitle()
+        .then(() => {
+          return saveOptions.confirmOverwrite ? createSource(source) : docSource.doIndex(source);
+        })
+        .then((id) => {
+          this.id = id;
+        })
         .then(refreshIndex)
         .then(() => {
           this.isSaving = false;
@@ -337,7 +389,9 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
         .catch((err) => {
           this.isSaving = false;
           this.id = originalId;
-          if (err && err.message === OVERWRITE_REJECTED) return;
+          if (isErrorNonFatal(err)) {
+            return;
+          }
           return Promise.reject(err);
         });
     };
@@ -357,10 +411,12 @@ export default function SavedObjectFactory(esAdmin, kbnIndex, Promise, Private,
       return esAdmin.delete(
         {
           index: kbnIndex,
-          type: type,
+          type: esType,
           id: this.id
         })
-        .then(() => { return refreshIndex(); });
+        .then(() => {
+          return refreshIndex();
+        });
     };
   }
 
diff --git a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
index 22aa9bc996dde..63e03489ad642 100644
--- a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
+++ b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
@@ -3,7 +3,12 @@
     In previous versions of Kibana, changing the name of a {{savedObject.getDisplayName()}} would make a copy with the new name. Use the 'Save as a new {{savedObject.getDisplayName()}}' checkbox to do this now.
   </div>
   <label>
-    <input type="checkbox" ng-model="savedObject.copyOnSave" ng-checked="savedObject.copyOnSave">
+    <input
+      type="checkbox"
+      data-test-subj="saveAsNewCheckbox"
+      ng-model="savedObject.copyOnSave"
+      ng-checked="savedObject.copyOnSave"
+    >
     Save as a new {{savedObject.getDisplayName()}}
   </label>
 </div>
diff --git a/test/functional/apps/dashboard/_dashboard_save.js b/test/functional/apps/dashboard/_dashboard_save.js
new file mode 100644
index 0000000000000..0b01501498e2e
--- /dev/null
+++ b/test/functional/apps/dashboard/_dashboard_save.js
@@ -0,0 +1,86 @@
+import expect from 'expect.js';
+import { bdd } from '../../../support';
+
+import PageObjects from '../../../support/page_objects';
+
+bdd.describe('dashboard save', function describeIndexTests() {
+  const dashboardName = 'Dashboard Save Test';
+
+  bdd.before(async function () {
+    return PageObjects.dashboard.initTests();
+  });
+
+  bdd.it('warns on duplicate name for new dashboard', async function() {
+    await PageObjects.dashboard.clickNewDashboard();
+    await PageObjects.dashboard.saveDashboard(dashboardName);
+
+    let isConfirmOpen = await PageObjects.common.isConfirmModalOpen();
+    expect(isConfirmOpen).to.equal(false);
+
+    await PageObjects.dashboard.gotoDashboardLandingPage();
+    await PageObjects.dashboard.clickNewDashboard();
+    await PageObjects.dashboard.enterDashboardTitleAndClickSave(dashboardName);
+
+    isConfirmOpen = await PageObjects.common.isConfirmModalOpen();
+    expect(isConfirmOpen).to.equal(true);
+  });
+
+  bdd.it('does not save on reject confirmation', async function() {
+    await PageObjects.common.clickCancelOnModal();
+
+    const countOfDashboards = await PageObjects.dashboard.getDashboardCountWithName(dashboardName);
+    expect(countOfDashboards).to.equal(1);
+  });
+
+  bdd.it('Saves on confirm duplicate title warning', async function() {
+    await PageObjects.dashboard.gotoDashboardLandingPage();
+    await PageObjects.dashboard.clickNewDashboard();
+    await PageObjects.dashboard.enterDashboardTitleAndClickSave(dashboardName);
+
+    await PageObjects.common.clickConfirmOnModal();
+
+    // This is important since saving a new dashboard will cause a refresh of the page.  We have to
+    // wait till it finishes reloading or it might reload the url after simulating the
+    // dashboard landing page click.
+    await PageObjects.header.waitUntilLoadingHasFinished();
+
+    const countOfDashboards = await PageObjects.dashboard.getDashboardCountWithName(dashboardName);
+    expect(countOfDashboards).to.equal(2);
+  });
+
+  bdd.it('Does not warn when you save an existing dashboard with the title it already has, and that title is a duplicate',
+    async function() {
+      await PageObjects.dashboard.clickDashboardByLinkText(dashboardName);
+      await PageObjects.header.isGlobalLoadingIndicatorHidden();
+      await PageObjects.dashboard.saveDashboard(dashboardName);
+
+      const isConfirmOpen = await PageObjects.common.isConfirmModalOpen();
+      expect(isConfirmOpen).to.equal(false);
+    }
+  );
+
+  bdd.it('Warns you when you Save as New Dashboard, and the title is a duplicate', async function() {
+    await PageObjects.dashboard.enterDashboardTitleAndClickSave(dashboardName, { saveAsNew: true });
+
+    const isConfirmOpen = await PageObjects.common.isConfirmModalOpen();
+    expect(isConfirmOpen).to.equal(true);
+
+    await PageObjects.common.clickCancelOnModal();
+  });
+
+  bdd.it('Does not warn when only the prefix matches', async function() {
+    await PageObjects.dashboard.saveDashboard(dashboardName.split(' ')[0]);
+
+    const isConfirmOpen = await PageObjects.common.isConfirmModalOpen();
+    expect(isConfirmOpen).to.equal(false);
+  });
+
+  bdd.it('Warns when case is different', async function() {
+    await PageObjects.dashboard.enterDashboardTitleAndClickSave(dashboardName.toUpperCase());
+
+    const isConfirmOpen = await PageObjects.common.isConfirmModalOpen();
+    expect(isConfirmOpen).to.equal(true);
+
+    await PageObjects.common.clickCancelOnModal();
+  });
+});
diff --git a/test/functional/apps/dashboard/_dashboard_time.js b/test/functional/apps/dashboard/_dashboard_time.js
index 7113c586bbf2c..24307d4971209 100644
--- a/test/functional/apps/dashboard/_dashboard_time.js
+++ b/test/functional/apps/dashboard/_dashboard_time.js
@@ -17,7 +17,7 @@ bdd.describe('dashboard time', function dashboardSaveWithTime() {
     bdd.it('is saved', async function () {
       await PageObjects.dashboard.clickNewDashboard();
       await PageObjects.dashboard.addVisualizations([PageObjects.dashboard.getTestVisualizationNames()[0]]);
-      await PageObjects.dashboard.saveDashboard(dashboardName, false);
+      await PageObjects.dashboard.saveDashboard(dashboardName, { storeTimeWithDashboard: false });
     });
 
     bdd.it('Does not set the time picker on open', async function () {
@@ -35,7 +35,7 @@ bdd.describe('dashboard time', function dashboardSaveWithTime() {
   bdd.describe('dashboard with stored timed', async function () {
     bdd.it('is saved with quick time', async function () {
       await PageObjects.header.setQuickTime('Today');
-      await PageObjects.dashboard.saveDashboard(dashboardName, true);
+      await PageObjects.dashboard.saveDashboard(dashboardName, { storeTimeWithDashboard: true });
     });
 
     bdd.it('sets quick time on open', async function () {
@@ -49,7 +49,7 @@ bdd.describe('dashboard time', function dashboardSaveWithTime() {
 
     bdd.it('is saved with absolute time', async function () {
       await PageObjects.header.setAbsoluteRange(fromTime, toTime);
-      await PageObjects.dashboard.saveDashboard(dashboardName, true);
+      await PageObjects.dashboard.saveDashboard(dashboardName, { storeTimeWithDashboard: true });
     });
 
     bdd.it('sets absolute time on open', async function () {
diff --git a/test/functional/apps/dashboard/index.js b/test/functional/apps/dashboard/index.js
index e348feb3b95da..635113f876ee7 100644
--- a/test/functional/apps/dashboard/index.js
+++ b/test/functional/apps/dashboard/index.js
@@ -14,5 +14,6 @@ bdd.describe('dashboard app', function () {
   });
 
   require('./_dashboard');
+  require('./_dashboard_save');
   require('./_dashboard_time');
 });
diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js
index 54cf8311a1c0a..8d1a47c229cf0 100644
--- a/test/functional/apps/visualize/_area_chart.js
+++ b/test/functional/apps/visualize/_area_chart.js
@@ -60,7 +60,7 @@ bdd.describe('visualize app', function describeIndexTests() {
   });
 
   bdd.describe('area charts', function indexPatternCreation() {
-    const vizName1 = 'Visualization AreaChart';
+    const vizName1 = 'Visualization AreaChart Name Test';
 
     bdd.it('should save and load with special characters', function () {
       const vizNamewithSpecialChars = vizName1 + '/?&=%';
diff --git a/test/support/page_objects/common.js b/test/support/page_objects/common.js
index 1a6a74f2d91b5..49f7d1022a963 100644
--- a/test/support/page_objects/common.js
+++ b/test/support/page_objects/common.js
@@ -277,7 +277,7 @@ export default class Common {
       .findByCssSelector(selector)
       .then(() => true)
       .catch(() => false);
-    this.remote.setFindTimeout(defaultFindTimeout);
+    await this.remote.setFindTimeout(defaultFindTimeout);
 
     PageObjects.common.debug(`exists? ${exists}`);
     return exists;
@@ -333,12 +333,29 @@ export default class Common {
 
   async getSharedItemTitleAndDescription() {
     const element = await this.remote
-    .setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('[shared-item]');
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector('[shared-item]');
 
     return {
       title: await element.getAttribute('data-title'),
       description: await element.getAttribute('data-description')
     };
   }
+
+  async clickConfirmOnModal() {
+    this.debug('Clicking modal confirm');
+    await this.findTestSubject('confirmModalConfirmButton').click();
+  }
+
+  async clickCancelOnModal() {
+    this.debug('Clicking modal cancel');
+    await this.findTestSubject('confirmModalCancelButton').click();
+  }
+
+  async isConfirmModalOpen() {
+    let isOpen = true;
+    await this.findTestSubject('confirmModalCancelButton', 2000).catch(() => isOpen = false);
+    await this.remote.setFindTimeout(defaultFindTimeout);
+    return isOpen;
+  }
 }
diff --git a/test/support/page_objects/dashboard_page.js b/test/support/page_objects/dashboard_page.js
index 61a5f4f490b25..261bd00233998 100644
--- a/test/support/page_objects/dashboard_page.js
+++ b/test/support/page_objects/dashboard_page.js
@@ -38,10 +38,15 @@ export default class DashboardPage {
   }
 
   async gotoDashboardLandingPage() {
-    PageObjects.common.debug('Go to dashboard landing page');
+    PageObjects.common.debug('gotoDashboardLandingPage');
     const onPage = await this.onDashboardLandingPage();
     if (!onPage) {
-      return PageObjects.common.findByCssSelector('a[href="#/dashboard"]').click();
+      await PageObjects.common.try(async () => {
+        const goToDashboardLink = await PageObjects.common.findByCssSelector('a[href="#/dashboard"]');
+        await goToDashboardLink.click();
+        // Once the searchFilter can be found, we know the page finished loading.
+        const searchFilter = await PageObjects.common.findTestSubject('searchFilter');
+      });
     }
   }
 
@@ -130,37 +135,51 @@ export default class DashboardPage {
     });
   }
 
-  async saveDashboard(dashName, storeTimeWithDash) {
+  /**
+   *
+   * @param dashName {String}
+   * @param saveOptions {{storeTimeWithDashboard: boolean, saveAsNew: boolean}}
+   */
+  async saveDashboard(dashName, saveOptions = {}) {
+    await this.enterDashboardTitleAndClickSave(dashName, saveOptions);
+
+    await PageObjects.header.waitUntilLoadingHasFinished();
+
+    // verify that green message at the top of the page.
+    // it's only there for about 5 seconds
+    await PageObjects.common.try(() => {
+      PageObjects.common.debug('verify toast-message for saved dashboard');
+      return this.findTimeout
+        .findByCssSelector('kbn-truncated.toast-message.ng-isolate-scope')
+        .getVisibleText();
+    });
+  }
+
+  /**
+   *
+   * @param dashboardTitle {String}
+   * @param saveOptions {{storeTimeWithDashboard: boolean, saveAsNew: boolean}}
+   */
+  async enterDashboardTitleAndClickSave(dashboardTitle, saveOptions = {}) {
     await PageObjects.common.findTestSubject('dashboardSaveButton').click();
 
     await PageObjects.header.waitUntilLoadingHasFinished();
-    await PageObjects.common.sleep(1000);
 
     PageObjects.common.debug('entering new title');
-    await this.findTimeout.findById('dashboardTitle').type(dashName);
+    await this.findTimeout.findById('dashboardTitle').type(dashboardTitle);
 
-    if (storeTimeWithDash !== undefined) {
-      await this.storeTimeWithDashboard(storeTimeWithDash);
+    if (saveOptions.storeTimeWithDashboard !== undefined) {
+      await this.setStoreTimeWithDashboard(saveOptions.storeTimeWithDashboard);
     }
 
-    await PageObjects.header.waitUntilLoadingHasFinished();
-    await PageObjects.common.sleep(1000);
+    if (saveOptions.saveAsNew !== undefined) {
+      await this.setSaveAsNewCheckBox(saveOptions.saveAsNew);
+    }
 
     await PageObjects.common.try(() => {
       PageObjects.common.debug('clicking final Save button for named dashboard');
       return this.findTimeout.findByCssSelector('.btn-primary').click();
     });
-
-    await PageObjects.header.waitUntilLoadingHasFinished();
-
-    // verify that green message at the top of the page.
-    // it's only there for about 5 seconds
-    await PageObjects.common.try(() => {
-      PageObjects.common.debug('verify toast-message for saved dashboard');
-      return this.findTimeout
-        .findByCssSelector('kbn-truncated.toast-message.ng-isolate-scope')
-        .getVisibleText();
-    });
   }
 
   clickDashboardByLinkText(dashName) {
@@ -169,18 +188,35 @@ export default class DashboardPage {
     .click();
   }
 
+  async searchForDashboardWithName(dashName) {
+    PageObjects.common.debug(`searchForDashboardWithName: ${dashName}`);
+
+    await this.gotoDashboardLandingPage();
+
+    await PageObjects.common.try(async () => {
+      const searchFilter = await PageObjects.common.findTestSubject('searchFilter');
+      await searchFilter.click();
+      // Note: this replacement of - to space is to preserve original logic but I'm not sure why or if it's needed.
+      await searchFilter.type(dashName.replace('-',' '));
+    });
+
+    await PageObjects.header.waitUntilLoadingHasFinished();
+  }
+
+  async getDashboardCountWithName(dashName) {
+    PageObjects.common.debug(`getDashboardCountWithName: ${dashName}`);
+
+    await this.searchForDashboardWithName(dashName);
+    const links = await this.findTimeout.findAllByLinkText(dashName);
+    return links.length;
+  }
+
   // use the search filter box to narrow the results down to a single
   // entry, or at least to a single page of results
   async loadSavedDashboard(dashName) {
     PageObjects.common.debug(`Load Saved Dashboard ${dashName}`);
-    const self = this;
-    await this.gotoDashboardLandingPage();
-    const searchBox = await PageObjects.common.findTestSubject('searchFilter');
-    await searchBox.click();
-    await searchBox.type(dashName.replace('-',' '));
 
-    await PageObjects.header.waitUntilLoadingHasFinished();
-    await PageObjects.common.sleep(1000);
+    await this.searchForDashboardWithName(dashName);
     await this.clickDashboardByLinkText(dashName);
     return PageObjects.header.waitUntilLoadingHasFinished();
   }
@@ -280,12 +316,21 @@ export default class DashboardPage {
     await PageObjects.header.setAbsoluteRange(fromTime, toTime);
   }
 
-  async storeTimeWithDashboard(on) {
-    PageObjects.common.debug('Storing time with dashboard: ' + on);
+  async setSaveAsNewCheckBox(checked) {
+    PageObjects.common.debug('saveAsNewCheckbox: ' + checked);
+    const saveAsNewCheckbox = await PageObjects.common.findTestSubject('saveAsNewCheckbox');
+    const isAlreadyChecked = await saveAsNewCheckbox.getProperty('checked');
+    if (isAlreadyChecked !== checked) {
+      PageObjects.common.debug('Flipping save as new checkbox');
+      await saveAsNewCheckbox.click();
+    }
+  }
+
+  async setStoreTimeWithDashboard(checked) {
+    PageObjects.common.debug('Storing time with dashboard: ' + checked);
     const storeTimeCheckbox = await PageObjects.common.findTestSubject('storeTimeWithDashboard');
-    const checked = await storeTimeCheckbox.getProperty('checked');
-    if (checked === true && on === false ||
-      checked === false && on === true) {
+    const isAlreadyChecked = await storeTimeCheckbox.getProperty('checked');
+    if (isAlreadyChecked !== checked) {
       PageObjects.common.debug('Flipping store time checkbox');
       await storeTimeCheckbox.click();
     }

From 0333fdafa25465722a666b490985b74729c6b345 Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jbudz@users.noreply.github.com>
Date: Fri, 24 Feb 2017 08:40:08 -0600
Subject: [PATCH 052/150] [optimize] Load babel environment variables before
 babel-register (#10432)

* [optimize] Load babel environment variables before babel-register

* [optimize] Move babel register to function call
---
 src/optimize/babel/options.build.js | 15 +++++++++++----
 src/optimize/babel/options.js       | 15 +++++++++++----
 src/optimize/babel/register.js      |  2 +-
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/optimize/babel/options.build.js b/src/optimize/babel/options.build.js
index 691d1a322d914..f318b7d46334f 100644
--- a/src/optimize/babel/options.build.js
+++ b/src/optimize/babel/options.build.js
@@ -5,12 +5,19 @@ const {
   buildIgnore
 } = require('./helpers');
 
+const nodeOptions = {
+  presets: nodePresets,
+  plugins,
+  ignore: buildIgnore
+};
+
 exports.webpack = {
   presets: webpackPresets,
   plugins: plugins
 };
-exports.node = {
-  presets: nodePresets,
-  plugins,
-  ignore: buildIgnore
+
+exports.node = nodeOptions;
+
+exports.registerNodeOptions = function () {
+  require('babel-register')(nodeOptions);
 };
diff --git a/src/optimize/babel/options.js b/src/optimize/babel/options.js
index f6d0da55f831f..6da8838b4e186 100644
--- a/src/optimize/babel/options.js
+++ b/src/optimize/babel/options.js
@@ -8,13 +8,20 @@ const {
   devIgnore
 } = require('./helpers');
 
+const nodeOptions = {
+  presets: nodePresets,
+  plugins,
+  ignore: devIgnore
+};
+
 exports.webpack = {
   cacheDirectory: webpackCacheDir,
   presets: webpackPresets,
   plugins: plugins
 };
-exports.node = {
-  presets: nodePresets,
-  plugins,
-  ignore: devIgnore
+
+exports.node = nodeOptions;
+
+exports.registerNodeOptions = function () {
+  require('babel-register')(nodeOptions);
 };
diff --git a/src/optimize/babel/register.js b/src/optimize/babel/register.js
index 4d48ca327607c..dc852184189e0 100644
--- a/src/optimize/babel/register.js
+++ b/src/optimize/babel/register.js
@@ -1,4 +1,4 @@
 // this file is not transpiled in dev
 
 require('babel-polyfill');
-require('babel-register')(require('./options').node);
+require('./options').registerNodeOptions();

From 3df84ee3e960f9fd2b437c68c49b1f0e49c7734a Mon Sep 17 00:00:00 2001
From: Toby McLaughlin <toby@jarpy.net>
Date: Sat, 25 Feb 2017 02:32:01 +1100
Subject: [PATCH 053/150] Document
 xpack.monitoring.ui.container.elasticsearch.enabled for Docker (#10498)

---
 docs/setup/docker.asciidoc | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/setup/docker.asciidoc b/docs/setup/docker.asciidoc
index 57e69b680f6d2..0221a8eacee26 100644
--- a/docs/setup/docker.asciidoc
+++ b/docs/setup/docker.asciidoc
@@ -37,6 +37,7 @@ The Docker image provides several methods for configuring Kibana. The convention
 approach is to provide a `kibana.yml` file as described in <<settings>>, but it's
 also possible to use environment variables to define settings.
 
+[[docker-bind-mount-config]]
 ==== Bind-mounted configuration
 
 One way to configure Kibana on Docker is to provide `kibana.yml` via bind-mounting.
@@ -51,6 +52,7 @@ services:
       - ./kibana.yml:/usr/share/kibana/config/kibana.yml
 --------------------------------------------
 
+[[docker-env-config]]
 ==== Environment variable configuration
 
 Under Docker, Kibana can be configured via environment variables. The following
@@ -98,6 +100,7 @@ mappings are available:
 `XPACK_MONITORING_REPORT_STATS`:: `xpack.monitoring.report_stats`
 `XPACK_MONITORING_KIBANA_COLLECTION_ENABLED`:: `xpack.monitoring.kibana.collection.enabled`
 `XPACK_MONITORING_KIBANA_COLLECTION_INTERVAL`:: `xpack.monitoring.kibana.collection.interval`
+`XPACK_MONITORING_UI_CONTAINER_ELASTICSEARCH_ENABLED`:: `xpack.monitoring.ui.container.elasticsearch.enabled`
 `XPACK_SECURITY_COOKIENAME`:: `xpack.security.cookieName`
 `XPACK_SECURITY_ENCRYPTIONKEY`:: `xpack.security.encryptionKey`
 `XPACK_SECURITY_SECURECOOKIES`:: `xpack.security.secureCookies`
@@ -125,3 +128,8 @@ The following settings have different default values when using the Docker image
 `elasticsearch.url`:: `http://elasticsearch:9200`
 `elasticsearch.username`:: `elastic`
 `elasticsearch.password`:: `changeme`
+`xpack.monitoring.ui.container.elasticsearch.enabled`:: `true`
+
+These settings are defined in the default `kibana.yml`. They can be overridden
+with a <<docker-bind-mount-config,custom `kibana.yml`>> or via
+<<docker-env-config,environment variables>>.

From be177cc9f11261bb15fae4c07795c73f44b4dbc6 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Fri, 24 Feb 2017 18:33:57 +0100
Subject: [PATCH 054/150] fixing custom label issue with point series charts
 (#10465)

---
 src/ui/public/vislib/lib/types/point_series.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js
index 5d32865a05c2a..3e6999c443735 100644
--- a/src/ui/public/vislib/lib/types/point_series.js
+++ b/src/ui/public/vislib/lib/types/point_series.js
@@ -4,7 +4,7 @@ export default function ColumnHandler(Private) {
 
   const createSerieFromParams = (cfg, seri) => {
     const matchingSeriParams = cfg.seriesParams ? cfg.seriesParams.find(seriConfig => {
-      return seri.aggLabel === seriConfig.data.label;
+      return seri.label === seriConfig.data.label;
     }) : null;
 
 

From d38e3c260e5b57153c020146172b8231c188b82e Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Fri, 24 Feb 2017 21:05:18 +0100
Subject: [PATCH 055/150] Merge branch 'metrics' of
 https://github.com/simianhacker/kibana into simianhacker-metrics (#10564)

# Conflicts:
#	test/functional/apps/visualize/_chart_types.js
---
 src/core_plugins/kibana/public/visualize/editor/editor.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index c94de8fa94c58..adae245228abb 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -71,7 +71,11 @@
 
   <div class="vis-editor-content">
 
-    <vis-editor-vis-options ng-if="vis.type.fullEditor" vis="vis" saved-vis="savedVis" ui-state="uiState"
+    <vis-editor-vis-options ng-if="vis.type.fullEditor"
+                            vis="vis"
+                            saved-vis="savedVis"
+                            editor="vis.type.params.editor"
+                            ui-state="uiState"
                             class="vis-editor-full-options"></vis-editor-vis-options>
 
     <div class="collapsible-sidebar" ng-if="!vis.type.fullEditor && chrome.getVisible()" >

From 7084d5573ff5e2664ee6bb9ab8022e1706ab6764 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Fri, 24 Feb 2017 21:06:22 +0100
Subject: [PATCH 056/150] using field formatters for heatmap legend (#10529)

* using field formatters for heatmap legend

* fixing test
---
 .../vislib/visualizations/point_series/heatmap_chart.js   | 8 ++++++--
 test/functional/apps/visualize/_heatmap_chart.js          | 8 ++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/ui/public/vislib/visualizations/point_series/heatmap_chart.js b/src/ui/public/vislib/visualizations/point_series/heatmap_chart.js
index fd34d42c3dc46..d78fced685b51 100644
--- a/src/ui/public/vislib/visualizations/point_series/heatmap_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/heatmap_chart.js
@@ -44,13 +44,15 @@ export default function HeatmapChartFactory(Private) {
       const percentageMode = cfg.get('percentageMode');
       const colorsNumber = cfg.get('colorsNumber');
       const colorsRange = cfg.get('colorsRange');
+      const zAxisConfig = this.getValueAxis().axisConfig;
+      const zAxisFormatter = zAxisConfig.get('labels.axisFormatter');
       const zScale = this.getValueAxis().getScale();
       const [min, max] = zScale.domain();
       const labels = [];
       if (cfg.get('setColorRange')) {
         colorsRange.forEach(range => {
-          const from = range.from;
-          const to = range.to;
+          const from = isFinite(range.from) ? zAxisFormatter(range.from) : range.from;
+          const to = isFinite(range.to) ? zAxisFormatter(range.to) : range.to;
           labels.push(`${from} - ${to}`);
         });
       } else {
@@ -69,6 +71,8 @@ export default function HeatmapChartFactory(Private) {
               val = Math.ceil(val);
               nextVal = Math.ceil(nextVal);
             }
+            if (isFinite(val)) val = zAxisFormatter(val);
+            if (isFinite(nextVal)) nextVal = zAxisFormatter(nextVal);
             label = `${val} - ${nextVal}`;
           }
 
diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.js
index 608d03a2fc59f..edfa1b612f961 100644
--- a/test/functional/apps/visualize/_heatmap_chart.js
+++ b/test/functional/apps/visualize/_heatmap_chart.js
@@ -74,10 +74,10 @@ bdd.describe('visualize app', function describeIndexTests() {
     });
 
     bdd.it('should show correct chart, take screenshot', function () {
-      const expectedChartValues = ['0 - 400', '0 - 400', '400 - 800', '1200 - 1600',
-        '1200 - 1600', '400 - 800', '0 - 400', '0 - 400', '0 - 400', '0 - 400', '400 - 800',
-        '1200 - 1600', '1200 - 1600', '400 - 800', '0 - 400', '0 - 400', '0 - 400', '0 - 400',
-        '400 - 800', '1200 - 1600', '1200 - 1600', '400 - 800', '0 - 400', '0 - 400' ];
+      const expectedChartValues = ['0 - 400', '0 - 400', '400 - 800', '1,200 - 1,600',
+        '1,200 - 1,600', '400 - 800', '0 - 400', '0 - 400', '0 - 400', '0 - 400', '400 - 800',
+        '1,200 - 1,600', '1,200 - 1,600', '400 - 800', '0 - 400', '0 - 400', '0 - 400', '0 - 400',
+        '400 - 800', '1,200 - 1,600', '1,200 - 1,600', '400 - 800', '0 - 400', '0 - 400' ];
 
       // Most recent failure on Jenkins usually indicates the bar chart is still being drawn?
       // return arguments[0].getAttribute(arguments[1]);","args":[{"ELEMENT":"592"},"fill"]}] arguments[0].getAttribute is not a function

From c2f9ff23b47aa9f8f33bfffb5295e8e059fef6dd Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 24 Feb 2017 21:09:09 -0800
Subject: [PATCH 057/150] Add support for content on both the left and right
 sides of PanelHeaders. (#10578)

---
 ui_framework/components/panel/_panel.scss     | 15 ++++-
 ui_framework/dist/ui_framework.css            | 56 +++++++++++++++++++
 .../src/views/panel/panel_example.jsx         | 17 ++++++
 .../src/views/panel/panel_with_header.html    |  6 +-
 .../panel/panel_with_header_sections.html     | 19 +++++++
 5 files changed, 109 insertions(+), 4 deletions(-)
 create mode 100644 ui_framework/doc_site/src/views/panel/panel_with_header_sections.html

diff --git a/ui_framework/components/panel/_panel.scss b/ui_framework/components/panel/_panel.scss
index 45ebd50bce162..f1f59ce54fed0 100644
--- a/ui_framework/components/panel/_panel.scss
+++ b/ui_framework/components/panel/_panel.scss
@@ -13,11 +13,10 @@
 }
 
 .kuiPanelHeader {
+  @include bar;
   @include buttonOnStandoutBackground;
   @include selectOnStandoutBackground;
 
-  display: flex;
-  align-items: center;
   padding: $toolBarPadding;
   height: $toolBarHeight;
   background-color: $standoutBackgroundColor;
@@ -28,6 +27,18 @@
     line-height: $lineHeight;
   }
 
+/**
+ * 1. Undo what barSection mixin does.
+ */
+.kuiPanelHeaderSection {
+  @include barSection;
+
+  &:only-child {
+    margin-left: 0; /* 1 */
+    margin-right: auto; /* 1 */
+  }
+}
+
 .kuiPanelBody {
   padding: $toolBarPadding;
 }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index c687f47c13f90..e1442d5fbfd5a 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1271,6 +1271,12 @@ body {
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
   padding: 10px;
   height: 50px;
   background-color: #E4E4E4; }
@@ -1304,6 +1310,56 @@ body {
   font-size: 18px;
   line-height: 1.5; }
 
+/**
+ * 1. Undo what barSection mixin does.
+ */
+.kuiPanelHeaderSection {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    /* 3 */ }
+  .kuiPanelHeaderSection:first-child {
+    margin-left: 0; }
+  .kuiPanelHeaderSection:last-child {
+    margin-right: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    /* 4 */
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+    /* 5 */ }
+  .kuiPanelHeaderSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiPanelHeaderSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+  .kuiPanelHeaderSection:only-child {
+    margin-left: 0;
+    /* 1 */
+    margin-right: auto;
+    /* 1 */ }
+
 .kuiPanelBody {
   padding: 10px; }
 
diff --git a/ui_framework/doc_site/src/views/panel/panel_example.jsx b/ui_framework/doc_site/src/views/panel/panel_example.jsx
index 2459141d8e209..98980e3990eb4 100644
--- a/ui_framework/doc_site/src/views/panel/panel_example.jsx
+++ b/ui_framework/doc_site/src/views/panel/panel_example.jsx
@@ -14,6 +14,7 @@ import {
 
 const panelHtml = require('./panel.html');
 const panelWithHeaderHtml = require('./panel_with_header.html');
+const panelWithHeaderSectionsHtml = require('./panel_with_header_sections.html');
 
 export default props => (
   <GuidePage title={props.route.name}>
@@ -44,5 +45,21 @@ export default props => (
         html={panelWithHeaderHtml}
       />
     </GuideSection>
+
+    <GuideSection
+      title="Panel with PanelHeaderSections"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: panelWithHeaderSectionsHtml,
+      }]}
+    >
+      <GuideText>
+        PanelHeaders can have sections.
+      </GuideText>
+
+      <GuideDemo
+        html={panelWithHeaderSectionsHtml}
+      />
+    </GuideSection>
   </GuidePage>
 );
diff --git a/ui_framework/doc_site/src/views/panel/panel_with_header.html b/ui_framework/doc_site/src/views/panel/panel_with_header.html
index b4e5c61aebad7..b8d588b0f4db1 100644
--- a/ui_framework/doc_site/src/views/panel/panel_with_header.html
+++ b/ui_framework/doc_site/src/views/panel/panel_with_header.html
@@ -1,7 +1,9 @@
 <div class="kuiPanel kuiPanel--withHeader">
   <div class="kuiPanelHeader">
-    <div class="kuiPanelHeader__title">
-      Panel title
+    <div class="kuiPanelHeaderSection">
+      <div class="kuiPanelHeader__title">
+        Panel title
+      </div>
     </div>
   </div>
 
diff --git a/ui_framework/doc_site/src/views/panel/panel_with_header_sections.html b/ui_framework/doc_site/src/views/panel/panel_with_header_sections.html
new file mode 100644
index 0000000000000..4b45eb075dccb
--- /dev/null
+++ b/ui_framework/doc_site/src/views/panel/panel_with_header_sections.html
@@ -0,0 +1,19 @@
+<div class="kuiPanel kuiPanel--withHeader">
+  <div class="kuiPanelHeader">
+    <div class="kuiPanelHeaderSection">
+      <div class="kuiPanelHeader__title">
+        Panel title
+      </div>
+    </div>
+
+    <div class="kuiPanelHeaderSection">
+      <div class="kuiText">
+        Some stuff in the header
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiPanelBody">
+    <p>Content goes here</p>
+  </div>
+</div>

From e98efa9266b40fc284f0d2a3e5c31d421e4783a6 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Mon, 27 Feb 2017 14:56:45 +0100
Subject: [PATCH 058/150] show buckets from top to bottom in horizontal bar
 chart (#10464)

* fixing #10426

* fixing based on review
---
 src/ui/public/vislib/lib/axis/axis_config.js       |  4 ++++
 .../public/vislib/visualizations/point_series.js   | 14 ++++++++------
 .../visualizations/point_series/column_chart.js    |  4 ++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/ui/public/vislib/lib/axis/axis_config.js b/src/ui/public/vislib/lib/axis/axis_config.js
index 9589ca47295a8..8bd2bf74a6018 100644
--- a/src/ui/public/vislib/lib/axis/axis_config.js
+++ b/src/ui/public/vislib/lib/axis/axis_config.js
@@ -132,6 +132,10 @@ export default function AxisConfigFactory() {
         this._values.labels.truncate = _.get(axisConfigArgs, 'labels.truncate', 100);
       }
 
+      if (this.get('type') === 'category' && !this.isHorizontal()) {
+        this._values.scale.inverted = _.get(axisConfigArgs, 'scale.inverted', true);
+      }
+
       let offset;
       let stacked = true;
       switch (this.get('scale.mode')) {
diff --git a/src/ui/public/vislib/visualizations/point_series.js b/src/ui/public/vislib/visualizations/point_series.js
index f9155f140ced9..dad22e48cfaf4 100644
--- a/src/ui/public/vislib/visualizations/point_series.js
+++ b/src/ui/public/vislib/visualizations/point_series.js
@@ -105,19 +105,21 @@ export default function PointSeriesFactory(Private) {
       // outside of them so we will use these values rather than ordered.min/max
       const oneUnit = (ordered.units || _.identity)(1);
 
+      const drawInverted = isHorizontal || xAxis.axisConfig.get('scale.inverted', false);
+      const size = isHorizontal ? width : height;
       // points on this axis represent the amount of time they cover,
       // so draw the endzones at the actual time bounds
       const leftEndzone = {
-        x: isHorizontal ? 0 : Math.max(xScale(ordered.min), 0),
-        w: isHorizontal ? Math.max(xScale(ordered.min), 0) : height - Math.max(xScale(ordered.min), 0)
+        x: drawInverted ? 0 : Math.max(xScale(ordered.min), 0),
+        w: drawInverted ? Math.max(xScale(ordered.min), 0) : height - Math.max(xScale(ordered.min), 0)
       };
 
       const expandLastBucket = xAxis.axisConfig.get('scale.expandLastBucket');
       const rightLastVal = expandLastBucket ? ordered.max : Math.min(ordered.max, _.last(xAxis.values));
       const rightStart = rightLastVal + oneUnit;
       const rightEndzone = {
-        x: isHorizontal ? xScale(rightStart) : 0,
-        w: isHorizontal ? Math.max(width - xScale(rightStart), 0) : xScale(rightStart)
+        x: drawInverted ? xScale(rightStart) : 0,
+        w: drawInverted ? Math.max(size - xScale(rightStart), 0) : xScale(rightStart)
       };
 
       this.endzones = svg.selectAll('.layer')
@@ -147,8 +149,8 @@ export default function PointSeriesFactory(Private) {
         const wholeBucket = boundData && boundData.x != null;
 
         // the min and max that the endzones start in
-        const min = isHorizontal ? leftEndzone.w : rightEndzone.w;
-        const max = isHorizontal ? rightEndzone.x : leftEndzone.x;
+        const min = drawInverted ? leftEndzone.w : rightEndzone.w;
+        const max = drawInverted ? rightEndzone.x : leftEndzone.x;
 
         // bounds of the cursor to consider
         let xLeft = isHorizontal ? mouseChartXCoord : mouseChartYCoord;
diff --git a/src/ui/public/vislib/visualizations/point_series/column_chart.js b/src/ui/public/vislib/visualizations/point_series/column_chart.js
index 54b6db3bb6c58..6e2f844a1c018 100644
--- a/src/ui/public/vislib/visualizations/point_series/column_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/column_chart.js
@@ -101,7 +101,7 @@ export default function ColumnChartFactory(Private) {
       if (isTimeScale) {
         const { min, interval } = this.handler.data.get('ordered');
         let groupWidth = xScale(min + interval) - xScale(min);
-        if (!isHorizontal) groupWidth *= -1;
+        groupWidth = Math.abs(groupWidth);
         const groupSpacing = groupWidth * groupSpacingPercentage;
 
         barWidth = (groupWidth - groupSpacing) / groupCount;
@@ -166,7 +166,7 @@ export default function ColumnChartFactory(Private) {
       if (isTimeScale) {
         const { min, interval } = this.handler.data.get('ordered');
         let groupWidth = xScale(min + interval) - xScale(min);
-        if (!isHorizontal) groupWidth *= -1;
+        groupWidth = Math.abs(groupWidth);
         const groupSpacing = groupWidth * groupSpacingPercentage;
 
         barWidth = (groupWidth - groupSpacing) / groupCount;

From 38ca17435f380b63a9f5460bdd8b8cf79da666b1 Mon Sep 17 00:00:00 2001
From: Jason Tedor <jason@tedor.me>
Date: Mon, 27 Feb 2017 12:20:59 -0500
Subject: [PATCH 059/150] Correct display of warning header (#10470)

* Correct display of warning header

Elasticsearch produces warning headers for the use of deprecated
features. These warning headers can contain commas which breaks the
splitting of multiple values on commas. Upstream Elasticsearch has
changed the warning headers to be specification compliant so that these
headers can be safely split (the warning text and warning date must be
quoted, so splits should only occur on commas that are not contained in
quotes). Additionally, the upstream change includes additional details
that are not needed for display in Console (a warning code, the
Elasticsearch version that produced the warning, and the warning
date). This commit corrects the splitting logic in Console to only split
on commas not contained in quotes, and to extract the warning text from
each warning header.

* Safer regex handling

If the warning header from Elasticsearch comes back in the wrong format,
this could lead to the regex not matching which would lead to a
blow-up. While Elasticsearch should not do this, let us be defensive
here.

* Stricter handling of warning headers

* Add tests for deprecation messages
---
 src/core_plugins/console/public/src/input.js  |  7 +---
 src/core_plugins/console/public/src/utils.js  | 40 +++++++++++++++++++
 .../console/public/tests/src/utils_tests.js   | 32 +++++++++++++++
 3 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/core_plugins/console/public/src/input.js b/src/core_plugins/console/public/src/input.js
index afb869e0c26be..d210816123963 100644
--- a/src/core_plugins/console/public/src/input.js
+++ b/src/core_plugins/console/public/src/input.js
@@ -178,13 +178,10 @@ export function initializeInput($el, $actionsEl, $copyAsCurlEl, output) {
 
             var warnings = xhr.getResponseHeader("warning");
             if (warnings) {
-              warnings = _.map(warnings.split(", "), function (warning) {
-                  return "#! Deprecation: " + warning;
-              });
-              value = warnings.join("\n") + "\n" + value;
+              var deprecationMessages = utils.extractDeprecationMessages(warnings);
+              value = deprecationMessages.join("\n") + "\n" + value;
             }
 
-
             if (isMultiRequest) {
               value = "# " + req.method + " " + req.url + "\n" + value;
             }
diff --git a/src/core_plugins/console/public/src/utils.js b/src/core_plugins/console/public/src/utils.js
index 9759686628002..d15086db01b6b 100644
--- a/src/core_plugins/console/public/src/utils.js
+++ b/src/core_plugins/console/public/src/utils.js
@@ -56,4 +56,44 @@ utils.expandLiteralStrings = function (data) {
   });
 }
 
+utils.extractDeprecationMessages = function (warnings) {
+  // pattern for valid warning header
+  var re = /\d{3} [0-9a-zA-Z!#$%&'*+-.^_`|~]+ \"((?:\t| |!|[\x23-\x5b]|[\x5d-\x7e]|[\x80-\xff]|\\\\|\\")*)\"(?: \"[^"]*\")/
+  // split on any comma that is followed by an even number of quotes
+  return _.map(utils.splitOnUnquotedCommaSpace(warnings), function (warning) {
+    var match = re.exec(warning)
+    // extract the actual warning if there was a match
+    return "#! Deprecation: " + (match !== null ? utils.unescape(match[1]) : warning)
+  });
+}
+
+utils.unescape = function (s) {
+  return s.replace(/\\\\/g, "\\").replace(/\\"/g, "\"")
+}
+
+utils.splitOnUnquotedCommaSpace = function (s) {
+  var quoted = false;
+  var arr = [];
+  var buffer = '';
+  var i = 0
+  while (i < s.length) {
+    var token = s.charAt(i++)
+    if (token == '\\' && i < s.length) {
+      token += s.charAt(i++)
+    } else if (token == ',' && i < s.length && s.charAt(i) == ' ') {
+      token += s.charAt(i++);
+    }
+      if (token == '"') {
+        quoted = !quoted
+      } else if (!quoted && token == ', ') {
+        arr.push(buffer);
+        buffer = '';
+        continue
+      }
+      buffer += token;
+  }
+  arr.push(buffer)
+  return arr;
+}
+
 module.exports = utils;
diff --git a/src/core_plugins/console/public/tests/src/utils_tests.js b/src/core_plugins/console/public/tests/src/utils_tests.js
index cfc17212188c2..ab81cbee1d146 100644
--- a/src/core_plugins/console/public/tests/src/utils_tests.js
+++ b/src/core_plugins/console/public/tests/src/utils_tests.js
@@ -33,4 +33,36 @@ _.each(expandingTests.split(/^=+$/m), function (fixture) {
   test("Literal expand - " + name, function () {
     deepEqual(utils.expandLiteralStrings(collapsed), expanded);
   });
+
+  test("extract deprecation messages", function () {
+    deepEqual(utils.extractDeprecationMessages(
+      '299 Elasticsearch-6.0.0-alpha1-SNAPSHOT-abcdef1 "this is a warning" "Mon, 27 Feb 2017 14:52:14 GMT"'),
+      ['#! Deprecation: this is a warning']);
+    deepEqual(utils.extractDeprecationMessages(
+      '299 Elasticsearch-6.0.0-alpha1-SNAPSHOT-abcdef1 "this is a warning" "Mon, 27 Feb 2017 14:52:14 GMT", 299 Elasticsearch-6.0.0-alpha1-SNAPSHOT-abcdef1 "this is a second warning" "Mon, 27 Feb 2017 14:52:14 GMT"'),
+      ['#! Deprecation: this is a warning', '#! Deprecation: this is a second warning']);
+    deepEqual(utils.extractDeprecationMessages(
+      '299 Elasticsearch-6.0.0-alpha1-SNAPSHOT-abcdef1 "this is a warning, and it includes a comma" "Mon, 27 Feb 2017 14:52:14 GMT"'),
+      ['#! Deprecation: this is a warning, and it includes a comma']);
+    deepEqual(utils.extractDeprecationMessages(
+      '299 Elasticsearch-6.0.0-alpha1-SNAPSHOT-abcdef1 "this is a warning, and it includes an escaped backslash \\\\ and a pair of \\\"escaped quotes\\\"" "Mon, 27 Feb 2017 14:52:14 GMT"'),
+      ['#! Deprecation: this is a warning, and it includes an escaped backslash \\ and a pair of "escaped quotes"']);
+  });
+
+  test("unescape", function () {
+    deepEqual(utils.unescape('escaped backslash \\\\'), 'escaped backslash \\');
+    deepEqual(utils.unescape('a pair of \\\"escaped quotes\\\"'), 'a pair of "escaped quotes"');
+    deepEqual(utils.unescape('escaped quotes do not have to come in pairs: \\\"'), 'escaped quotes do not have to come in pairs: "');
+  });
+
+  test("split on unquoted comma followed by space", function () {
+    deepEqual(utils.splitOnUnquotedCommaSpace('a, b'), ['a', 'b']);
+    deepEqual(utils.splitOnUnquotedCommaSpace('a,b, c'), ['a,b', 'c']);
+    deepEqual(utils.splitOnUnquotedCommaSpace('"a, b"'), ['"a, b"']);
+    deepEqual(utils.splitOnUnquotedCommaSpace('"a, b", c'), ['"a, b"', 'c']);
+    deepEqual(utils.splitOnUnquotedCommaSpace('"a, b\\", c"'), ['"a, b\\", c"']);
+    deepEqual(utils.splitOnUnquotedCommaSpace(', a, b'), ['', 'a', 'b']);
+    deepEqual(utils.splitOnUnquotedCommaSpace('a, b, '), ['a', 'b', '']);
+    deepEqual(utils.splitOnUnquotedCommaSpace('\\"a, b", "c, d\\", e", f"'), ['\\"a', 'b", "c', 'd\\"', 'e", f"']);
+  });
 });

From 327fef365ff830f23e9d931037615b484fa91c9d Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Mon, 27 Feb 2017 18:28:44 +0100
Subject: [PATCH 060/150] fixing heatmap rotate checkbox (#10333)

* fixing heatmap rotate checkbox

* updating based on thomas review
---
 .../public/controls/heatmap_options.js                    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js
index a787129b91979..5ffd1fb924e4c 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js
@@ -9,17 +9,17 @@ module.directive('heatmapOptions', function () {
     template: heatmapOptionsTemplate,
     replace: true,
     link: function ($scope) {
+      const verticalRotation = 270;
       $scope.showColorRange = false;
       $scope.showLabels = false;
       $scope.customColors = false;
+      $scope.valueAxis = $scope.vis.params.valueAxes[0];
       $scope.options = {
-        rotateLabels: false
+        rotateLabels: $scope.valueAxis.labels.rotate === verticalRotation
       };
 
-      $scope.valueAxis = $scope.vis.params.valueAxes[0];
-
       $scope.$watch('options.rotateLabels', rotate => {
-        $scope.vis.params.valueAxes[0].labels.rotate = rotate ? 270 : 0;
+        $scope.valueAxis.labels.rotate = rotate ? verticalRotation : 0;
       });
 
       $scope.resetColors = function () {

From 809719d3543cf2c749925e2baed40a5cdfa7c001 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Mon, 27 Feb 2017 18:47:04 +0100
Subject: [PATCH 061/150] remove custom label for terms order agg and parent
 pipeline agg metrics and fix excluded pipeline aggs (#10506)

* allowing to hide custom label

* hiding custom label on terms order by

* hiding custom label on parent pipeline aggs metrics

* adding tests
---
 .../visualize/editor/__tests__/agg_params.js  | 108 ++++++++++++++++++
 .../public/visualize/editor/agg_params.js     |   3 +
 src/ui/public/agg_types/buckets/terms.js      |   6 +-
 .../metrics/lib/parent_pipeline_agg_helper.js |   1 +
 4 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 src/core_plugins/kibana/public/visualize/editor/__tests__/agg_params.js

diff --git a/src/core_plugins/kibana/public/visualize/editor/__tests__/agg_params.js b/src/core_plugins/kibana/public/visualize/editor/__tests__/agg_params.js
new file mode 100644
index 0000000000000..a5ca3aed06142
--- /dev/null
+++ b/src/core_plugins/kibana/public/visualize/editor/__tests__/agg_params.js
@@ -0,0 +1,108 @@
+
+import angular from 'angular';
+import _ from 'lodash';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import 'plugins/kibana/visualize/editor/agg_params';
+import VisProvider from 'ui/vis';
+import VisAggConfigProvider from 'ui/vis/agg_config';
+import VisSchemasProvider from 'ui/vis/schemas';
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+
+
+describe('Vis-Editor-Agg-Params plugin directive', function () {
+  let $parentScope = {};
+  let Vis;
+  let vis;
+  let AggConfig;
+  let Schemas;
+  let $scope;
+  let $elem;
+  let compile;
+  let rootScope;
+
+  const aggFilter = [
+    '!top_hits', '!percentiles', '!median', '!std_dev',
+    '!derivative', '!cumulative_sum', '!moving_avg', '!serial_diff'
+  ];
+
+  let indexPattern;
+  let orderAggSchema;
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function (Private, $rootScope, $compile) {
+    rootScope = $rootScope;
+    compile = $compile;
+
+    Vis = Private(VisProvider);
+    indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
+    Schemas = Private(VisSchemasProvider);
+    AggConfig = Private(VisAggConfigProvider);
+  }));
+
+  function init(config) {
+    $parentScope = {};
+    _.defaults($parentScope, rootScope, Object.getPrototypeOf(rootScope));
+
+    orderAggSchema = (new Schemas([config])).all[0];
+    $parentScope.groupName = 'metrics';
+
+    const state = {
+      schema: orderAggSchema,
+      type: 'count'
+    };
+
+    vis = new Vis(indexPattern, {
+      type: 'histogram',
+      aggs: [
+        {
+          type: 'date_histogram',
+          schema: 'segment'
+        }
+      ]
+    });
+
+    $parentScope.agg = new AggConfig(vis, state);
+
+    // make the element
+    $elem = angular.element(
+      `<vis-editor-agg-params agg="agg" group-name="groupName"></vis-editor-agg-params>`
+    );
+
+    // compile the html
+    compile($elem)($parentScope);
+
+    // Digest everything
+    $elem.scope().$digest();
+  }
+
+  afterEach(function () {
+    $parentScope.$destroy();
+    $parentScope = null;
+  });
+
+  it('should show custom label parameter', function () {
+    init ({
+      group: 'none',
+      name: 'orderAgg',
+      title: 'Order Agg',
+      aggFilter: aggFilter
+    });
+
+    const customLabelElement = $elem.find('label:contains("Custom Label")');
+    expect(customLabelElement.length).to.be(1);
+  });
+
+  it('should hide custom label parameter', function () {
+    init ({
+      group: 'none',
+      name: 'orderAgg',
+      title: 'Order Agg',
+      hideCustomLabel: true,
+      aggFilter: aggFilter
+    });
+
+    const customLabelElement = $elem.find('label:contains("Custom Label")');
+    expect(customLabelElement.length).to.be(0);
+  });
+});
diff --git a/src/core_plugins/kibana/public/visualize/editor/agg_params.js b/src/core_plugins/kibana/public/visualize/editor/agg_params.js
index c1b9baf3c5f29..fef410f26cf95 100644
--- a/src/core_plugins/kibana/public/visualize/editor/agg_params.js
+++ b/src/core_plugins/kibana/public/visualize/editor/agg_params.js
@@ -83,6 +83,9 @@ uiModules
         type.params.forEach(function (param, i) {
           let aggParam;
           let fields;
+          if (agg.schema.hideCustomLabel && param.name === 'customLabel') {
+            return;
+          }
           // if field param exists, compute allowed fields
           if (param.name === 'field') {
             fields = $aggParamEditorsScope.indexedFields;
diff --git a/src/ui/public/agg_types/buckets/terms.js b/src/ui/public/agg_types/buckets/terms.js
index c024e2e4e4f5c..1ff01e548915e 100644
--- a/src/ui/public/agg_types/buckets/terms.js
+++ b/src/ui/public/agg_types/buckets/terms.js
@@ -16,12 +16,16 @@ export default function TermsAggDefinition(Private) {
   const createFilter = Private(AggTypesBucketsCreateFilterTermsProvider);
   const routeBasedNotifier = Private(routeBasedNotifierProvider);
 
-  const aggFilter = ['!top_hits', '!percentiles', '!median', '!std_dev', '!derivative'];
+  const aggFilter = [
+    '!top_hits', '!percentiles', '!median', '!std_dev',
+    '!derivative', '!cumulative_sum', '!moving_avg', '!serial_diff'
+  ];
   const orderAggSchema = (new Schemas([
     {
       group: 'none',
       name: 'orderAgg',
       title: 'Order Agg',
+      hideCustomLabel: true,
       aggFilter: aggFilter
     }
   ])).all[0];
diff --git a/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js b/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
index 12ed05b104a41..b55209b3ad08e 100644
--- a/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
+++ b/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
@@ -16,6 +16,7 @@ const ParentPipelineAggHelperProvider = function (Private) {
       group: 'none',
       name: 'metricAgg',
       title: 'Metric Agg',
+      hideCustomLabel: true,
       aggFilter: metricAggFilter
     }
   ])).all[0];

From 0ce64bdbd5fa0019a4eb56c12c3405a38aa078da Mon Sep 17 00:00:00 2001
From: Brandon Kobel <brandon.kobel@gmail.com>
Date: Mon, 27 Feb 2017 13:01:29 -0500
Subject: [PATCH 062/150] Fixing misspelling in dashboard notifications
 (#10593)

---
 src/core_plugins/kibana/public/dashboard/dashboard.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js
index fd5175c303c9a..b6600c58bd7ff 100644
--- a/src/core_plugins/kibana/public/dashboard/dashboard.js
+++ b/src/core_plugins/kibana/public/dashboard/dashboard.js
@@ -127,13 +127,13 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
       $scope.addVis = function (hit) {
         pendingVisCount++;
         dashboardState.addNewPanel(hit.id, 'visualization');
-        notify.info(`Visualization successfully added to your dashbard`);
+        notify.info(`Visualization successfully added to your dashboard`);
       };
 
       $scope.addSearch = function (hit) {
         pendingVisCount++;
         dashboardState.addNewPanel(hit.id, 'search');
-        notify.info(`Search successfully added to your dashbard`);
+        notify.info(`Search successfully added to your dashboard`);
       };
 
       $scope.showEditHelpText = () => {

From a6246e5a470b95aee86dd668e8742c08008f6a70 Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Mon, 27 Feb 2017 14:23:57 -0500
Subject: [PATCH 063/150] CSS fix for scrollable doc table in FireFox (#10592)

* CSS fix for scrollable doc table in FireFox

* add comments
---
 src/ui/public/doc_table/doc_table.html |  1 +
 src/ui/public/doc_table/doc_table.less | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/ui/public/doc_table/doc_table.html b/src/ui/public/doc_table/doc_table.html
index c44694385c961..0982da325518b 100644
--- a/src/ui/public/doc_table/doc_table.html
+++ b/src/ui/public/doc_table/doc_table.html
@@ -1,4 +1,5 @@
 <div
+  class="doc-table-container"
   ng-if="hits.length"
   ng-class="{ loading: searchSource.activeFetchCount > 0 }">
   <paginate ng-if="!infiniteScroll" list="hits" per-page="50" top-controls="true">
diff --git a/src/ui/public/doc_table/doc_table.less b/src/ui/public/doc_table/doc_table.less
index 1bdaa5c171277..7c3277979640b 100644
--- a/src/ui/public/doc_table/doc_table.less
+++ b/src/ui/public/doc_table/doc_table.less
@@ -1,8 +1,20 @@
 @import (reference) "~ui/styles/variables";
 
+/**
+ * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height.
+ */
 doc-table {
   overflow: auto;
   flex: 1 1 100%;
+  flex-direction: column; /* 1 */
+
+  /**
+   * 1. Allow user to scroll table when its constrained by a fixed container height.
+   */
+  .doc-table-container {
+    flex: 1 1 0; /* 1 */
+    overflow: auto; /* 1 */
+  }
 
   .discover-table-datafield {
     white-space: pre-wrap;

From 805cac2ddeb7edc773f6fc8e2a1ab23ff01d38d8 Mon Sep 17 00:00:00 2001
From: Spencer <spalger@users.noreply.github.com>
Date: Mon, 27 Feb 2017 14:37:46 -0700
Subject: [PATCH 064/150] [functional tests] implement clickTestSubject helper
 (#10576)

Calling `.findTestSubject().click()` seems to be particularly error prone. This helper combines to the two actions and wraps them in a retry so we don't have to keep scattering `PageObject.common.try()` calls throughout the tests.
---
 test/support/page_objects/common.js         |  6 +++++
 test/support/page_objects/console_page.js   | 12 +++------
 test/support/page_objects/dashboard_page.js | 12 ++++-----
 test/support/page_objects/discover_page.js  | 29 ++++++++-------------
 test/support/page_objects/header_page.js    |  3 +--
 test/support/page_objects/settings_page.js  | 16 +++++-------
 test/support/page_objects/visualize_page.js |  6 ++---
 7 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/test/support/page_objects/common.js b/test/support/page_objects/common.js
index 49f7d1022a963..b1e2623e95bc4 100644
--- a/test/support/page_objects/common.js
+++ b/test/support/page_objects/common.js
@@ -299,6 +299,12 @@ export default class Common {
     return exists;
   }
 
+  async clickTestSubject(selector) {
+    return await Try.try(async () => {
+      await this.findTestSubject(selector).click();
+    });
+  }
+
   findTestSubject(selector, timeout = defaultFindTimeout) {
     this.debug('in findTestSubject: ' + testSubjSelector(selector));
     let originalFindTimeout = null;
diff --git a/test/support/page_objects/console_page.js b/test/support/page_objects/console_page.js
index 4bea0fff6b633..c20ead0b4afda 100644
--- a/test/support/page_objects/console_page.js
+++ b/test/support/page_objects/console_page.js
@@ -31,18 +31,15 @@ export default class ConsolePage {
   }
 
   async clickPlay() {
-    const sendRequestButton = await PageObjects.common.findTestSubject('send-request-button');
-    await sendRequestButton.click();
+    await PageObjects.common.clickTestSubject('send-request-button');
   }
 
   async collapseHelp() {
-    const closeButton = await PageObjects.common.findTestSubject('help-close-button');
-    await closeButton.click();
+    await PageObjects.common.clickTestSubject('help-close-button');
   }
 
   async openSettings() {
-    const settingsButton = await PageObjects.common.findTestSubject('consoleSettingsButton');
-    await settingsButton.click();
+    await PageObjects.common.clickTestSubject('consoleSettingsButton');
   }
 
   async setFontSizeSetting(newSize) {
@@ -56,8 +53,7 @@ export default class ConsolePage {
       await fontSizeInput.type(String(newSize));
     });
 
-    const saveButton = await PageObjects.common.findTestSubject('settings-save-button');
-    await saveButton.click();
+    await PageObjects.common.clickTestSubject('settings-save-button');
   }
 
   async getFontSize(editor) {
diff --git a/test/support/page_objects/dashboard_page.js b/test/support/page_objects/dashboard_page.js
index 261bd00233998..67a3515d7e5fa 100644
--- a/test/support/page_objects/dashboard_page.js
+++ b/test/support/page_objects/dashboard_page.js
@@ -51,15 +51,15 @@ export default class DashboardPage {
   }
 
   clickNewDashboard() {
-    return PageObjects.common.findTestSubject('newDashboardLink').click();
+    return PageObjects.common.clickTestSubject('newDashboardLink');
   }
 
   clickAddVisualization() {
-    return PageObjects.common.findTestSubject('dashboardAddPanelButton').click();
+    return PageObjects.common.clickTestSubject('dashboardAddPanelButton');
   }
 
   clickOptions() {
-    return PageObjects.common.findTestSubject('dashboardOptionsButton').click();
+    return PageObjects.common.clickTestSubject('dashboardOptionsButton');
   }
 
   isOptionsOpen() {
@@ -71,7 +71,7 @@ export default class DashboardPage {
     PageObjects.common.debug('openOptions');
     const isOpen = await this.isOptionsOpen();
     if (!isOpen) {
-      return PageObjects.common.findTestSubject('dashboardOptionsButton').click();
+      return PageObjects.common.clickTestSubject('dashboardOptionsButton');
     }
   }
 
@@ -86,7 +86,7 @@ export default class DashboardPage {
     await this.openOptions();
     const isDarkThemeOn = await this.isDarkThemeOn();
     if (isDarkThemeOn !== on) {
-      return PageObjects.common.findTestSubject('dashboardDarkThemeCheckbox').click();
+      return PageObjects.common.clickTestSubject('dashboardDarkThemeCheckbox');
     }
   }
 
@@ -161,7 +161,7 @@ export default class DashboardPage {
    * @param saveOptions {{storeTimeWithDashboard: boolean, saveAsNew: boolean}}
    */
   async enterDashboardTitleAndClickSave(dashboardTitle, saveOptions = {}) {
-    await PageObjects.common.findTestSubject('dashboardSaveButton').click();
+    await PageObjects.common.clickTestSubject('dashboardSaveButton');
 
     await PageObjects.header.waitUntilLoadingHasFinished();
 
diff --git a/test/support/page_objects/discover_page.js b/test/support/page_objects/discover_page.js
index f47520c3f935f..950271f5791cf 100644
--- a/test/support/page_objects/discover_page.js
+++ b/test/support/page_objects/discover_page.js
@@ -42,7 +42,7 @@ export default class DiscoverPage {
     })
     .then(() => {
       PageObjects.common.debug('--find save button');
-      return PageObjects.common.findTestSubject('discover-save-search-btn').click();
+      return PageObjects.common.clickTestSubject('discover-save-search-btn');
     });
   }
 
@@ -57,18 +57,15 @@ export default class DiscoverPage {
   }
 
   clickNewSearchButton() {
-    return PageObjects.common.findTestSubject('discoverNewButton')
-    .click();
+    return PageObjects.common.clickTestSubject('discoverNewButton');
   }
 
   clickSaveSearchButton() {
-    return PageObjects.common.findTestSubject('discoverSaveButton')
-    .click();
+    return PageObjects.common.clickTestSubject('discoverSaveButton');
   }
 
   clickLoadSavedSearchButton() {
-    return PageObjects.common.findTestSubject('discoverOpenButton')
-    .click();
+    return PageObjects.common.clickTestSubject('discoverOpenButton');
   }
 
   getCurrentQueryName() {
@@ -225,18 +222,15 @@ export default class DiscoverPage {
   }
 
   clickShare() {
-    return PageObjects.common.findTestSubject('discoverShareButton')
-    .click();
+    return PageObjects.common.clickTestSubject('discoverShareButton');
   }
 
   clickShortenUrl() {
-    return PageObjects.common.findTestSubject('sharedSnapshotShortUrlButton')
-    .click();
+    return PageObjects.common.clickTestSubject('sharedSnapshotShortUrlButton');
   }
 
   clickCopyToClipboard() {
-    return PageObjects.common.findTestSubject('sharedSnapshotCopyButton')
-    .click();
+    return PageObjects.common.clickTestSubject('sharedSnapshotCopyButton');
   }
 
   getShareCaption() {
@@ -293,13 +287,12 @@ export default class DiscoverPage {
   async clickFieldListItemAdd(field) {
     const listEntry = await PageObjects.common.findTestSubject(`field-${field}`);
     await this.remote.moveMouseTo(listEntry);
-    await PageObjects.common.findTestSubject(`fieldToggle-${field}`)
-      .click();
+    await PageObjects.common.clickTestSubject(`fieldToggle-${field}`);
   }
 
   async clickFieldListItemVisualize(field) {
     return await PageObjects.common.try(async () => {
-      await PageObjects.common.findTestSubject('fieldVisualize-' + field).click();
+      await PageObjects.common.clickTestSubject('fieldVisualize-' + field);
     });
   }
 
@@ -320,8 +313,8 @@ export default class DiscoverPage {
   }
 
   async removeAllFilters() {
-    await PageObjects.common.findTestSubject('showFilterActions').click();
-    await PageObjects.common.findTestSubject('removeAllFilters').click();
+    await PageObjects.common.clickTestSubject('showFilterActions');
+    await PageObjects.common.clickTestSubject('removeAllFilters');
   }
 
 
diff --git a/test/support/page_objects/header_page.js b/test/support/page_objects/header_page.js
index 35dfe12136bbd..2a334707e3cd6 100644
--- a/test/support/page_objects/header_page.js
+++ b/test/support/page_objects/header_page.js
@@ -44,8 +44,7 @@ export default class HeaderPage {
 
   clickTimepicker() {
     return PageObjects.common.try(() => {
-      return PageObjects.common.findTestSubject('globalTimepickerButton')
-        .click();
+      return PageObjects.common.clickTestSubject('globalTimepickerButton');
     });
   }
 
diff --git a/test/support/page_objects/settings_page.js b/test/support/page_objects/settings_page.js
index 37e03bf3cb92e..a20f3a63839e3 100644
--- a/test/support/page_objects/settings_page.js
+++ b/test/support/page_objects/settings_page.js
@@ -37,13 +37,13 @@ export default class SettingsPage {
   }
 
   async setAdvancedSettings(propertyName, propertyValue) {
-    await PageObjects.common.findTestSubject('advancedSetting-' + propertyName + '-editButton').click();
+    await PageObjects.common.clickTestSubject('advancedSetting-' + propertyName + '-editButton');
     await PageObjects.header.waitUntilLoadingHasFinished();
     await PageObjects.common.sleep(1000);
     await this.remote.setFindTimeout(defaultFindTimeout)
       .findByCssSelector('option[label="' + propertyValue + '"]').click();
     await PageObjects.header.waitUntilLoadingHasFinished();
-    await PageObjects.common.findTestSubject('advancedSetting-' + propertyName + '-saveButton').click();
+    await PageObjects.common.clickTestSubject('advancedSetting-' + propertyName + '-saveButton');
     await PageObjects.header.waitUntilLoadingHasFinished();
   }
 
@@ -291,8 +291,7 @@ export default class SettingsPage {
     });
     await PageObjects.common.try(async () => {
       PageObjects.common.debug('acceptConfirmation');
-      await PageObjects.common.findTestSubject('confirmModalConfirmButton')
-        .click();
+      await PageObjects.common.clickTestSubject('confirmModalConfirmButton');
     });
     await PageObjects.common.try(async () => {
       const currentUrl = await this.remote.getCurrentUrl();
@@ -305,20 +304,17 @@ export default class SettingsPage {
 
   async clickFieldsTab() {
     PageObjects.common.debug('click Fields tab');
-    await PageObjects.common.findTestSubject('tab-indexFields')
-    .click();
+    await PageObjects.common.clickTestSubject('tab-indexFields');
   }
 
   async clickScriptedFieldsTab() {
     PageObjects.common.debug('click Scripted Fields tab');
-    await PageObjects.common.findTestSubject('tab-scriptedFields')
-    .click();
+    await PageObjects.common.clickTestSubject('tab-scriptedFields');
   }
 
   async clickSourceFiltersTab() {
     PageObjects.common.debug('click Source Filters tab');
-    await PageObjects.common.findTestSubject('tab-sourceFilters')
-    .click();
+    await PageObjects.common.clickTestSubject('tab-sourceFilters');
   }
 
   async addScriptedField(name, language, type, format, popularity, script) {
diff --git a/test/support/page_objects/visualize_page.js b/test/support/page_objects/visualize_page.js
index 90c967bfa0662..25fa023627ec3 100644
--- a/test/support/page_objects/visualize_page.js
+++ b/test/support/page_objects/visualize_page.js
@@ -306,8 +306,7 @@ export default class VisualizePage {
   }
 
   saveVisualization(vizName) {
-    return PageObjects.common.findTestSubject('visualizeSaveButton')
-    .click()
+    return PageObjects.common.clickTestSubject('visualizeSaveButton')
     .then(() => {
       return PageObjects.common.sleep(1000);
     })
@@ -321,8 +320,7 @@ export default class VisualizePage {
     //   // click save button
     .then(() => {
       PageObjects.common.debug('click submit button');
-      return PageObjects.common.findTestSubject('saveVisualizationButton')
-      .click();
+      return PageObjects.common.clickTestSubject('saveVisualizationButton');
     })
     .then(function () {
       return PageObjects.header.waitUntilLoadingHasFinished();

From b3805f7f7858a87cd7fc0e5327f5b64191914a30 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 27 Feb 2017 15:24:02 -0800
Subject: [PATCH 065/150] [UI Framework] Refine Tab focused and selected
 states. (#10560)

* Refine Tab focused state.
* Open up bottom border of selected Tab.
* Remove focus outline when a Tab is selected or active.
* Override Bootstrap styles that affect Tabs.
---
 ui_framework/components/tabs/_tabs.scss | 37 ++++++++++++++--------
 ui_framework/dist/ui_framework.css      | 41 ++++++++++++++++---------
 2 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/ui_framework/components/tabs/_tabs.scss b/ui_framework/components/tabs/_tabs.scss
index 7da2d866f0d98..a051d7448190f 100644
--- a/ui_framework/components/tabs/_tabs.scss
+++ b/ui_framework/components/tabs/_tabs.scss
@@ -5,6 +5,10 @@
 
   /**
    * 1. Override button styles (some of which are from Bootstrap).
+   * 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
+   * 3. Move the tab down so that its bottom border covers the container's bottom border.
+   * 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
+   *    of padding to make sure the text doesn't shift down.
    */
   .kuiTab {
     appearance: none; /* 1 */
@@ -14,33 +18,42 @@
     color: $subduedFontColor;
     background-color: #ffffff; /* 1 */
     border: 1px solid $standoutBackgroundColor;
-    border-bottom: none;
+    border-bottom-width: 2px;
     border-radius: 0; /* 1 */
+    margin-bottom: -2px; /* 3 */
 
     & + & {
       border-left: none;
+
+      &:focus:not(.kuiTab-isSelected):not(:active) {
+        margin-left: -1px; /* 2 */
+      }
+    }
+
+    &:active {
+      outline: none !important; /* 1 */
+      box-shadow: none; /* 1 */
     }
 
     &:focus {
-      color: $linkColor;
+      outline: none; /* 1 */
+    }
+
+    &:focus:not(.kuiTab-isSelected):not(:active) {
       z-index: 1;
-      outline: 1px solid $selectedBorderColor !important; /* 1 */
+      color: $linkColor;
+      border: 1px solid $selectedBorderColor !important;
+      padding-bottom: 11px; /* 4 */
     }
 
     &:hover:not(.kuiTab-isSelected) {
       color: $linkHoverColor;
-    }
-
-    &:active {
-      outline: none;
-      border-color: #ffffff;
-      box-shadow: none; /* 1 */
-      color: $linkColor !important;
+      background-color: #F2F2F2;
     }
 
     &.kuiTab-isSelected {
-      color: $fontColor;
-      background-color: #F2F2F2;
       cursor: default;
+      color: $fontColor;
+      border-bottom-color: #FFFFFF;
     }
   }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index e1442d5fbfd5a..a659390070a5b 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1543,6 +1543,10 @@ body {
 
 /**
    * 1. Override button styles (some of which are from Bootstrap).
+   * 2. Adding a border shifts tabs right by 1px, so we need to shift them back.
+   * 3. Move the tab down so that its bottom border covers the container's bottom border.
+   * 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more
+   *    of padding to make sure the text doesn't shift down.
    */
 .kuiTab {
   -webkit-appearance: none;
@@ -1556,28 +1560,37 @@ body {
   background-color: #ffffff;
   /* 1 */
   border: 1px solid #E4E4E4;
-  border-bottom: none;
+  border-bottom-width: 2px;
   border-radius: 0;
-  /* 1 */ }
+  /* 1 */
+  margin-bottom: -2px;
+  /* 3 */ }
   .kuiTab + .kuiTab {
     border-left: none; }
+    .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
+      margin-left: -1px;
+      /* 2 */ }
+  .kuiTab:active {
+    outline: none !important;
+    /* 1 */
+    box-shadow: none;
+    /* 1 */ }
   .kuiTab:focus {
-    color: #3CAED2;
-    z-index: 1;
-    outline: 1px solid #6EADC1 !important;
+    outline: none;
     /* 1 */ }
+  .kuiTab:focus:not(.kuiTab-isSelected):not(:active) {
+    z-index: 1;
+    color: #3CAED2;
+    border: 1px solid #6EADC1 !important;
+    padding-bottom: 11px;
+    /* 4 */ }
   .kuiTab:hover:not(.kuiTab-isSelected) {
-    color: #006E8A; }
-  .kuiTab:active {
-    outline: none;
-    border-color: #ffffff;
-    box-shadow: none;
-    /* 1 */
-    color: #3CAED2 !important; }
+    color: #006E8A;
+    background-color: #F2F2F2; }
   .kuiTab.kuiTab-isSelected {
+    cursor: default;
     color: #191E23;
-    background-color: #F2F2F2;
-    cursor: default; }
+    border-bottom-color: #FFFFFF; }
 
 .kuiToolBar {
   display: -webkit-box;

From d6bf621258e476d41b7fd1a41707f2d74f784350 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 27 Feb 2017 16:21:49 -0800
Subject: [PATCH 066/150] Update Index Pattern header to use UI Framework
 components. (#10390)

* Update Index Pattern header to use UI Framework components.
* Fix functional tests.
---
 .../management/sections/indices/_edit.html    | 142 +++++++++++++-----
 .../sections/indices/_field_editor.html       |  16 +-
 .../sections/indices/_index_header.html       |  50 ++++--
 .../sections/indices/_index_header.js         |   3 +-
 .../kibana/public/management/styles/main.less |  13 --
 src/ui/public/partials/paginate_controls.html |   6 +-
 test/support/page_objects/settings_page.js    |  25 ++-
 7 files changed, 170 insertions(+), 85 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/sections/indices/_edit.html b/src/core_plugins/kibana/public/management/sections/indices/_edit.html
index 17619cb80be9e..7fc57c464f5b4 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_edit.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/_edit.html
@@ -1,67 +1,129 @@
 <kbn-management-app section="kibana" omit-breadcrumb-pages="['indices']">
   <kbn-management-indices>
-    <div ng-controller="managementIndicesEdit" data-test-subj="editIndexPattern">
-      <div class="page-header">
-        <kbn-management-index-header
-          index-pattern="indexPattern"
-          set-default="setDefaultPattern()"
-          refresh-fields="refreshFields()"
-          delete="removePattern()">
-        </kbn-management-index-header>
+    <div
+      ng-controller="managementIndicesEdit"
+      data-test-subj="editIndexPattern"
+      class="kuiViewContent"
+    >
+      <!-- Header -->
+      <kbn-management-index-header
+        index-pattern="indexPattern"
+        set-default="setDefaultPattern()"
+        refresh-fields="refreshFields()"
+        delete="removePattern()"
+      ></kbn-management-index-header>
+
+      <p class="kuiText kuiVerticalRhythm">
+        This page lists every field in the <strong>{{::indexPattern.id}}</strong>
+        index and the field's associated core type as recorded by Elasticsearch.
+        While this list allows you to view the core type of each field, changing
+        field types must be done using Elasticsearch's
+        <a target="_window" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping.html">
+          Mapping API
+          <i aria-hidden="true" class="fa-link fa"></i>
+        </a>
+      </p>
 
-        <p>
-          This page lists every field in the <strong>{{::indexPattern.id}}</strong>
-          index and the field's associated core type as recorded by Elasticsearch.
-          While this list allows you to view the core type of each field, changing
-          field types must be done using Elasticsearch's
-          <a target="_window" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping.html">
-            Mapping API
-            <i aria-hidden="true" class="fa-link fa"></i>
-          </a>
-        </p>
-        <div ng-if="indexPattern.timeFieldName && indexPattern.intervalName" class="alert alert-info">
-          This index uses a <strong>Time-based index pattern</strong> which repeats <span ng-bind="::indexPattern.getInterval().display"></span>
+      <!-- Alerts -->
+      <div
+        ng-if="indexPattern.timeFieldName && indexPattern.intervalName"
+        class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm"
+      >
+        <div class="kuiInfoPanelHeader">
+          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
+          <span class="kuiInfoPanelHeader__title">
+            Repeating index pattern
+          </span>
         </div>
-        <div ng-if="!indexPattern.canExpandIndices()" class="alert alert-info">
-          This index pattern is set to be queried directly rather than being
-          expanded into more performant searches against individual indices.
+
+        <div class="kuiInfoPanelBody">
+          <div class="kuiInfoPanelBody__message">
+            This index uses a <strong>time-based index pattern</strong> which repeats <span ng-bind="::indexPattern.getInterval().display"></span>
+          </div>
         </div>
-        <div ng-if="conflictFields.length" class="alert alert-warning">
-          <strong>Mapping conflict!</strong> {{conflictFields.length > 1 ? conflictFields.length : 'A'}} field{{conflictFields.length > 1 ? 's' : ''}} {{conflictFields.length > 1 ? 'are' : 'is'}} defined as several types (string, integer, etc) across the indices that match this pattern. You may still be able to use these conflict fields in parts of Kibana, but they will be unavailable for functions that require Kibana to know their type. Correcting this issue will require reindexing your data.
+      </div>
+
+      <div
+        ng-if="!indexPattern.canExpandIndices()"
+        class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm"
+      >
+        <div class="kuiInfoPanelHeader">
+          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
+          <span class="kuiInfoPanelHeader__title">
+            Non-performant index pattern
+          </span>
+        </div>
+
+        <div class="kuiInfoPanelBody">
+          <div class="kuiInfoPanelBody__message">
+            This index pattern is set to be queried directly rather than being
+            expanded into more performant searches against individual indices.
+          </div>
         </div>
       </div>
 
-      <form role="form">
-        <input aria-label="Filter" ng-model="fieldFilter" class="form-control span12" type="text" placeholder="Filter" />
-      </form>
+      <div
+        ng-if="conflictFields.length"
+        class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm"
+      >
+        <div class="kuiInfoPanelHeader">
+          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
+          <span class="kuiInfoPanelHeader__title">
+            Mapping conflict
+          </span>
+        </div>
 
-      <br />
+        <div class="kuiInfoPanelBody">
+          <div class="kuiInfoPanelBody__message">
+            {{conflictFields.length > 1 ? conflictFields.length : 'A'}} field{{conflictFields.length > 1 ? 's' : ''}} {{conflictFields.length > 1 ? 'are' : 'is'}} defined as several types (string, integer, etc) across the indices that match this pattern. You may still be able to use these conflict fields in parts of Kibana, but they will be unavailable for functions that require Kibana to know their type. Correcting this issue will require reindexing your data.
+          </div>
+        </div>
+      </div>
+
+      <!-- Search box -->
+      <form role="form" class="kuiVerticalRhythm">
+        <input
+          aria-label="Filter"
+          ng-model="fieldFilter"
+          class="kuiTextInput fullWidth"
+          type="text"
+          placeholder="Filter"
+        />
+      </form>
 
-      <!-- tab list -->
-      <ul class="nav nav-tabs">
-        <li class="kbn-management-tab" ng-class="{ active: state.tab === editSection.index }" ng-repeat="editSection in editSections"  data-test-subj="li-{{ editSection.index }}">
-          <a ng-click="changeTab(editSection)" data-test-subj="tab-{{ editSection.index }}" >
-            {{ editSection.title }}
-            <small>({{ editSection.count }})</small>
-          </a>
-        </li>
-      </ul>
+      <!-- Tabs -->
+      <div class="kuiTabs kuiVerticalRhythm">
+        <button
+          class="kuiTab"
+          ng-repeat="editSection in editSections"
+          ng-class="{ 'kuiTab-isSelected': state.tab === editSection.index }"
+          title="{{ editSection.title }}"
+          ng-click="changeTab(editSection)"
+          data-test-subj="tab-{{ editSection.index }}"
+        >
+          {{ editSection.title }}
+          <span data-test-subj="tab-count-{{ editSection.index }}">
+            ({{ editSection.count }})
+          </span>
+        </button>
+      </div>
 
-      <!-- tabs -->
+      <!-- Tab content -->
       <indexed-fields
         ng-show="state.tab == 'indexedFields'"
         class="fields indexed-fields"
       ></indexed-fields>
+
       <scripted-fields
         ng-show="state.tab == 'scriptedFields'"
         class="fields scripted-fields"
       ></scripted-fields>
+
       <source-filters
         ng-show="state.tab == 'sourceFilters'"
         index-pattern="indexPattern"
         class="fields source-filters"
       ></source-filters>
-
     </div>
   </kbn-management-indices>
 </kbn-management-app>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_field_editor.html b/src/core_plugins/kibana/public/management/sections/indices/_field_editor.html
index d1427e780f274..bbca7568e79ff 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_field_editor.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/_field_editor.html
@@ -1,13 +1,21 @@
 <kbn-management-app section="kibana">
   <kbn-management-indices>
-    <div class="page-header">
-      <kbn-management-index-header index-pattern="fieldSettings.indexPattern"></kbn-management-index-header>
+    <div class="kuiViewContent">
+      <kbn-management-index-header
+        index-pattern="fieldSettings.indexPattern"
+      ></kbn-management-index-header>
 
-      <h2 ng-if="fieldSettings.mode === 'create'">
+      <h2
+        ng-if="fieldSettings.mode === 'create'"
+        class="kuiSubTitle kuiVerticalRhythm"
+      >
         Create {{ fieldSettings.field.scripted ? 'Scripted ' : '' }}Field
       </h2>
 
-      <h2 ng-if="fieldSettings.mode === 'edit'">
+      <h2
+        ng-if="fieldSettings.mode === 'edit'"
+        class="kuiSubTitle kuiVerticalRhythm"
+      >
         {{ fieldSettings.field.name }}
       </h2>
     </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_index_header.html b/src/core_plugins/kibana/public/management/sections/indices/_index_header.html
index a772d534d10aa..176cd76c68597 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_index_header.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/_index_header.html
@@ -1,33 +1,59 @@
-<div class="index-pattern-name">
-  <h1 class="title" css-truncate>
-    <i aria-hidden="true" ng-if="defaultIndex === indexPattern.id" class="fa fa-star"></i>
-    {{indexPattern.id}}
-  </h1>
-  <div class="controls">
+<div class="kuiBar kuiVerticalRhythm">
+  <div class="kuiBarSection">
+    <!-- Index pattern name -->
+    <h1
+      class="kuiTitle kuiVerticalRhythm"
+      css-truncate
+      data-test-subj="indexPatternTitle"
+    >
+      <span
+        aria-hidden="true"
+        ng-if="defaultIndex === indexPattern.id"
+        class="kuiIcon fa-star"
+      ></span>
+      {{indexPattern.id}}
+    </h1>
+  </div>
+
+  <div class="kuiBarSection">
     <button
       ng-if="setDefault"
       ng-click="setDefault()"
       tooltip="Set as default index"
-      class="btn btn-success">
+      class="kuiButton kuiButton--basic"
+      data-test-subj="setDefaultIndexPatternButton"
+    >
       <span class="sr-only">Set as default index</span>
-      <i aria-hidden="true" class="fa fa-star"></i>
+      <ispan
+        aria-hidden="true"
+        class="kuiIcon fa-star"
+      ></span>
     </button>
     <button
       ng-if="refreshFields"
       ng-click="refreshFields()"
       tooltip="Refresh field list"
-      class="btn btn-warning">
+      class="kuiButton kuiButton--basic"
+    >
       <span class="sr-only">Reload field list</span>
-      <i aria-hidden="true" class="fa fa-refresh"></i>
+      <span
+        aria-hidden="true"
+        class="kuiIcon fa-refresh"
+      ></span>
     </button>
     <button
       ng-if="delete"
       ng-click="delete()"
       aria-label="Remove index pattern"
       tooltip="Remove index pattern"
-      class="btn btn-danger">
+      class="kuiButton kuiButton--danger"
+      data-test-subj="deleteIndexPatternButton"
+    >
       <span class="sr-only">Remove index pattern</span>
-      <i aria-hidden="true" class="fa fa-trash"></i>
+      <span
+        aria-hidden="true"
+        class="kuiIcon fa-trash"
+      ></span>
     </button>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_index_header.js b/src/core_plugins/kibana/public/management/sections/indices/_index_header.js
index a58863b4bb7e1..6bb89ec70bbf0 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_index_header.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/_index_header.js
@@ -6,11 +6,12 @@ uiModules
   return {
     restrict: 'E',
     template: indexHeaderTemplate,
+    replace: true,
     scope: {
       indexPattern: '=',
       setDefault: '&',
       refreshFields: '&',
-      delete: '&'
+      delete: '&',
     },
     link: function ($scope, $el, attrs) {
       $scope.delete = attrs.delete ? $scope.delete : null;
diff --git a/src/core_plugins/kibana/public/management/styles/main.less b/src/core_plugins/kibana/public/management/styles/main.less
index 67b0d8ccd4578..217630c227774 100644
--- a/src/core_plugins/kibana/public/management/styles/main.less
+++ b/src/core_plugins/kibana/public/management/styles/main.less
@@ -183,19 +183,6 @@ kbn-management-objects-view {
       display: inline;
     }
   }
-
-  .index-pattern-name {
-    display: flex;
-    align-items: center;
-
-    .title {
-      flex: 1 1 auto;
-    }
-
-    .controls {
-      flex: 4 0 auto;
-    }
-  }
 }
 
 kbn-management-indices {
diff --git a/src/ui/public/partials/paginate_controls.html b/src/ui/public/partials/paginate_controls.html
index e40c70ba4f544..cc63d865995fc 100644
--- a/src/ui/public/partials/paginate_controls.html
+++ b/src/ui/public/partials/paginate_controls.html
@@ -42,7 +42,11 @@
 <form class="form-inline pagination-size" ng-if="showSelector">
   <div class="form-group">
     <label>Page Size</label>
-    <select ng-model="paginate.perPage" ng-options="opt.value as opt.title for opt in paginate.sizeOptions">
+    <select
+      ng-model="paginate.perPage"
+      ng-options="opt.value as opt.title for opt in paginate.sizeOptions"
+      data-test-subj="paginateControlsPageSizeSelect"
+    >
     </select>
   </div>
 </form>
diff --git a/test/support/page_objects/settings_page.js b/test/support/page_objects/settings_page.js
index a20f3a63839e3..ac277ba645956 100644
--- a/test/support/page_objects/settings_page.js
+++ b/test/support/page_objects/settings_page.js
@@ -97,19 +97,16 @@ export default class SettingsPage {
   }
 
   async clickDefaultIndexButton() {
-    await this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('button.btn.btn-success.ng-scope').click();
+    await PageObjects.common.findTestSubject('setDefaultIndexPatternButton').click();
     await PageObjects.header.waitUntilLoadingHasFinished();
   }
 
   async clickDeletePattern() {
-    await this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('button.btn.btn-danger.ng-scope').click();
+    await PageObjects.common.findTestSubject('deleteIndexPatternButton').click();
   }
 
   getIndexPageHeading() {
-    return this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('h1.title.ng-binding.ng-isolate-scope');
+    return PageObjects.common.findTestSubject('indexPatternTitle');
   }
 
   getConfigureHeader() {
@@ -154,17 +151,17 @@ export default class SettingsPage {
 
   getFieldsTabCount() {
     return PageObjects.common.try(() => {
-      return this.remote.setFindTimeout(defaultFindTimeout / 10)
-      .findByCssSelector('a[data-test-subj="tab-indexedFields"] small').getVisibleText()
-      .then((theText) => {
-      // the value has () around it, remove them
-        return theText.replace(/\((.*)\)/, '$1');
-      });
+      return PageObjects.common.findTestSubject('tab-count-indexedFields')
+        .getVisibleText()
+        .then((theText) => {
+        // the value has () around it, remove them
+          return theText.replace(/\((.*)\)/, '$1');
+        });
     });
   }
 
   async getScriptedFieldsTabCount() {
-    const selector = 'a[data-test-subj="tab-scriptedFields"] small';
+    const selector = '[data-test-subj="tab-count-scriptedFields"]';
     return await PageObjects.common.try(async () => {
       const theText = await this.remote.setFindTimeout(defaultFindTimeout / 10)
       .findByCssSelector(selector).getVisibleText();
@@ -255,7 +252,7 @@ export default class SettingsPage {
 
   async setPageSize(size) {
     await this.remote.setFindTimeout(defaultFindTimeout)
-    .findByCssSelector('form.form-inline.pagination-size.ng-scope.ng-pristine.ng-valid div.form-group option[label="' + size + '"]')
+    .findByCssSelector(`[data-test-subj="paginateControlsPageSizeSelect"] option[label="${size}"]`)
     .click();
     await PageObjects.header.waitUntilLoadingHasFinished();
   }

From 44e7248dbee27ea106af670afc5f59df55f6e090 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Tue, 28 Feb 2017 12:31:10 +0100
Subject: [PATCH 067/150] allowing 0 for extent value (#10528)

* allowing 0 for extent value

* fixing based on review
---
 src/ui/public/vislib/lib/axis/axis_config.js | 8 ++++----
 src/ui/public/vislib/lib/axis/axis_scale.js  | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ui/public/vislib/lib/axis/axis_config.js b/src/ui/public/vislib/lib/axis/axis_config.js
index 8bd2bf74a6018..f473567cf43c6 100644
--- a/src/ui/public/vislib/lib/axis/axis_config.js
+++ b/src/ui/public/vislib/lib/axis/axis_config.js
@@ -159,12 +159,12 @@ export default function AxisConfigFactory() {
     }
 
     get(property, defaults) {
-      if (typeof defaults !== 'undefined' || _.has(this._values, property)) {
-        return _.get(this._values, property, defaults);
-      } else {
+      if (typeof defaults === 'undefined' && !_.has(this._values, property)) {
         throw new Error(`Accessing invalid config property: ${property}`);
-        return defaults;
       }
+      const val = _.get(this._values, property, defaults);
+      if (val == null && defaults != null) return defaults;
+      return val;
     }
 
     set(property, value) {
diff --git a/src/ui/public/vislib/lib/axis/axis_scale.js b/src/ui/public/vislib/lib/axis/axis_scale.js
index a2c6920716945..d417f97a35026 100644
--- a/src/ui/public/vislib/lib/axis/axis_scale.js
+++ b/src/ui/public/vislib/lib/axis/axis_scale.js
@@ -126,8 +126,8 @@ export default function AxisScaleFactory(Private) {
         if (this.axisConfig.isOrdinal()) return this.values;
       }
 
-      const min = this.axisConfig.get('scale.min') || this.getYMin();
-      const max = this.axisConfig.get('scale.max') || this.getYMax();
+      const min = this.axisConfig.get('scale.min', this.getYMin());
+      const max = this.axisConfig.get('scale.max', this.getYMax());
       const domain = [min, max];
       if (this.axisConfig.isUserDefined()) return this.validateUserExtents(domain);
       if (this.axisConfig.isLogScale()) return this.logDomain(min, max);

From b5180a01dcf100df0fc402b9669ab82b4c4c6267 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 28 Feb 2017 16:01:09 -0800
Subject: [PATCH 068/150] Force kuiLink to have cursor pointer, even if there's
 no href. (#10625)

---
 ui_framework/components/link/_link.scss | 4 ++++
 ui_framework/dist/ui_framework.css      | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui_framework/components/link/_link.scss b/ui_framework/components/link/_link.scss
index 714ede2c05401..de6dc4c2995a9 100644
--- a/ui_framework/components/link/_link.scss
+++ b/ui_framework/components/link/_link.scss
@@ -1,6 +1,10 @@
+/**
+ * 1. Enforce pointer when there's no href.
+ */
 .kuiLink {
   color: $linkColor;
   text-decoration: none;
+  cursor: pointer; /* 1 */
 
   &:visited,
   &:active {
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index a659390070a5b..ab1000f54b1a2 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -622,9 +622,14 @@ body {
   font-size: 14px;
   line-height: 1.5; }
 
+/**
+ * 1. Enforce pointer when there's no href.
+ */
 .kuiLink {
   color: #3CAED2;
-  text-decoration: none; }
+  text-decoration: none;
+  cursor: pointer;
+  /* 1 */ }
   .kuiLink:visited, .kuiLink:active {
     color: #3CAED2; }
   .kuiLink:hover {

From e85a38e15d77cf01fb4151bf8c9d1447268d9545 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 28 Feb 2017 16:04:12 -0800
Subject: [PATCH 069/150] [UI Framework] Add ToggleButton component and add
 example of expanded row to Table example (#10623)

* Add ToggleButton component and add example of expanded row to Table example.
---
 ui_framework/components/index.scss            |  1 +
 ui_framework/components/link/_link.scss       |  2 +-
 ui_framework/components/table/_table.scss     |  8 ++++
 .../components/toggle_button/_index.scss      |  1 +
 .../toggle_button/_toggle_button.scss         | 31 ++++++++++++++
 ui_framework/dist/ui_framework.css            | 41 +++++++++++++++++++
 .../doc_site/src/services/routes/routes.js    |  6 +++
 .../doc_site/src/views/table/table.html       | 19 ++++++++-
 .../src/views/table/table_example.jsx         |  4 ++
 .../views/toggle_button/toggle_button.html    |  4 ++
 .../src/views/toggle_button/toggle_button.js  | 17 ++++++++
 .../toggle_button/toggle_button_example.jsx   | 37 +++++++++++++++++
 12 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 ui_framework/components/toggle_button/_index.scss
 create mode 100644 ui_framework/components/toggle_button/_toggle_button.scss
 create mode 100644 ui_framework/doc_site/src/views/toggle_button/toggle_button.html
 create mode 100644 ui_framework/doc_site/src/views/toggle_button/toggle_button.js
 create mode 100644 ui_framework/doc_site/src/views/toggle_button/toggle_button_example.jsx

diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss
index 11c0b1829c405..fbfe9c4ee05dd 100644
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@@ -261,6 +261,7 @@ body {
 @import "status_text/index";
 @import "table/index";
 @import "tabs/index";
+@import "toggle_button/index";
 @import "tool_bar/index";
 @import "typography/index";
 @import "vertical_rhythm/index";
diff --git a/ui_framework/components/link/_link.scss b/ui_framework/components/link/_link.scss
index de6dc4c2995a9..a45b44f7d7096 100644
--- a/ui_framework/components/link/_link.scss
+++ b/ui_framework/components/link/_link.scss
@@ -8,7 +8,7 @@
 
   &:visited,
   &:active {
-    color: #3CAED2;
+    color: $linkColor;
   }
 
   &:hover {
diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
index 42ed81c169f66..16de909879111 100644
--- a/ui_framework/components/table/_table.scss
+++ b/ui_framework/components/table/_table.scss
@@ -80,6 +80,14 @@ $tableCellPadding: 7px 8px 8px;
   border-top: $tableRowBorder;
 }
 
+/**
+ * 1. We don't want to create too strong a disconnect between the original row and the row
+ *    that contains its expanded details.
+ */
+.kuiTableRowCell--expanded {
+  border-top-color: #f0f0f0; /* 1 */
+}
+
   /**
    * 1. Vertically align all children.
    * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If
diff --git a/ui_framework/components/toggle_button/_index.scss b/ui_framework/components/toggle_button/_index.scss
new file mode 100644
index 0000000000000..e14ad76356a22
--- /dev/null
+++ b/ui_framework/components/toggle_button/_index.scss
@@ -0,0 +1 @@
+@import "toggle_button";
diff --git a/ui_framework/components/toggle_button/_toggle_button.scss b/ui_framework/components/toggle_button/_toggle_button.scss
new file mode 100644
index 0000000000000..c81b744e5d361
--- /dev/null
+++ b/ui_framework/components/toggle_button/_toggle_button.scss
@@ -0,0 +1,31 @@
+/**
+ * 1. Allow container to deteermine font-size and line-height.
+ * 2. Override inherited Bootstrap styles.
+ */
+.kuiToggleButton {
+  appearance: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  font-size: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: $linkColor;
+
+  &:active {
+    color: $linkColor !important; /* 2 */
+  }
+
+  &:hover {
+    color: $linkHoverColor !important; /* 2 */
+    text-decoration: underline;
+  }
+}
+
+  /**
+   * 1. Make icon a consistent width so the text doesn't get pushed around as the icon changes
+   *    between "expand" and "collapse". Use ems to be relative to inherited font-size.
+   */
+  .kuiToggleButton__icon {
+    width: 0.8em; /* 1 */
+  }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index ab1000f54b1a2..2a619b96fcc60 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1497,6 +1497,14 @@ body {
   color: #191E23;
   border-top: 1px solid #E4E4E4; }
 
+/**
+ * 1. We don't want to create too strong a disconnect between the original row and the row
+ *    that contains its expanded details.
+ */
+.kuiTableRowCell--expanded {
+  border-top-color: #f0f0f0;
+  /* 1 */ }
+
 /**
    * 1. Vertically align all children.
    * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If
@@ -1597,6 +1605,39 @@ body {
     color: #191E23;
     border-bottom-color: #FFFFFF; }
 
+/**
+ * 1. Allow container to deteermine font-size and line-height.
+ * 2. Override inherited Bootstrap styles.
+ */
+.kuiToggleButton {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: #3CAED2; }
+  .kuiToggleButton:active {
+    color: #3CAED2 !important;
+    /* 2 */ }
+  .kuiToggleButton:hover {
+    color: #006E8A !important;
+    /* 2 */
+    text-decoration: underline; }
+
+/**
+   * 1. Make icon a consistent width so the text doesn't get pushed around as the icon changes
+   *    between "expand" and "collapse". Use ems to be relative to inherited font-size.
+   */
+.kuiToggleButton__icon {
+  width: 0.8em;
+  /* 1 */ }
+
 .kuiToolBar {
   display: -webkit-box;
   display: -webkit-flex;
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index b4fdcb0a35323..8bda0a70ee23b 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -60,6 +60,9 @@ import TableExample
 import TabsExample
   from '../../views/tabs/tabs_example.jsx';
 
+import ToggleButtonExample
+  from '../../views/toggle_button/toggle_button_example.jsx';
+
 import ToolBarExample
   from '../../views/tool_bar/tool_bar_example.jsx';
 
@@ -127,6 +130,9 @@ const components = [{
 }, {
   name: 'Tabs',
   component: TabsExample,
+}, {
+  name: 'ToggleButton',
+  component: ToggleButtonExample,
 }, {
   name: 'ToolBar',
   component: ToolBarExample,
diff --git a/ui_framework/doc_site/src/views/table/table.html b/ui_framework/doc_site/src/views/table/table.html
index 04df684f61011..4f6de69600760 100644
--- a/ui_framework/doc_site/src/views/table/table.html
+++ b/ui_framework/doc_site/src/views/table/table.html
@@ -60,7 +60,11 @@
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <a class="kuiLink" href="#">Boomerang</a>
+          <button class="kuiToggleButton">
+            <span class="kuiToggleButton__icon kuiIcon fa-caret-down"></span>
+            Boomerang
+          </button>
+
         </div>
       </td>
       <td class="kuiTableRowCell">
@@ -80,6 +84,19 @@
       </td>
     </tr>
 
+    <tr class="kuiTableRow">
+      <td class="kuiTableRowCell kuiTableRowCell--expanded" colspan="5">
+        <div class="kuiTableRowCell__liner">
+          <h3 class="kuiSubTitle">
+            Boomerang
+          </h3>
+          <p class="kuiText">
+            All kinds of crazy information about boomerangs could go in here.
+          </p>
+        </div>
+      </td>
+    </tr>
+
     <tr class="kuiTableRow">
       <td class="kuiTableRowCell kuiTableRowCell--checkBox">
         <div class="kuiTableRowCell__liner">
diff --git a/ui_framework/doc_site/src/views/table/table_example.jsx b/ui_framework/doc_site/src/views/table/table_example.jsx
index c2e0c3fa0a208..aea908556490f 100644
--- a/ui_framework/doc_site/src/views/table/table_example.jsx
+++ b/ui_framework/doc_site/src/views/table/table_example.jsx
@@ -33,6 +33,10 @@ export default props => (
         code: tableJs,
       }]}
     >
+      <GuideText>
+        Here&rsquo;s the basic Table. You can expand and collapse rows.
+      </GuideText>
+
       <GuideDemo
         html={tableHtml}
         js={tableJs}
diff --git a/ui_framework/doc_site/src/views/toggle_button/toggle_button.html b/ui_framework/doc_site/src/views/toggle_button/toggle_button.html
new file mode 100644
index 0000000000000..33ae80390fe38
--- /dev/null
+++ b/ui_framework/doc_site/src/views/toggle_button/toggle_button.html
@@ -0,0 +1,4 @@
+<button class="kuiToggleButton" data-id="toggleButton">
+  <span class="kuiToggleButton__icon kuiIcon fa-caret-right" data-id="toggleButtonIcon"></span>
+  Expand and collapse this content
+</button>
diff --git a/ui_framework/doc_site/src/views/toggle_button/toggle_button.js b/ui_framework/doc_site/src/views/toggle_button/toggle_button.js
new file mode 100644
index 0000000000000..90fec3871cdc8
--- /dev/null
+++ b/ui_framework/doc_site/src/views/toggle_button/toggle_button.js
@@ -0,0 +1,17 @@
+/* eslint-disable */
+
+let isButtonCollapsed = true;
+const $toggleButton = $('[data-id="toggleButton"]');
+const $toggleButtonIcon = $('[data-id="toggleButtonIcon"]');
+
+$toggleButton.on('click', () => {
+  isButtonCollapsed = !isButtonCollapsed;
+
+  if (isButtonCollapsed) {
+    $toggleButtonIcon.addClass('fa-caret-right');
+    $toggleButtonIcon.removeClass('fa-caret-down');
+  } else {
+    $toggleButtonIcon.removeClass('fa-caret-right');
+    $toggleButtonIcon.addClass('fa-caret-down');
+  }
+});
diff --git a/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.jsx b/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.jsx
new file mode 100644
index 0000000000000..114e31cb7fcb6
--- /dev/null
+++ b/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.jsx
@@ -0,0 +1,37 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import {
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const toggleButtonHtml = require('./toggle_button.html');
+const toggleButtonJs = require('raw!./toggle_button.js');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="ToggleButton"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: toggleButtonHtml,
+      }]}
+    >
+      <GuideText>
+        You can use this button to reveal and hide content.
+      </GuideText>
+
+      <GuideDemo
+        html={toggleButtonHtml}
+        js={toggleButtonJs}
+      />
+    </GuideSection>
+  </GuidePage>
+);

From ac4abae7746886fa363e3d67063370c21366d096 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Wed, 1 Mar 2017 10:56:56 +0100
Subject: [PATCH 070/150] fixing split chart axis (#10589)

---
 src/ui/public/vislib/lib/axis/axis.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/ui/public/vislib/lib/axis/axis.js b/src/ui/public/vislib/lib/axis/axis.js
index 8edd61a3c75fe..75da0825d688b 100644
--- a/src/ui/public/vislib/lib/axis/axis.js
+++ b/src/ui/public/vislib/lib/axis/axis.js
@@ -169,7 +169,7 @@ export default function AxisFactory(Private) {
     }
 
     draw() {
-      let svg;
+      const svgs = [];
       const self = this;
       const config = this.axisConfig;
       const style = config.get('style');
@@ -191,10 +191,12 @@ export default function AxisFactory(Private) {
           const axis = self.getAxis(length);
 
           if (config.get('show')) {
-            svg = div.append('svg')
+            const svg = div.append('svg')
             .attr('width', width)
             .attr('height', height);
 
+            svgs.push(svg);
+
             const axisClass = self.axisConfig.isHorizontal() ? 'x' : 'y';
             svg.append('g')
             .attr('class', `${axisClass} axis ${config.get('id')}`)
@@ -219,7 +221,7 @@ export default function AxisFactory(Private) {
           self.axisTitle.render(selection);
         }
 
-        if (svg) svg.call(self.adjustSize());
+        svgs.forEach(svg => svg.call(self.adjustSize()));
       };
     }
   }

From e32656777ec790d6ddd8272400c86a792317b93c Mon Sep 17 00:00:00 2001
From: Toby McLaughlin <toby@jarpy.net>
Date: Thu, 2 Mar 2017 01:12:08 +1100
Subject: [PATCH 071/150] [docs] XPACK_SECURTY_ENABLED env var for Docker
 (#10608)

---
 docs/setup/docker.asciidoc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/setup/docker.asciidoc b/docs/setup/docker.asciidoc
index 0221a8eacee26..b868b4910d840 100644
--- a/docs/setup/docker.asciidoc
+++ b/docs/setup/docker.asciidoc
@@ -101,6 +101,7 @@ mappings are available:
 `XPACK_MONITORING_KIBANA_COLLECTION_ENABLED`:: `xpack.monitoring.kibana.collection.enabled`
 `XPACK_MONITORING_KIBANA_COLLECTION_INTERVAL`:: `xpack.monitoring.kibana.collection.interval`
 `XPACK_MONITORING_UI_CONTAINER_ELASTICSEARCH_ENABLED`:: `xpack.monitoring.ui.container.elasticsearch.enabled`
+`XPACK_SECURITY_ENABLED`:: `xpack.security.enabled`
 `XPACK_SECURITY_COOKIENAME`:: `xpack.security.cookieName`
 `XPACK_SECURITY_ENCRYPTIONKEY`:: `xpack.security.encryptionKey`
 `XPACK_SECURITY_SECURECOOKIES`:: `xpack.security.secureCookies`

From 841a3d204fbcd7cb6a26ee154a5df7a33eba4ed9 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Wed, 1 Mar 2017 16:20:49 +0100
Subject: [PATCH 072/150] Sum, Avg, Min and Max bucket pipeline aggregation
 (#10070)

* allow parent aggs to have sub aggs defined

* adding bucket_sum aggregation

* adding bucket_avg, bucket_min and bucket_max

* fixing based on UI review

* adding tests

* disable terms sorting on pipeline aggs

* fixing based on Staceys review

* adding defaults

* updated based on review

* fixing error with stacking
---
 .../public/visualize/editor/agg_select.html   |   2 +-
 .../__tests__/metrics/sibling_pipeline.js     | 110 ++++++++++++++++++
 src/ui/public/agg_types/buckets/terms.js      |   4 +-
 .../public/agg_types/controls/sub_metric.html |  14 +++
 src/ui/public/agg_types/index.js              |  10 +-
 src/ui/public/agg_types/metrics/bucket_avg.js |  18 +++
 src/ui/public/agg_types/metrics/bucket_max.js |  18 +++
 src/ui/public/agg_types/metrics/bucket_min.js |  18 +++
 src/ui/public/agg_types/metrics/bucket_sum.js |  18 +++
 .../agg_types/metrics/cumulative_sum.js       |   1 +
 src/ui/public/agg_types/metrics/derivative.js |   1 +
 .../metrics/lib/parent_pipeline_agg_helper.js |   1 +
 .../lib/sibling_pipeline_agg_controller.js    |  23 ++++
 .../lib/sibling_pipeline_agg_helper.js        |  92 +++++++++++++++
 .../lib/sibling_pipeline_agg_writter.js       |  19 +++
 .../agg_types/metrics/metric_agg_type.js      |   1 +
 src/ui/public/agg_types/metrics/moving_avg.js |   1 +
 .../public/agg_types/metrics/serial_diff.js   |   1 +
 src/ui/public/vis/agg_config.js               |   1 +
 .../public/vislib/lib/types/point_series.js   |   2 +-
 20 files changed, 351 insertions(+), 4 deletions(-)
 create mode 100644 src/ui/public/agg_types/__tests__/metrics/sibling_pipeline.js
 create mode 100644 src/ui/public/agg_types/controls/sub_metric.html
 create mode 100644 src/ui/public/agg_types/metrics/bucket_avg.js
 create mode 100644 src/ui/public/agg_types/metrics/bucket_max.js
 create mode 100644 src/ui/public/agg_types/metrics/bucket_min.js
 create mode 100644 src/ui/public/agg_types/metrics/bucket_sum.js
 create mode 100644 src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_controller.js
 create mode 100644 src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_helper.js
 create mode 100644 src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_writter.js

diff --git a/src/core_plugins/kibana/public/visualize/editor/agg_select.html b/src/core_plugins/kibana/public/visualize/editor/agg_select.html
index 4059ef4884e86..854996b965822 100644
--- a/src/core_plugins/kibana/public/visualize/editor/agg_select.html
+++ b/src/core_plugins/kibana/public/visualize/editor/agg_select.html
@@ -7,6 +7,6 @@
     ng-model="agg.type"
     required
     auto-select-if-only-one="aggTypeOptions | aggFilter:agg.schema.aggFilter"
-    ng-options="agg as agg.title for agg in aggTypeOptions | aggFilter:agg.schema.aggFilter">
+    ng-options="agg as agg.title group by agg.subtype for agg in aggTypeOptions | aggFilter:agg.schema.aggFilter">
   </select>
 </div>
diff --git a/src/ui/public/agg_types/__tests__/metrics/sibling_pipeline.js b/src/ui/public/agg_types/__tests__/metrics/sibling_pipeline.js
new file mode 100644
index 0000000000000..90e756d5dcfd8
--- /dev/null
+++ b/src/ui/public/agg_types/__tests__/metrics/sibling_pipeline.js
@@ -0,0 +1,110 @@
+import _ from 'lodash';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import BucketSum from 'ui/agg_types/metrics/bucket_sum';
+import BucketAvg from 'ui/agg_types/metrics/bucket_avg';
+import BucketMin from 'ui/agg_types/metrics/bucket_min';
+import BucketMax from 'ui/agg_types/metrics/bucket_max';
+import VisProvider from 'ui/vis';
+import StubbedIndexPattern from 'fixtures/stubbed_logstash_index_pattern';
+
+const metrics = [
+  { name: 'sum_bucket', title: 'Overall Sum', provider: BucketSum },
+  { name: 'avg_bucket', title: 'Overall Average', provider: BucketAvg },
+  { name: 'min_bucket', title: 'Overall Min', provider: BucketMin },
+  { name: 'max_bucket', title: 'Overall Max', provider: BucketMax },
+];
+
+describe('sibling pipeline aggs', function () {
+  metrics.forEach(metric => {
+    describe(`${metric.title} metric`, function () {
+
+      let aggDsl;
+      let metricAgg;
+      let aggConfig;
+
+      function init(settings) {
+        ngMock.module('kibana');
+        ngMock.inject(function (Private) {
+          const Vis = Private(VisProvider);
+          const indexPattern = Private(StubbedIndexPattern);
+          metricAgg = Private(metric.provider);
+
+          const params = settings || {
+            customMetric: {
+              id: '5',
+              type: 'count',
+              schema: 'metric'
+            },
+            customBucket: {
+              id: '6',
+              type: 'date_histogram',
+              schema: 'bucket',
+              params: { field: '@timestamp' }
+            }
+          };
+
+          const vis = new Vis(indexPattern, {
+            title: 'New Visualization',
+            type: 'metric',
+            params: {
+              fontSize: 60,
+              handleNoResults: true
+            },
+            aggs: [
+              {
+                id: '1',
+                type: 'count',
+                schema: 'metric'
+              },
+              {
+                id: '2',
+                type: metric.name,
+                schema: 'metric',
+                params
+              }
+            ],
+            listeners: {}
+          });
+
+          // Grab the aggConfig off the vis (we don't actually use the vis for anything else)
+          aggConfig = vis.aggs[1];
+          aggDsl = aggConfig.toDsl();
+        });
+      }
+
+      it(`should return a label prefixed with ${metric.title} of`, function () {
+        init();
+        expect(metricAgg.makeLabel(aggConfig)).to.eql(`${metric.title} of Count`);
+      });
+
+      it('should set parent aggs', function () {
+        init();
+        expect(aggDsl[metric.name].buckets_path).to.be('2-bucket>_count');
+        expect(aggDsl.parentAggs['2-bucket'].date_histogram).to.not.be.undefined;
+      });
+
+      it('should set nested parent aggs', function () {
+        init({
+          customMetric: {
+            id: '5',
+            type: 'avg',
+            schema: 'metric',
+            params: { field: 'bytes' },
+          },
+          customBucket: {
+            id: '6',
+            type: 'date_histogram',
+            schema: 'bucket',
+            params: { field: '@timestamp' },
+          }
+        });
+        expect(aggDsl[metric.name].buckets_path).to.be('2-bucket>2-metric');
+        expect(aggDsl.parentAggs['2-bucket'].date_histogram).to.not.be.undefined;
+        expect(aggDsl.parentAggs['2-bucket'].aggs['2-metric'].avg.field).to.equal('bytes');
+      });
+
+    });
+  });
+
+});
diff --git a/src/ui/public/agg_types/buckets/terms.js b/src/ui/public/agg_types/buckets/terms.js
index 1ff01e548915e..4383c8c7e8465 100644
--- a/src/ui/public/agg_types/buckets/terms.js
+++ b/src/ui/public/agg_types/buckets/terms.js
@@ -18,8 +18,10 @@ export default function TermsAggDefinition(Private) {
 
   const aggFilter = [
     '!top_hits', '!percentiles', '!median', '!std_dev',
-    '!derivative', '!cumulative_sum', '!moving_avg', '!serial_diff'
+    '!derivative', '!moving_avg', '!serial_diff', '!cumulative_sum',
+    '!avg_bucket', '!max_bucket', '!min_bucket', '!sum_bucket'
   ];
+
   const orderAggSchema = (new Schemas([
     {
       group: 'none',
diff --git a/src/ui/public/agg_types/controls/sub_metric.html b/src/ui/public/agg_types/controls/sub_metric.html
new file mode 100644
index 0000000000000..88011451676be
--- /dev/null
+++ b/src/ui/public/agg_types/controls/sub_metric.html
@@ -0,0 +1,14 @@
+<div ng-controller="aggParam.controller">
+  <div class="form-group" ng-if="agg.params[aggType]">
+    <label>{{aggTitle}}</label>
+    <div class="vis-editor-agg-order-agg">
+      <ng-form name="{{aggType}}Form">
+        <vis-editor-agg-params
+          agg="agg.params[aggType]"
+          group-name="'{{aggGroup}}'">
+        </vis-editor-agg-params>
+      </ng-form>
+    </div>
+  </div>
+
+</div>
diff --git a/src/ui/public/agg_types/index.js b/src/ui/public/agg_types/index.js
index 5f735860e0cf7..da5a5a6c94521 100644
--- a/src/ui/public/agg_types/index.js
+++ b/src/ui/public/agg_types/index.js
@@ -24,6 +24,10 @@ import AggTypesBucketsTermsProvider from 'ui/agg_types/buckets/terms';
 import AggTypesBucketsFiltersProvider from 'ui/agg_types/buckets/filters';
 import AggTypesBucketsSignificantTermsProvider from 'ui/agg_types/buckets/significant_terms';
 import AggTypesBucketsGeoHashProvider from 'ui/agg_types/buckets/geo_hash';
+import AggTypesMetricsBucketSumProvider from 'ui/agg_types/metrics/bucket_sum';
+import AggTypesMetricsBucketAvgProvider from 'ui/agg_types/metrics/bucket_avg';
+import AggTypesMetricsBucketMinProvider from 'ui/agg_types/metrics/bucket_min';
+import AggTypesMetricsBucketMaxProvider from 'ui/agg_types/metrics/bucket_max';
 export default function AggTypeService(Private) {
 
   const aggs = {
@@ -42,7 +46,11 @@ export default function AggTypeService(Private) {
       Private(AggTypesMetricsDerivativeProvider),
       Private(AggTypesMetricsCumulativeSumProvider),
       Private(AggTypesMetricsMovingAvgProvider),
-      Private(AggTypesMetricsSerialDiffProvider)
+      Private(AggTypesMetricsSerialDiffProvider),
+      Private(AggTypesMetricsBucketAvgProvider),
+      Private(AggTypesMetricsBucketSumProvider),
+      Private(AggTypesMetricsBucketMinProvider),
+      Private(AggTypesMetricsBucketMaxProvider),
     ],
     buckets: [
       Private(AggTypesBucketsDateHistogramProvider),
diff --git a/src/ui/public/agg_types/metrics/bucket_avg.js b/src/ui/public/agg_types/metrics/bucket_avg.js
new file mode 100644
index 0000000000000..dcfc7282248e8
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/bucket_avg.js
@@ -0,0 +1,18 @@
+import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
+import { makeNestedLabel } from './lib/make_nested_label';
+import SiblingPipelineAggHelperProvider from './lib/sibling_pipeline_agg_helper';
+
+export default function AggTypesMetricsBucketAvgProvider(Private) {
+  const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
+  const siblingPipelineHelper = Private(SiblingPipelineAggHelperProvider);
+
+  return new MetricAggType({
+    name: 'avg_bucket',
+    title: 'Average Bucket',
+    makeLabel: agg => makeNestedLabel(agg, 'overall average'),
+    subtype: siblingPipelineHelper.subtype,
+    params: [
+      ...siblingPipelineHelper.params()
+    ]
+  });
+}
diff --git a/src/ui/public/agg_types/metrics/bucket_max.js b/src/ui/public/agg_types/metrics/bucket_max.js
new file mode 100644
index 0000000000000..82a6b834de719
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/bucket_max.js
@@ -0,0 +1,18 @@
+import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
+import { makeNestedLabel } from './lib/make_nested_label';
+import SiblingPipelineAggHelperProvider from './lib/sibling_pipeline_agg_helper';
+
+export default function AggTypesMetricsBucketMaxProvider(Private) {
+  const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
+  const siblingPipelineHelper = Private(SiblingPipelineAggHelperProvider);
+
+  return new MetricAggType({
+    name: 'max_bucket',
+    title: 'Max Bucket',
+    makeLabel: agg => makeNestedLabel(agg, 'overall max'),
+    subtype: siblingPipelineHelper.subtype,
+    params: [
+      ...siblingPipelineHelper.params()
+    ]
+  });
+}
diff --git a/src/ui/public/agg_types/metrics/bucket_min.js b/src/ui/public/agg_types/metrics/bucket_min.js
new file mode 100644
index 0000000000000..588c308b100a7
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/bucket_min.js
@@ -0,0 +1,18 @@
+import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
+import { makeNestedLabel } from './lib/make_nested_label';
+import SiblingPipelineAggHelperProvider from './lib/sibling_pipeline_agg_helper';
+
+export default function AggTypesMetricsBucketMinProvider(Private) {
+  const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
+  const siblingPipelineHelper = Private(SiblingPipelineAggHelperProvider);
+
+  return new MetricAggType({
+    name: 'min_bucket',
+    title: 'Min Bucket',
+    makeLabel: agg => makeNestedLabel(agg, 'overall min'),
+    subtype: siblingPipelineHelper.subtype,
+    params: [
+      ...siblingPipelineHelper.params()
+    ]
+  });
+}
diff --git a/src/ui/public/agg_types/metrics/bucket_sum.js b/src/ui/public/agg_types/metrics/bucket_sum.js
new file mode 100644
index 0000000000000..a4c3c5f265228
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/bucket_sum.js
@@ -0,0 +1,18 @@
+import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
+import { makeNestedLabel } from './lib/make_nested_label';
+import SiblingPipelineAggHelperProvider from './lib/sibling_pipeline_agg_helper';
+
+export default function AggTypesMetricsBucketSumProvider(Private) {
+  const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
+  const siblingPipelineHelper = Private(SiblingPipelineAggHelperProvider);
+
+  return new MetricAggType({
+    name: 'sum_bucket',
+    title: 'Sum Bucket',
+    makeLabel: agg => makeNestedLabel(agg, 'overall sum'),
+    subtype: siblingPipelineHelper.subtype,
+    params: [
+      ...siblingPipelineHelper.params()
+    ]
+  });
+}
diff --git a/src/ui/public/agg_types/metrics/cumulative_sum.js b/src/ui/public/agg_types/metrics/cumulative_sum.js
index 8e7fc93ce9a31..d9856704acffc 100644
--- a/src/ui/public/agg_types/metrics/cumulative_sum.js
+++ b/src/ui/public/agg_types/metrics/cumulative_sum.js
@@ -9,6 +9,7 @@ export default function AggTypeMetricComulativeSumProvider(Private) {
   return new MetricAggType({
     name: 'cumulative_sum',
     title: 'Cumulative Sum',
+    subtype: parentPipelineAggHelper.subtype,
     makeLabel: agg => makeNestedLabel(agg, 'cumulative sum'),
     params: [
       ...parentPipelineAggHelper.params()
diff --git a/src/ui/public/agg_types/metrics/derivative.js b/src/ui/public/agg_types/metrics/derivative.js
index 01f075cc9d03b..cc17b871a9030 100644
--- a/src/ui/public/agg_types/metrics/derivative.js
+++ b/src/ui/public/agg_types/metrics/derivative.js
@@ -9,6 +9,7 @@ export default function AggTypeMetricDerivativeProvider(Private) {
   return new MetricAggType({
     name: 'derivative',
     title: 'Derivative',
+    subtype: parentPipelineAggHelper.subtype,
     makeLabel: agg => makeNestedLabel(agg, 'derivative'),
     params: [
       ...parentPipelineAggHelper.params()
diff --git a/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js b/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
index b55209b3ad08e..6e1b2ce62df4c 100644
--- a/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
+++ b/src/ui/public/agg_types/metrics/lib/parent_pipeline_agg_helper.js
@@ -22,6 +22,7 @@ const ParentPipelineAggHelperProvider = function (Private) {
   ])).all[0];
 
   return {
+    subtype: 'Parent Pipeline Aggregations',
     params: function () {
       return [
         {
diff --git a/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_controller.js b/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_controller.js
new file mode 100644
index 0000000000000..2a16b232c3a47
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_controller.js
@@ -0,0 +1,23 @@
+import safeMakeLabel from './safe_make_label';
+
+const siblingPipelineAggController = function (type) {
+  return function ($scope) {
+
+    $scope.aggType = type;
+    $scope.aggTitle = type === 'customMetric' ? 'Metric' : 'Bucket';
+    $scope.aggGroup = type === 'customMetric' ? 'metrics' : 'buckets';
+    $scope.safeMakeLabel = safeMakeLabel;
+
+    function updateAgg() {
+      const agg = $scope.agg;
+      const params = agg.params;
+      const paramDef = agg.type.params.byName[type];
+
+      params[type] = params[type] || paramDef.makeAgg(agg);
+    }
+
+    updateAgg();
+  };
+};
+
+export { siblingPipelineAggController };
diff --git a/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_helper.js b/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_helper.js
new file mode 100644
index 0000000000000..372d95feae499
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_helper.js
@@ -0,0 +1,92 @@
+import _ from 'lodash';
+import VisAggConfigProvider from 'ui/vis/agg_config';
+import VisSchemasProvider from 'ui/vis/schemas';
+
+import { siblingPipelineAggController } from './sibling_pipeline_agg_controller';
+import { siblingPipelineAggWritter } from './sibling_pipeline_agg_writter';
+import metricAggTemplate from 'ui/agg_types/controls/sub_metric.html';
+
+const SiblingPipelineAggHelperProvider = function (Private) {
+
+  const AggConfig = Private(VisAggConfigProvider);
+  const Schemas = Private(VisSchemasProvider);
+
+  const metricAggFilter = [
+    '!top_hits', '!percentiles', '!percentile_ranks', '!median', '!std_dev',
+    '!sum_bucket', '!avg_bucket', '!min_bucket', '!max_bucket',
+    '!derivative', '!moving_avg', '!serial_diff', '!cumulative_sum'
+  ];
+
+  const metricAggSchema = (new Schemas([
+    {
+      group: 'none',
+      name: 'metricAgg',
+      title: 'Metric Agg',
+      aggFilter: metricAggFilter
+    }
+  ])).all[0];
+
+  const bucketAggFilter = [];
+  const bucketAggSchema = (new Schemas([
+    {
+      group: 'none',
+      title: 'Bucket Agg',
+      name: 'bucketAgg',
+      aggFilter: bucketAggFilter
+    }
+  ])).all[0];
+
+  return {
+    subtype: 'Sibling Pipeline Aggregations',
+    params: function () {
+      return [
+        {
+          name: 'customBucket',
+          type: AggConfig,
+          default: null,
+          serialize: function (customMetric) {
+            return customMetric.toJSON();
+          },
+          deserialize: function (state, agg) {
+            return this.makeAgg(agg, state);
+          },
+          makeAgg: function (agg, state) {
+            state = state || { type: 'date_histogram' };
+            state.schema = bucketAggSchema;
+            const orderAgg = new AggConfig(agg.vis, state);
+            orderAgg.id = agg.id + '-bucket';
+            return orderAgg;
+          },
+          editor: metricAggTemplate,
+          controller: siblingPipelineAggController('customBucket'),
+          write: _.noop
+        },
+        {
+          name: 'customMetric',
+          type: AggConfig,
+          default: null,
+          serialize: function (customMetric) {
+            return customMetric.toJSON();
+          },
+          deserialize: function (state, agg) {
+            return this.makeAgg(agg, state);
+          },
+          makeAgg: function (agg, state) {
+            state = state || { type: 'count' };
+            state.schema = metricAggSchema;
+            const orderAgg = new AggConfig(agg.vis, state);
+            orderAgg.id = agg.id + '-metric';
+            return orderAgg;
+          },
+          editor: metricAggTemplate,
+          controller: siblingPipelineAggController('customMetric'),
+          write: siblingPipelineAggWritter
+        }
+      ];
+    }
+  };
+
+
+};
+
+export default SiblingPipelineAggHelperProvider;
diff --git a/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_writter.js b/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_writter.js
new file mode 100644
index 0000000000000..2b7b51f64d059
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/lib/sibling_pipeline_agg_writter.js
@@ -0,0 +1,19 @@
+const siblingPipelineAggWritter = function (agg, output) {
+  if (!agg.params.customMetric) return;
+
+  const metricAgg = agg.params.customMetric;
+  const bucketAgg = agg.params.customBucket;
+
+  // if a bucket is selected, we must add this agg as a sibling to it, and add a metric to that bucket (or select one of its)
+  if (metricAgg.type.name !== 'count') {
+    bucketAgg.subAggs = (output.subAggs || []).concat(metricAgg);
+    output.params.buckets_path = `${bucketAgg.id}>${metricAgg.id}`;
+  } else {
+    output.params.buckets_path = bucketAgg.id + '>_count';
+  }
+
+  output.parentAggs = (output.parentAggs || []).concat(bucketAgg);
+
+};
+
+export { siblingPipelineAggWritter };
diff --git a/src/ui/public/agg_types/metrics/metric_agg_type.js b/src/ui/public/agg_types/metrics/metric_agg_type.js
index 12f712cce4f09..e0727243209c9 100644
--- a/src/ui/public/agg_types/metrics/metric_agg_type.js
+++ b/src/ui/public/agg_types/metrics/metric_agg_type.js
@@ -17,6 +17,7 @@ export default function MetricAggTypeProvider(Private) {
     }, this);
   }
 
+  MetricAggType.prototype.subtype = 'Metric Aggregations';
   /**
    * Read the values for this metric from the
    * @param  {[type]} bucket [description]
diff --git a/src/ui/public/agg_types/metrics/moving_avg.js b/src/ui/public/agg_types/metrics/moving_avg.js
index 520d4cc25e233..a9ea5e6d8e020 100644
--- a/src/ui/public/agg_types/metrics/moving_avg.js
+++ b/src/ui/public/agg_types/metrics/moving_avg.js
@@ -9,6 +9,7 @@ export default function AggTypeMetricMovingAvgProvider(Private) {
   return new MetricAggType({
     name: 'moving_avg',
     title: 'Moving Avg',
+    subtype: parentPipelineAggHelper.subtype,
     makeLabel: agg => makeNestedLabel(agg, 'moving avg'),
     params: [
       ...parentPipelineAggHelper.params()
diff --git a/src/ui/public/agg_types/metrics/serial_diff.js b/src/ui/public/agg_types/metrics/serial_diff.js
index 014c50ec2c1ea..c67363b6e5807 100644
--- a/src/ui/public/agg_types/metrics/serial_diff.js
+++ b/src/ui/public/agg_types/metrics/serial_diff.js
@@ -9,6 +9,7 @@ export default function AggTypeMetricSerialDiffProvider(Private) {
   return new MetricAggType({
     name: 'serial_diff',
     title: 'Serial Diff',
+    subtype: parentPipelineAggHelper.subtype,
     makeLabel: agg => makeNestedLabel(agg, 'serial diff'),
     params: [
       ...parentPipelineAggHelper.params()
diff --git a/src/ui/public/vis/agg_config.js b/src/ui/public/vis/agg_config.js
index 2be2834bd078e..9497366c7fe12 100644
--- a/src/ui/public/vis/agg_config.js
+++ b/src/ui/public/vis/agg_config.js
@@ -210,6 +210,7 @@ export default function AggConfigFactory(Private, fieldTypeFilter) {
     configDsl[this.type.dslName || this.type.name] = output.params;
 
     // if the config requires subAggs, write them to the dsl as well
+    if (this.subAggs && !output.subAggs) output.subAggs = this.subAggs;
     if (output.subAggs) {
       const subDslLvl = configDsl.aggs || (configDsl.aggs = {});
       output.subAggs.forEach(function nestAdhocSubAggs(subAggConfig) {
diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js
index 3e6999c443735..624608637592a 100644
--- a/src/ui/public/vislib/lib/types/point_series.js
+++ b/src/ui/public/vislib/lib/types/point_series.js
@@ -4,7 +4,7 @@ export default function ColumnHandler(Private) {
 
   const createSerieFromParams = (cfg, seri) => {
     const matchingSeriParams = cfg.seriesParams ? cfg.seriesParams.find(seriConfig => {
-      return seri.label === seriConfig.data.label;
+      return seri.label.endsWith(seriConfig.data.label);
     }) : null;
 
 

From 979683285795e692ac4e97912f6d8c2f3a23ec77 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 1 Mar 2017 07:52:58 -0800
Subject: [PATCH 073/150] Fix bug with MenuButton hover state inheriting
 Bootstrap styles. (#10579)

---
 .../components/menu_button/_menu_button.scss    | 11 +++++++----
 ui_framework/dist/ui_framework.css              | 10 ++++++++--
 .../views/menu_button/menu_button_elements.html | 17 +++++++++++++++++
 .../views/menu_button/menu_button_example.jsx   | 17 +++++++++++++++++
 4 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 ui_framework/doc_site/src/views/menu_button/menu_button_elements.html

diff --git a/ui_framework/components/menu_button/_menu_button.scss b/ui_framework/components/menu_button/_menu_button.scss
index 43b868a181a52..7e951a7bb99bc 100644
--- a/ui_framework/components/menu_button/_menu_button.scss
+++ b/ui_framework/components/menu_button/_menu_button.scss
@@ -44,6 +44,7 @@
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiMenuButton--basic {
   color: #5a5a5a;
@@ -54,8 +55,9 @@
     color: #5a5a5a !important; /* 1 */
   }
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 2 */
+  &:active { /* 2 */
+    color: #5a5a5a !important; /* 1 */
     background-color: #F2F2F2;
   }
 
@@ -66,13 +68,14 @@
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiMenuButton--danger {
   color: #D76051;
   background-color: #ffffff;
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 2 */
+  &:active { /* 2 */
     color: #FFFFFF !important; /* 1 */
     background-color: #D76051;
   }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 2a619b96fcc60..daf551d448e54 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1086,6 +1086,7 @@ body {
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiMenuButton--basic {
   color: #5a5a5a;
@@ -1093,18 +1094,23 @@ body {
   .kuiMenuButton--basic:focus {
     color: #5a5a5a !important;
     /* 1 */ }
-  .kuiMenuButton--basic:hover:enabled, .kuiMenuButton--basic:active:enabled {
+  .kuiMenuButton--basic:hover, .kuiMenuButton--basic:active {
+    /* 2 */
+    color: #5a5a5a !important;
+    /* 1 */
     background-color: #F2F2F2; }
   .kuiMenuButton--basic:disabled {
     color: #9B9B9B; }
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiMenuButton--danger {
   color: #D76051;
   background-color: #ffffff; }
-  .kuiMenuButton--danger:hover:enabled, .kuiMenuButton--danger:active:enabled {
+  .kuiMenuButton--danger:hover, .kuiMenuButton--danger:active {
+    /* 2 */
     color: #FFFFFF !important;
     /* 1 */
     background-color: #D76051; }
diff --git a/ui_framework/doc_site/src/views/menu_button/menu_button_elements.html b/ui_framework/doc_site/src/views/menu_button/menu_button_elements.html
new file mode 100644
index 0000000000000..b8090e21c2991
--- /dev/null
+++ b/ui_framework/doc_site/src/views/menu_button/menu_button_elements.html
@@ -0,0 +1,17 @@
+<button class="kuiMenuButton kuiMenuButton--basic">
+  Button element
+</button>
+
+&nbsp;
+
+<input
+  type="submit"
+  class="kuiMenuButton kuiMenuButton--basic"
+  value="Submit input element"
+>
+
+&nbsp;
+
+<a href="#" class="kuiMenuButton kuiMenuButton--basic">
+  Anchor element
+</a>
diff --git a/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx b/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx
index 3f8874415a03f..2d997db6ad279 100644
--- a/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx
+++ b/ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx
@@ -16,6 +16,7 @@ const basicHtml = require('./menu_button_basic.html');
 const dangerHtml = require('./menu_button_danger.html');
 const withIconHtml = require('./menu_button_with_icon.html');
 const groupHtml = require('./menu_button_group.html');
+const elementsHtml = require('./menu_button_elements.html');
 
 export default props => (
   <GuidePage title={props.route.name}>
@@ -70,5 +71,21 @@ export default props => (
         html={groupHtml}
       />
     </GuideSection>
+
+    <GuideSection
+      title="Element variations"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: elementsHtml,
+      }]}
+    >
+      <GuideText>
+        You can create a MenuButton using a button element, link, or input[type="submit"].
+      </GuideText>
+
+      <GuideDemo
+        html={elementsHtml}
+      />
+    </GuideSection>
   </GuidePage>
 );

From 67d9188eaa84b87e5a757ed6b9f45f2aed1ba93d Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Wed, 1 Mar 2017 16:55:56 +0100
Subject: [PATCH 074/150] fix missing axis label (#10615)

---
 src/ui/public/vislib/lib/axis/axis_config.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/ui/public/vislib/lib/axis/axis_config.js b/src/ui/public/vislib/lib/axis/axis_config.js
index f473567cf43c6..4f69483aa5d3e 100644
--- a/src/ui/public/vislib/lib/axis/axis_config.js
+++ b/src/ui/public/vislib/lib/axis/axis_config.js
@@ -87,7 +87,7 @@ export default function AxisConfigFactory() {
       this._values.rootEl = chartConfig.get('el');
 
       this.data = chartConfig.data;
-      if (this._values.type === 'category') {
+      if (isCategoryAxis) {
         if (!this._values.values) {
           this.values = this.data.xValues(chartConfig.get('orderBucketsBySum', false));
           this.ordered = this.data.get('ordered');
@@ -124,6 +124,11 @@ export default function AxisConfigFactory() {
         }
       }
 
+      if (axisConfigArgs.title == null || axisConfigArgs.title.text == null) {
+        const label = isCategoryAxis ? 'xAxisLabel' : 'yAxisLabel';
+        this.set('title.text', this.data.get(label));
+      }
+
       // horizontal axis with ordinal scale should have labels rotated (so we can fit more)
       // unless explicitly overriden by user
       if (this.isHorizontal() && this.isOrdinal()) {

From 3b0c41cbc75013a78ad797a8c8baad73a6bcac83 Mon Sep 17 00:00:00 2001
From: Lukas Olson <olson.lukas@gmail.com>
Date: Wed, 1 Mar 2017 09:31:34 -0700
Subject: [PATCH 075/150] When a date is selected in absolute mode, set to
 start/end of day (#10433)

* In absolute timepicker, use whole days

* Use ngModelOptions instead of implicit bindings

* fix absolute timepicker test

* Fix wording in test
---
 .../public/directives/__tests__/timepicker.js | 33 +++++++++++++++++--
 src/ui/public/timepicker/timepicker.html      |  4 +--
 src/ui/public/timepicker/timepicker.js        | 16 +++++----
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/ui/public/directives/__tests__/timepicker.js b/src/ui/public/directives/__tests__/timepicker.js
index 71ff2146ef2e6..13c457893ab75 100644
--- a/src/ui/public/directives/__tests__/timepicker.js
+++ b/src/ui/public/directives/__tests__/timepicker.js
@@ -345,8 +345,8 @@ describe('timepicker directive', function () {
       inputs = {
         fromInput: $elem.find('.kbn-timepicker-section input[ng-model="absolute.from"]'),
         toInput: $elem.find('.kbn-timepicker-section input[ng-model="absolute.to"]'),
-        fromCalendar: $elem.find('.kbn-timepicker-section div[ng-model="absolute.from"] '),
-        toCalendar: $elem.find('.kbn-timepicker-section div[ng-model="absolute.to"] '),
+        fromCalendar: $elem.find('.kbn-timepicker-section div[ng-model="pickFromDate"] '),
+        toCalendar: $elem.find('.kbn-timepicker-section div[ng-model="pickToDate"] '),
       };
 
     });
@@ -421,6 +421,33 @@ describe('timepicker directive', function () {
       done();
     });
 
-  });
+    it('should set from/to to start/end of day if set from datepicker', function (done) {
+      $scope.pickFromDate(new Date('2012-02-01 12:00'));
+      $scope.pickToDate(new Date('2012-02-11 12:00'));
+      $scope.applyAbsolute();
+
+      expect($parentScope.updateFilter.firstCall.args[0].valueOf()).to.be(moment('2012-02-01 00:00:00.000').valueOf());
+      expect($parentScope.updateFilter.firstCall.args[1].valueOf()).to.be(moment('2012-02-11 23:59:59.999').valueOf());
+
+      done();
+    });
+
+    it('should allow setting hour/minute/second after setting from datepicker', function (done) {
+      $scope.pickFromDate(new Date('2012-02-01 12:00'));
+      $scope.pickToDate(new Date('2012-02-11 12:00'));
+      $scope.applyAbsolute();
 
+      expect($parentScope.updateFilter.firstCall.args[0].valueOf()).to.be(moment('2012-02-01 00:00:00.000').valueOf());
+      expect($parentScope.updateFilter.firstCall.args[1].valueOf()).to.be(moment('2012-02-11 23:59:59.999').valueOf());
+
+      $scope.absolute.from = moment('2012-02-01 01:23:45');
+      $scope.absolute.to = moment('2012-02-11 12:34:56');
+      $scope.applyAbsolute();
+
+      expect($parentScope.updateFilter.secondCall.args[0].valueOf()).to.be(moment('2012-02-01 01:23:45').valueOf());
+      expect($parentScope.updateFilter.secondCall.args[1].valueOf()).to.be(moment('2012-02-11 12:34:56').valueOf());
+
+      done();
+    });
+  });
 });
diff --git a/src/ui/public/timepicker/timepicker.html b/src/ui/public/timepicker/timepicker.html
index d08f3b94e0b60..72377d7871b37 100644
--- a/src/ui/public/timepicker/timepicker.html
+++ b/src/ui/public/timepicker/timepicker.html
@@ -106,7 +106,7 @@
                     <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
                   </div>
                   <div>
-                    <datepicker ng-model="absolute.from" max-date="absolute.to" show-weeks="false"></datepicker>
+                    <datepicker ng-model="pickFromDate" ng-model-options="{ getterSetter: true }" max-date="absolute.to" show-weeks="false"></datepicker>
                   </div>
                 </div>
 
@@ -119,7 +119,7 @@
                     <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
                   </div>
                   <div>
-                    <datepicker ng-model="absolute.to" min-date="absolute.from" show-weeks="false"></datepicker>
+                    <datepicker ng-model="pickToDate" ng-model-options="{ getterSetter: true }" min-date="absolute.from" show-weeks="false"></datepicker>
                   </div>
                 </div>
 
diff --git a/src/ui/public/timepicker/timepicker.js b/src/ui/public/timepicker/timepicker.js
index 8c6c9bb0b104c..1c41cc4d1eb88 100644
--- a/src/ui/public/timepicker/timepicker.js
+++ b/src/ui/public/timepicker/timepicker.js
@@ -75,13 +75,17 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
         }
       });
 
-      $scope.$watch('absolute.from', function (date) {
-        if (_.isDate(date)) $scope.absolute.from = moment(date);
-      });
+      $scope.pickFromDate = function (date) {
+        if (!date) return $scope.absolute.from;
+        date.setHours(0, 0, 0, 0); // Start of day
+        return $scope.absolute.from = moment(date);
+      };
 
-      $scope.$watch('absolute.to', function (date) {
-        if (_.isDate(date)) $scope.absolute.to = moment(date);
-      });
+      $scope.pickToDate = function (date) {
+        if (!date) return $scope.absolute.to;
+        date.setHours(23, 59, 59, 999); // End of day
+        return $scope.absolute.to = moment(date);
+      };
 
       $scope.setMode = function (thisMode) {
         switch (thisMode) {

From b19e16c19f368bd9b823e644a8cd1f59e47be8ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Campinas?= <stephane.campinas@gmail.com>
Date: Wed, 1 Mar 2017 18:49:12 +0000
Subject: [PATCH 076/150] do not render the visualization/search if there is an
 error (#10500)

* do not render the visualization/search if there is an error

* added tests in the case where a visualization of the dashboard is not found
---
 .../public/dashboard/__tests__/panel.js       | 79 +++++++++++++++++++
 .../kibana/public/dashboard/panel/panel.html  |  2 +
 .../kibana/public/dashboard/panel/panel.js    |  2 +-
 3 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/core_plugins/kibana/public/dashboard/__tests__/panel.js

diff --git a/src/core_plugins/kibana/public/dashboard/__tests__/panel.js b/src/core_plugins/kibana/public/dashboard/__tests__/panel.js
new file mode 100644
index 0000000000000..bb80eabcd65ba
--- /dev/null
+++ b/src/core_plugins/kibana/public/dashboard/__tests__/panel.js
@@ -0,0 +1,79 @@
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import Promise from 'bluebird';
+import sinon from 'auto-release-sinon';
+import noDigestPromise from 'test_utils/no_digest_promises';
+import mockUiState from 'fixtures/mock_ui_state';
+
+describe('dashboard panel', function () {
+  let $scope;
+  let $el;
+  let parentScope;
+
+  noDigestPromise.activateForSuite();
+
+  function init(mockDocResponse) {
+    ngMock.module('kibana');
+    ngMock.inject(($rootScope, $compile, esAdmin) => {
+      sinon.stub(esAdmin, 'mget').returns(Promise.resolve({ docs: [ mockDocResponse ] }));
+      sinon.stub(esAdmin.indices, 'getFieldMapping').returns(Promise.resolve({
+        '.kibana': {
+          mappings: {
+            visualization: {}
+          }
+        }
+      }));
+
+      parentScope = $rootScope.$new();
+      parentScope.saveState = sinon.stub();
+      parentScope.createChildUiState = sinon.stub().returns(mockUiState);
+      parentScope.getVisClickHandler = sinon.stub();
+      parentScope.getVisBrushHandler = sinon.stub();
+      parentScope.panel = {
+        col: 3,
+        id: 'foo1',
+        row: 1,
+        size_x: 2,
+        size_y: 2,
+        type: 'visualization'
+      };
+      $el = $compile(`
+        <dashboard-panel
+          panel="panel"
+          is-full-screen-mode="false"
+          is-expanded="false"
+          get-vis-click-handler="getVisClickHandler"
+          get-vis-brush-handler="getVisBrushHandler"
+          save-state="saveState"
+          create-child-ui-state="createChildUiState">
+        </dashboard-panel>`)(parentScope);
+      $scope = $el.isolateScope();
+      parentScope.$digest();
+    });
+  }
+
+  afterEach(() => {
+    $scope.$destroy();
+    $el.remove();
+  });
+
+  it('should not visualize the visualization if it does not exist', function () {
+    init({ found: false });
+    return $scope.loadedPanel.then(() => {
+      expect($scope.error).to.be('Could not locate that visualization (id: foo1)');
+      parentScope.$digest();
+      const content = $el.find('.panel-content');
+      expect(content).to.have.length(0);
+    });
+  });
+
+  it('should try to visualize the visualization if found', function () {
+    init({ found: true, _source: {} });
+    return $scope.loadedPanel.then(() => {
+      expect($scope.error).not.to.be.ok();
+      parentScope.$digest();
+      const content = $el.find('.panel-content');
+      expect(content).to.have.length(1);
+    });
+  });
+});
diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel.html b/src/core_plugins/kibana/public/dashboard/panel/panel.html
index bbfff92e6b843..920b5959533ee 100644
--- a/src/core_plugins/kibana/public/dashboard/panel/panel.html
+++ b/src/core_plugins/kibana/public/dashboard/panel/panel.html
@@ -26,6 +26,7 @@
   </div>
 
   <visualize
+    ng-if="!error"
     ng-switch-when="visualization"
     vis="savedObj.vis"
     search-source="savedObj.searchSource"
@@ -39,6 +40,7 @@
   </visualize>
 
   <doc-table
+    ng-if="!error"
     ng-switch-when="search"
     search-source="savedObj.searchSource"
     sorting="panel.sort"
diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel.js b/src/core_plugins/kibana/public/dashboard/panel/panel.js
index 269766b2a9c33..79151e09f03c0 100644
--- a/src/core_plugins/kibana/public/dashboard/panel/panel.js
+++ b/src/core_plugins/kibana/public/dashboard/panel/panel.js
@@ -120,7 +120,7 @@ uiModules
 
       }
 
-      loadSavedObject(getObjectLoadersForDashboard(), $scope.panel)
+      $scope.loadedPanel = loadSavedObject(getObjectLoadersForDashboard(), $scope.panel)
         .then(initializePanel)
         .catch(function (e) {
           $scope.error = e.message;

From 5b4276c94e00e802bf8c475053bdd5d403fe9578 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 1 Mar 2017 11:02:30 -0800
Subject: [PATCH 077/150] [UI Framework] Close Code Viewer when you navigate to
 a new example. (#10601)

* Show title in CodeViewer.
* Remove unused cases from CodeViewerReducer.
* Close code viewer when the user navigates to a new example page.
---
 .../src/actions/code_viewer_actions.js        |  3 +-
 .../guide_sandbox_code_toggle.jsx             |  3 +-
 .../guide_section/guide_section.jsx           |  2 +-
 ui_framework/doc_site/src/store/index.js      |  4 ++
 .../src/store/reducers/code_viewer_reducer.js | 38 ++++---------------
 .../doc_site/src/views/app_container.js       |  2 +
 ui_framework/doc_site/src/views/app_view.jsx  |  3 +-
 .../src/views/event/events_sandbox.jsx        |  1 +
 .../views/header_bar/header_bar_sandbox.jsx   |  1 +
 .../doc_site/src/views/view/view_sandbox.jsx  |  1 +
 10 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/ui_framework/doc_site/src/actions/code_viewer_actions.js b/ui_framework/doc_site/src/actions/code_viewer_actions.js
index 33e2969554719..b193af7f5eb3d 100644
--- a/ui_framework/doc_site/src/actions/code_viewer_actions.js
+++ b/ui_framework/doc_site/src/actions/code_viewer_actions.js
@@ -1,8 +1,9 @@
 import ActionTypes from './action_types';
 
-export const openCodeViewer = source => ({
+export const openCodeViewer = (source, title) => ({
   type: ActionTypes.OPEN_CODE_VIEWER,
   source,
+  title,
 });
 
 export const closeCodeViewer = () => ({
diff --git a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.jsx b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.jsx
index a9bc023b934b1..bce8c244d148c 100644
--- a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.jsx
+++ b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.jsx
@@ -10,7 +10,7 @@ export class GuideSandboxCodeToggle extends Component {
   }
 
   onClickSource() {
-    this.props.openCodeViewer(this.props.source);
+    this.props.openCodeViewer(this.props.source, this.props.title);
   }
 
   render() {
@@ -27,5 +27,6 @@ export class GuideSandboxCodeToggle extends Component {
 
 GuideSandboxCodeToggle.propTypes = {
   source: PropTypes.array,
+  title: PropTypes.string,
   openCodeViewer: PropTypes.func,
 };
diff --git a/ui_framework/doc_site/src/components/guide_section/guide_section.jsx b/ui_framework/doc_site/src/components/guide_section/guide_section.jsx
index 2a1561f61e610..af596a89ae6b6 100644
--- a/ui_framework/doc_site/src/components/guide_section/guide_section.jsx
+++ b/ui_framework/doc_site/src/components/guide_section/guide_section.jsx
@@ -16,7 +16,7 @@ export class GuideSection extends Component {
   }
 
   onClickSource() {
-    this.props.openCodeViewer(this.props.source);
+    this.props.openCodeViewer(this.props.source, this.props.title);
   }
 
   componentWillMount() {
diff --git a/ui_framework/doc_site/src/store/index.js b/ui_framework/doc_site/src/store/index.js
index f82bdbc1cbe08..eb667cd7bbe29 100644
--- a/ui_framework/doc_site/src/store/index.js
+++ b/ui_framework/doc_site/src/store/index.js
@@ -9,3 +9,7 @@ export function getSections(state) {
 export function getSource(state) {
   return state.codeViewer.source;
 }
+
+export function getTitle(state) {
+  return state.codeViewer.title;
+}
diff --git a/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js b/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js
index d9c14916b55da..e9c9aa14fca67 100644
--- a/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js
+++ b/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js
@@ -1,39 +1,36 @@
+import { LOCATION_CHANGE } from 'react-router-redux';
+
 import ActionTypes from '../../actions/action_types';
 
 const defaultState = {
   isOpen: false,
   codesBySlug: {},
   source: undefined,
+  title: undefined,
 };
 
 export default function codeViewerReducer(state = defaultState, action) {
   switch (action.type) {
     case ActionTypes.OPEN_CODE_VIEWER: {
-      const source = action.source;
+      const { source, title } = action;
 
       if (state.code === source) {
         // If we are opening the existing code, then close the viewer.
         return Object.assign({}, state, {
           isOpen: false,
           source: undefined,
+          title: undefined,
         });
       }
 
       return Object.assign({}, state, {
         isOpen: true,
-        source: source,
+        source,
+        title,
       });
     }
 
-    case ActionTypes.UPDATE_CODE_VIEWER: {
-      if (state.isOpen) {
-        return Object.assign({}, state, {
-          source: state.codesBySlug[action.slug],
-        });
-      }
-      return state;
-    }
-
+    case LOCATION_CHANGE: // Close Code Viewer when we navigate somewhere.
     case ActionTypes.CLOSE_CODE_VIEWER: {
       return Object.assign({}, state, {
         isOpen: false,
@@ -41,25 +38,6 @@ export default function codeViewerReducer(state = defaultState, action) {
       });
     }
 
-    case ActionTypes.REGISTER_CODE: {
-      const codesBySlug = Object.assign({}, state.codesBySlug, {
-        [action.code.slug]: action.code,
-      });
-
-      return Object.assign({}, state, {
-        codesBySlug
-      });
-    }
-
-    case ActionTypes.UNREGISTER_CODE: {
-      const codesBySlug = Object.assign({}, state.codesBySlug);
-      delete codesBySlug[action.code.slug];
-
-      return Object.assign({}, state, {
-        codesBySlug
-      });
-    }
-
     default:
       break;
   }
diff --git a/ui_framework/doc_site/src/views/app_container.js b/ui_framework/doc_site/src/views/app_container.js
index 6223f53c32b8b..629debb3eae13 100644
--- a/ui_framework/doc_site/src/views/app_container.js
+++ b/ui_framework/doc_site/src/views/app_container.js
@@ -5,6 +5,7 @@ import {
   getIsCodeViewerOpen,
   getSections,
   getSource,
+  getTitle,
 } from '../store';
 import { AppView } from './app_view.jsx';
 import {
@@ -19,6 +20,7 @@ function mapStateToProps(state, ownProps) {
     routes: ownProps.routes,
     isCodeViewerOpen: getIsCodeViewerOpen(state),
     source: getSource(state),
+    title: getTitle(state),
     sections: getSections(state),
   };
 }
diff --git a/ui_framework/doc_site/src/views/app_view.jsx b/ui_framework/doc_site/src/views/app_view.jsx
index b14366e51f23e..e47d2df0e6ed7 100644
--- a/ui_framework/doc_site/src/views/app_view.jsx
+++ b/ui_framework/doc_site/src/views/app_view.jsx
@@ -69,7 +69,7 @@ export class AppView extends Component {
         <GuideCodeViewer
           isOpen={this.props.isCodeViewerOpen}
           onClose={this.onCloseCodeViewer}
-          title={'No title'}
+          title={this.props.title}
           source={this.props.source}
         />
       </div>
@@ -87,6 +87,7 @@ AppView.propTypes = {
   unregisterSection: PropTypes.func,
   sections: PropTypes.array,
   source: PropTypes.array,
+  title: PropTypes.string,
 };
 
 AppView.defaultProps = {
diff --git a/ui_framework/doc_site/src/views/event/events_sandbox.jsx b/ui_framework/doc_site/src/views/event/events_sandbox.jsx
index 6861810ec0b56..3281894cc662f 100644
--- a/ui_framework/doc_site/src/views/event/events_sandbox.jsx
+++ b/ui_framework/doc_site/src/views/event/events_sandbox.jsx
@@ -21,6 +21,7 @@ export default props => (
         type: GuideSectionTypes.HTML,
         code: html,
       }]}
+      title={props.route.name}
     />
   </GuideSandbox>
 );
diff --git a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.jsx b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.jsx
index 6b9571503f644..2d0b1b32f7825 100644
--- a/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.jsx
+++ b/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.jsx
@@ -21,6 +21,7 @@ export default props => (
         type: GuideSectionTypes.HTML,
         code: html,
       }]}
+      title={props.route.name}
     />
   </GuideSandbox>
 );
diff --git a/ui_framework/doc_site/src/views/view/view_sandbox.jsx b/ui_framework/doc_site/src/views/view/view_sandbox.jsx
index 8f2cb06bfc009..5710d536097f5 100644
--- a/ui_framework/doc_site/src/views/view/view_sandbox.jsx
+++ b/ui_framework/doc_site/src/views/view/view_sandbox.jsx
@@ -21,6 +21,7 @@ export default props => (
         type: GuideSectionTypes.HTML,
         code: html,
       }]}
+      title={props.route.name}
     />
   </GuideSandbox>
 );

From 899f040dd3c9119b7ffffdd71196c3eb751ccf29 Mon Sep 17 00:00:00 2001
From: Brandon Kobel <brandon.kobel@gmail.com>
Date: Wed, 1 Mar 2017 16:32:54 -0500
Subject: [PATCH 078/150] Modifying timelion redraw logic to fix timing issue
 (#10486)

* Modifying timelion redraw logic to fix timing issue

When Timelion has issues plotting the series, it tries to redraw in 500ms. In some situations,
another event triggers the drawPlot function and it completes successfully and then the redraw comes
through and can clear-out the correctly drawn chart

* Modifying redraw logic to actually clear out the $.elem()

* Removing the setTimeout logic, and returning early
---
 .../timelion/public/panels/timechart/schema.js   | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/core_plugins/timelion/public/panels/timechart/schema.js b/src/core_plugins/timelion/public/panels/timechart/schema.js
index 5cba67d8e4f07..88c23c5788b0a 100644
--- a/src/core_plugins/timelion/public/panels/timechart/schema.js
+++ b/src/core_plugins/timelion/public/panels/timechart/schema.js
@@ -168,15 +168,15 @@ module.exports = function timechartFn(Private, config, $rootScope, timefilter, $
 
         let legendScope = $scope.$new();
         function drawPlot(plotConfig) {
+          if (!$('.chart-canvas', $elem).length) $elem.html(template);
+          const canvasElem = $('.chart-canvas', $elem);
 
-          if (!plotConfig || !plotConfig.length) {
-            $elem.empty();
+          // we can't use `$.plot` to draw the chart when the height or width is 0
+          // so, we'll need another event to trigger drawPlot to actually draw it
+          if (canvasElem.height() === 0 || canvasElem.width() === 0) {
             return;
           }
 
-          if (!$('.chart-canvas', $elem).length) $elem.html(template);
-          const canvasElem = $('.chart-canvas', $elem);
-
           const title = _(plotConfig).map('_title').compact().last();
           $('.chart-top-title', $elem).text(title == null ? '' : title);
 
@@ -242,11 +242,7 @@ module.exports = function timechartFn(Private, config, $rootScope, timefilter, $
             });
           }
 
-          try {
-            $scope.plot = $.plot(canvasElem, _.compact(series), options);
-          } catch (e) {
-            setTimeout(drawPlot, 500);
-          }
+          $scope.plot = $.plot(canvasElem, _.compact(series), options);
 
           if ($scope.plot) {
             $scope.$emit('renderComplete');

From d1b5c3ad28e71e4556ad08e84765e26c5a06f4fd Mon Sep 17 00:00:00 2001
From: Richard Hoffman <coverslide@users.noreply.github.com>
Date: Wed, 1 Mar 2017 14:26:16 -0800
Subject: [PATCH 079/150] Filter index fields and scripted fields by name only
 (#10089)

---
 .../public/management/sections/indices/_indexed_fields.js       | 2 +-
 .../public/management/sections/indices/_scripted_fields.js      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/sections/indices/_indexed_fields.js b/src/core_plugins/kibana/public/management/sections/indices/_indexed_fields.js
index 0704c1356c78c..bd536db804589 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_indexed_fields.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/_indexed_fields.js
@@ -37,7 +37,7 @@ uiModules.get('apps/management')
       function refreshRows() {
         // clear and destroy row scopes
         _.invoke(rowScopes.splice(0), '$destroy');
-        const fields = filter($scope.indexPattern.getNonScriptedFields(), $scope.fieldFilter);
+        const fields = filter($scope.indexPattern.getNonScriptedFields(), { name: $scope.fieldFilter });
         const sourceFilters = $scope.indexPattern.sourceFilters && $scope.indexPattern.sourceFilters.map(f => f.value) || [];
         const fieldWildcardMatch = fieldWildcardMatcher(sourceFilters);
         _.find($scope.editSections, { index: 'indexedFields' }).count = fields.length; // Update the tab count
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_scripted_fields.js b/src/core_plugins/kibana/public/management/sections/indices/_scripted_fields.js
index 19ba489cca289..39e8f47ca5557 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_scripted_fields.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/_scripted_fields.js
@@ -37,7 +37,7 @@ uiModules.get('apps/management')
         _.invoke(rowScopes, '$destroy');
         rowScopes.length = 0;
 
-        const fields = filter($scope.indexPattern.getScriptedFields(), $scope.fieldFilter);
+        const fields = filter($scope.indexPattern.getScriptedFields(), { name: $scope.fieldFilter });
         _.find($scope.editSections, { index: 'scriptedFields' }).count = fields.length; // Update the tab count
 
         $scope.rows = fields.map(function (field) {

From cbe26ea7266fcd58119beb5bbf3d509ed926cea6 Mon Sep 17 00:00:00 2001
From: Doug Penny <dpenny52@gmail.com>
Date: Wed, 1 Mar 2017 14:39:24 -0800
Subject: [PATCH 080/150] #10099 adds keyboard handling to close confirm_modal
 on ESC (#10455)

* #10099 adds keyboard handling to close confirm_modal on ESC

* remove resetSpyCounts, use beforeEach

* #10099 change from .bind to .on and remove unnecessary onKeyDown call

* #10099 move ESC handling to confirm_modal.js
---
 .../public/modals/__tests__/confirm_modal.js  | 42 ++++++++++++++++---
 src/ui/public/modals/confirm_modal.html       |  1 -
 src/ui/public/modals/confirm_modal.js         |  9 ++++
 src/ui/public/modals/modal_overlay.js         |  1 +
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/ui/public/modals/__tests__/confirm_modal.js b/src/ui/public/modals/__tests__/confirm_modal.js
index 3332028848e69..7cc8904f157c5 100644
--- a/src/ui/public/modals/__tests__/confirm_modal.js
+++ b/src/ui/public/modals/__tests__/confirm_modal.js
@@ -125,14 +125,13 @@ describe('ui/modals/confirm_modal', function () {
       showClose: true
     };
 
-    function resetSpyCounts() {
+    beforeEach(() => {
       confirmCallback.reset();
       closeCallback.reset();
       cancelCallback.reset();
-    }
+    });
 
     it('onClose', function () {
-      resetSpyCounts();
       confirmModal('hi', confirmModalOptions);
       $rootScope.$digest();
       findByDataTestSubj('confirmModalCloseButton').click();
@@ -143,7 +142,6 @@ describe('ui/modals/confirm_modal', function () {
     });
 
     it('onCancel', function () {
-      resetSpyCounts();
       confirmModal('hi', confirmModalOptions);
       $rootScope.$digest();
       findByDataTestSubj('confirmModalCancelButton').click();
@@ -154,7 +152,6 @@ describe('ui/modals/confirm_modal', function () {
     });
 
     it('onConfirm', function () {
-      resetSpyCounts();
       confirmModal('hi', confirmModalOptions);
       $rootScope.$digest();
       findByDataTestSubj('confirmModalConfirmButton').click();
@@ -166,7 +163,6 @@ describe('ui/modals/confirm_modal', function () {
 
 
     it('onClose defaults to onCancel if not specified', function () {
-      resetSpyCounts();
       const confirmModalOptions = {
         confirmButtonText: 'bye',
         onConfirm: confirmCallback,
@@ -182,5 +178,39 @@ describe('ui/modals/confirm_modal', function () {
       expect(confirmCallback.called).to.be(false);
       expect(cancelCallback.called).to.be(true);
     });
+
+    it('onKeyDown detects ESC and calls onCancel', function () {
+      const confirmModalOptions = {
+        confirmButtonText: 'bye',
+        onConfirm: confirmCallback,
+        onCancel: cancelCallback,
+        title: 'hi'
+      };
+
+      confirmModal('hi', confirmModalOptions);
+
+      const e = angular.element.Event('keydown'); // eslint-disable-line new-cap
+      e.keyCode = 27;
+      angular.element(document.body).trigger(e);
+
+      expect(cancelCallback.called).to.be(true);
+    });
+
+    it('onKeyDown ignores keys other than ESC', function () {
+      const confirmModalOptions = {
+        confirmButtonText: 'bye',
+        onConfirm: confirmCallback,
+        onCancel: cancelCallback,
+        title: 'hi'
+      };
+
+      confirmModal('hi', confirmModalOptions);
+
+      const e = angular.element.Event('keydown'); // eslint-disable-line new-cap
+      e.keyCode = 50;
+      angular.element(document.body).trigger(e);
+
+      expect(cancelCallback.called).to.be(false);
+    });
   });
 });
diff --git a/src/ui/public/modals/confirm_modal.html b/src/ui/public/modals/confirm_modal.html
index ad1b05dcd5b11..34a4eaae99a05 100644
--- a/src/ui/public/modals/confirm_modal.html
+++ b/src/ui/public/modals/confirm_modal.html
@@ -3,7 +3,6 @@
     <div class="kuiModalHeader__title" data-test-subj="confirmModalTitleText">
       {{title}}
     </div>
-
     <div
       ng-if="showClose"
       class="kuiModalHeaderCloseButton kuiIcon fa-times"
diff --git a/src/ui/public/modals/confirm_modal.js b/src/ui/public/modals/confirm_modal.js
index a9df21c824b46..b1529f242802a 100644
--- a/src/ui/public/modals/confirm_modal.js
+++ b/src/ui/public/modals/confirm_modal.js
@@ -1,3 +1,4 @@
+import angular from 'angular';
 import { noop } from 'lodash';
 import uiModules from 'ui/modules';
 import template from './confirm_modal.html';
@@ -73,11 +74,19 @@ module.factory('confirmModal', function ($rootScope, $compile) {
 
     const modalInstance = $compile(template)(confirmScope);
     modalPopover = new ModalOverlay(modalInstance);
+
+    angular.element(document.body).on('keydown', (event) => {
+      if(event.keyCode === 27) {
+        confirmScope.onCancel();
+      }
+    });
+
     modalInstance.find('[data-test-subj=confirmModalConfirmButton]').focus();
 
     function destroy() {
       modalPopover.destroy();
       modalPopover = undefined;
+      angular.element(document.body).off('keydown');
       confirmScope.$destroy();
     }
   };
diff --git a/src/ui/public/modals/modal_overlay.js b/src/ui/public/modals/modal_overlay.js
index f7f4183f713f7..43cd5cda1f159 100644
--- a/src/ui/public/modals/modal_overlay.js
+++ b/src/ui/public/modals/modal_overlay.js
@@ -8,6 +8,7 @@ export class ModalOverlay {
   constructor(modalElement) {
     this.overlayElement = angular.element(modalOverlayTemplate);
     this.overlayElement.append(modalElement);
+
     angular.element(document.body).append(this.overlayElement);
   }
 

From 7cbc22b052a28a1e5340a0fa58b27500e2495c87 Mon Sep 17 00:00:00 2001
From: Shaunak Kashyap <ycombinator@gmail.com>
Date: Thu, 2 Mar 2017 11:39:30 -0800
Subject: [PATCH 081/150] Management sections: Allow easy sub-section lookup
 (#10651)

* Allow sub-section lookup using `/` separator

* Adding assertion to check against the more explicit method

* Conforming to JS style guide

* Better wording
---
 src/ui/public/management/__tests__/section.js | 10 ++++++++++
 src/ui/public/management/section.js           | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/ui/public/management/__tests__/section.js b/src/ui/public/management/__tests__/section.js
index 97f08491aed69..b41a2e494a652 100644
--- a/src/ui/public/management/__tests__/section.js
+++ b/src/ui/public/management/__tests__/section.js
@@ -94,6 +94,16 @@ describe('ManagementSection', () => {
     it('returns undefined if un-registered', () => {
       expect(section.getSection('unknown')).to.be(undefined);
     });
+
+    it('returns sub-sections specified via a /-separated path', () => {
+      section.getSection('about').register('time');
+      expect(section.getSection('about/time')).to.be.a(ManagementSection);
+      expect(section.getSection('about/time')).to.be(section.getSection('about').getSection('time'));
+    });
+
+    it('returns undefined if a sub-section along a /-separated path does not exist', () => {
+      expect(section.getSection('about/damn/time')).to.be(undefined);
+    });
   });
 
   describe('items', () => {
diff --git a/src/ui/public/management/section.js b/src/ui/public/management/section.js
index 1a318939c2dcb..fccfc5f24dbd9 100644
--- a/src/ui/public/management/section.js
+++ b/src/ui/public/management/section.js
@@ -72,6 +72,17 @@ export default class ManagementSection {
    */
 
   getSection(id) {
-    return this.items.byId[id];
+    if (!id) {
+      return;
+    }
+
+    const sectionPath = id.split('/');
+    return sectionPath.reduce((currentSection, nextSection) => {
+      if (!currentSection) {
+        return;
+      }
+
+      return currentSection.items.byId[nextSection];
+    }, this);
   }
 }

From 4f3e625d7fa69034e3a74ac222792aba3025436c Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Thu, 2 Mar 2017 13:07:28 -0700
Subject: [PATCH 082/150] Time Series Metric Visualizations  (#9725)

* Initial import

* updating the editor width to match the new specs

* Adding tribe node support

* Adding tests for server libs

* removing bluebird

* removing extra cruft

* Fixing the font sizes

* Fixed the updating code

* Adding brushing

* Fixing linting issues

* Adding global filters

* Adding missing packages

* Default gauge style to half circle

* Fixing the markdown css bug

* Adding tests for the get_vis_data api

* Adding time offset

* Adding time offset to each type

* fixing bugs from time offset

* adding index pattern option to series

* Adding index pattern overrides

* Adding index pattern overrides

* Fixing tests

* Fixing brushing in the vis editor

* Changing the label

* Change the behavior of selecting a pipeline agg when only one exists.

* Refactoring series a bit

* Changing series options to just options

* Making sure we honor the toaster container height

* Adding first tests

* renaming vis_config to panel_config

* renaming vis_config to panel_config

* Adding more tests

* adding more tests

* removing api subdirectory

* refactoring get_vis_data (breaking it up and removing unused imports)

* reorganizing the visualization directory

* Re-organizing directory layouts and moving things to more logical places

* Refactoring React compontents to use ES6 syntax and adding propTypes for each. Also refactored out splats as much as possible.

* Adding serial differencing

* Refactored gauge to use 2 components instead of 4

* Finishing react refactor on visualizations. Consolidated legned funtionality

* Refactoring series config and removing a bunch of duplicate code

* fixing series config name

* Fixing numbers and strings (doesnt matter which it is); Fixing classname

* Changing the way the dark theme works

* Adding new vis into list for test

* Adding empty bucket check

* Fixing the index patterns in the aggs

* Fixing typo

* Refactoring vis_data

* Fixing std_metric

* Fixing refresh-hack

* Adding tests for get_splits, get_last_metric, map_bucket

* Fixing the error handing

* removing restrictions

* Sometimes values are strings or numbers... it doesn't matter

* Adding new color options for splits

* Fixing colors

* fixing size

* Adding support for fitlers agg

* Fixing tests

* Fixing splits for filters

* Fixing Top N to work better with fitlers

* Adding annotation editor

* initial work for annotations

* Finalizing annotations

* Fixing label

* making it expandable

* Fixing hacks fixed by #10175

* Fixing bars to use the same stacking options as lines

* Getting rid of align by colons

* removing unused depends

* removing unused depends

* Changing to readable lodash function

* Adding missing parens

* refactoring custom color picker

* Removing string refs and converting uncontrolled components

* Fixing the controlled components where value maybe null; converting error to css

* refactoring styles from components

* fixing the refresh behavoir borked by fullEditor

* Adding the executor service

* Fixing the test directories

* fixing save

* Adding filter ratios

* Fixing controlled components

* Trying to fix the weird typing

* Fixing offset bug with days

* Adding percentile rank

* Fixing yaxis updates; fixing percentile rank layout; adding steps to line chart

* removing unused depends

* Fixed a bug with the index patterns updating; fixed bug with charts rendering too much

* Fixing tests

* Commenting out React tests because the ENV must have change and they are no longer working

* Moving bucket transform

* moving calculate auto

* Moving calculate_indices

* moving extended_stats_types && get_agg_value

* moving get_buckets_path

* moving get_sibling_agg_value

* moving parse_settings

* moving series_agg

* Moving unit_to_seconds

* Fixing tests

* Fixing per PR

* Renaming vars to make it more clear what's happening

* Changing the way testible functions are exported

* fixing tests

* removing unused imports; fixing typos; fixing package name

* Name has to match the plugin path

* Fixing typos; removing unused imports

* fixing tests

* rearanging and removing unused imports

* Fixing a bug with unque names for radio buttons on the same form

* Fixing filter ratio to use a metric instead of just count

* fixing a bug with the new filter ratios

* Fixing the file path from the #8

* Fixing renderComplete trigger; Fixing embedded mode; Changing names for Timelion and Time Series Visual Builder

* Fixing name

* Fixing docs

* Fixing a typo for the field select for terms splits

* Fixing tests
---
 docs/timelion.asciidoc                        |   4 +-
 docs/visualize.asciidoc                       |   2 +-
 package.json                                  |  14 +
 src/core_plugins/metrics/index.js             |  31 +
 src/core_plugins/metrics/package.json         |   6 +
 .../__tests__/add_delete_buttons.js           |  67 ++
 .../public/components/__tests__/yes_no.js     |  33 +
 .../public/components/add_delete_buttons.js   |  58 ++
 .../metrics/public/components/aggs/agg.js     |  51 +
 .../metrics/public/components/aggs/agg_row.js |  53 +
 .../public/components/aggs/agg_select.js      |  26 +
 .../public/components/aggs/calculation.js     |  84 ++
 .../public/components/aggs/cumulative_sum.js  |  52 +
 .../public/components/aggs/derivative.js      |  71 ++
 .../public/components/aggs/field_select.js    |  44 +
 .../public/components/aggs/filter_ratio.js    | 103 ++
 .../public/components/aggs/metric_select.js   |  64 ++
 .../public/components/aggs/moving_average.js  | 118 +++
 .../public/components/aggs/percentile.js      | 190 ++++
 .../public/components/aggs/percentile_rank.js |  76 ++
 .../public/components/aggs/serial_diff.js     |  71 ++
 .../public/components/aggs/series_agg.js      |  66 ++
 .../metrics/public/components/aggs/std_agg.js |  63 ++
 .../public/components/aggs/std_deviation.js   |  88 ++
 .../public/components/aggs/std_sibling.js     |  96 ++
 .../metrics/public/components/aggs/vars.js    |  80 ++
 .../public/components/annotations_editor.js   | 168 +++
 .../metrics/public/components/color_picker.js |  95 ++
 .../metrics/public/components/color_rules.js  | 115 ++
 .../public/components/custom_color_picker.js  | 131 +++
 .../public/components/data_format_picker.js   |  83 ++
 .../metrics/public/components/error.js        |  40 +
 .../metrics/public/components/icon_select.js  | 116 +++
 .../public/components/index_pattern.js        |  66 ++
 .../components/lib/__tests__/agg_lookup.js    |  45 +
 .../lib/__tests__/calculate_label.js          |  62 ++
 .../lib/__tests__/calculate_siblings.js       |  19 +
 .../lib/__tests__/collection_actions.js       |  58 ++
 .../lib/__tests__/convert_series_to_vars.js   |   8 +
 .../lib/__tests__/create_number_handler.js    |  27 +
 .../lib/__tests__/create_select_handler.js    |  26 +
 .../lib/__tests__/create_text_handler.js      |  28 +
 .../lib/__tests__/generate_by_type_filter.js  |  53 +
 .../components/lib/__tests__/re_id_series.js  |  78 ++
 .../components/lib/__tests__/replace_vars.js  |  23 +
 .../lib/__tests__/tick_formatter.js           |  47 +
 .../public/components/lib/agg_lookup.js       |  78 ++
 .../public/components/lib/agg_to_component.js |  42 +
 .../public/components/lib/basic_aggs.js       |  12 +
 .../public/components/lib/calculate_label.js  |  37 +
 .../components/lib/calculate_siblings.js      |  17 +
 .../components/lib/collection_actions.js      |  38 +
 .../components/lib/convert_series_to_vars.js  |  41 +
 .../components/lib/create_agg_row_render.js   |  26 +
 .../components/lib/create_change_handler.js   |   5 +
 .../components/lib/create_number_handler.js   |  10 +
 .../components/lib/create_select_handler.js   |  10 +
 .../components/lib/create_text_handler.js     |  10 +
 .../components/lib/generate_by_type_filter.js |  27 +
 .../components/lib/new_metric_agg_fn.js       |   7 +
 .../public/components/lib/new_series_fn.js    |  19 +
 .../public/components/lib/re_id_series.js     |  22 +
 .../public/components/lib/replace_vars.js     |  10 +
 .../components/lib/series_change_handler.js   |  23 +
 .../public/components/lib/tick_formatter.js   |  32 +
 .../public/components/markdown_editor.js      | 144 +++
 .../metrics/public/components/panel_config.js |  32 +
 .../public/components/panel_config/gauge.js   | 168 +++
 .../components/panel_config/markdown.js       | 157 +++
 .../public/components/panel_config/metric.js  | 106 ++
 .../components/panel_config/timeseries.js     | 151 +++
 .../public/components/panel_config/top_n.js   | 129 +++
 .../metrics/public/components/series.js       | 108 ++
 .../public/components/series_config.js        |  64 ++
 .../public/components/series_editor.js        |  83 ++
 .../metrics/public/components/split.js        |  73 ++
 .../public/components/splits/everything.js    |  28 +
 .../public/components/splits/filter.js        |  38 +
 .../public/components/splits/filter_items.js  |  89 ++
 .../public/components/splits/filters.js       |  35 +
 .../components/splits/group_by_select.js      |  25 +
 .../metrics/public/components/splits/terms.js |  65 ++
 .../metrics/public/components/tooltip.js      |  26 +
 .../metrics/public/components/vis_editor.js   |  67 ++
 .../components/vis_editor_visualization.js    |  78 ++
 .../metrics/public/components/vis_picker.js   |  68 ++
 .../components/vis_types/gauge/series.js      | 167 +++
 .../public/components/vis_types/gauge/vis.js  |  78 ++
 .../components/vis_types/markdown/series.js   | 149 +++
 .../components/vis_types/markdown/vis.js      |  61 ++
 .../components/vis_types/metric/series.js     | 167 +++
 .../public/components/vis_types/metric/vis.js |  73 ++
 .../components/vis_types/timeseries/config.js | 221 ++++
 .../components/vis_types/timeseries/series.js | 166 +++
 .../components/vis_types/timeseries/vis.js    | 147 +++
 .../components/vis_types/top_n/series.js      | 122 +++
 .../public/components/vis_types/top_n/vis.js  |  63 ++
 .../public/components/visualization.js        |  58 ++
 .../metrics/public/components/yes_no.js       |  41 +
 .../metrics/public/directives/vis_editor.js   |  27 +
 .../public/directives/visualization.js        |  41 +
 .../metrics/public/kbn_vis_types/editor.html  |   6 +
 .../public/kbn_vis_types/editor_controller.js | 110 ++
 .../metrics/public/kbn_vis_types/index.js     |  31 +
 .../metrics/public/kbn_vis_types/vis.html     |   5 +
 .../public/kbn_vis_types/vis_controller.js    |  48 +
 .../metrics/public/less/color_picker.less     |  89 ++
 .../metrics/public/less/color_rules.less      |  36 +
 .../metrics/public/less/editor.less           | 426 ++++++++
 .../metrics/public/less/error.less            |  34 +
 .../metrics/public/less/kbn_tabs.less         |  29 +
 .../metrics/public/less/main.less             |  40 +
 .../metrics/public/less/markdown.less         |  60 ++
 .../metrics/public/less/misc.less             | 104 ++
 .../metrics/public/less/sortable.less         |  38 +
 .../metrics/public/less/type.less             |  94 ++
 .../metrics/public/lib/__tests__/add_scope.js |  58 ++
 .../lib/__tests__/create_brush_handler.js     |  33 +
 .../metrics/public/lib/add_scope.js           |  33 +
 .../public/lib/create_brush_handler.js        |   8 +
 .../metrics/public/lib/create_new_panel.js    |  18 +
 src/core_plugins/metrics/public/lib/fetch.js  |  32 +
 .../metrics/public/lib/fetch_fields.js        |  25 +
 .../services/__tests__/executor_provider.js   | 102 ++
 .../metrics/public/services/executor.js       |   4 +
 .../public/services/executor_provider.js      | 110 ++
 .../visualizations/components/annotation.js   |  73 ++
 .../visualizations/components/flot_chart.js   | 261 +++++
 .../public/visualizations/components/gauge.js | 199 ++++
 .../visualizations/components/gauge_vis.js    | 193 ++++
 .../components/horizontal_legend.js           |  36 +
 .../visualizations/components/legend.js       |  23 +
 .../visualizations/components/metric.js       | 186 ++++
 .../visualizations/components/timeseries.js   | 164 +++
 .../components/timeseries_chart.js            | 239 +++++
 .../public/visualizations/components/top_n.js |  82 ++
 .../components/vertical_legend.js             |  49 +
 .../metrics/public/visualizations/index.js    |  20 +
 .../visualizations/less/includes/bar.less     |   0
 .../visualizations/less/includes/chart.less   | 179 ++++
 .../visualizations/less/includes/colors.less  |  32 +
 .../visualizations/less/includes/gauge.less   | 113 ++
 .../visualizations/less/includes/metric.less  |  61 ++
 .../visualizations/less/includes/top_n.less   |  55 +
 .../public/visualizations/less/main.less      |   5 +
 .../lib/__tests__/calcualte_bar_width.js      |  18 +
 .../lib/__tests__/get_last_value.js           |  32 +
 .../lib/__tests__/get_value_by.js             |  23 +
 .../visualizations/lib/calculate_bar_width.js |  12 +
 .../public/visualizations/lib/colors.js       |   8 +
 .../lib/create_legend_series.js               |  28 +
 .../public/visualizations/lib/events.js       |   3 +
 .../metrics/public/visualizations/lib/flot.js |  13 +
 .../visualizations/lib/get_last_value.js      |  20 +
 .../public/visualizations/lib/get_value_by.js |   7 +
 .../server/lib/__tests__/get_fields.js        |  84 ++
 .../metrics/server/lib/get_fields.js          |  40 +
 .../metrics/server/lib/get_vis_data.js        |  15 +
 .../__tests__/build_processor_function.js     |  47 +
 .../vis_data/__tests__/build_request_body.js  | 133 +++
 .../vis_data/__tests__/calculate_indices.js   |  56 +
 .../lib/vis_data/__tests__/fixture.json       | 984 +++++++++++++++++
 .../fixtures/std_metric_fixture.json          | 985 ++++++++++++++++++
 .../__tests__/get_interval_and_timefield.js   |  25 +
 .../__tests__/helpers/bucket_transform.js     | 354 +++++++
 .../__tests__/helpers/get_agg_value.js        |  79 ++
 .../__tests__/helpers/get_bucket_size.js      |  38 +
 .../__tests__/helpers/get_buckets_path.js     |  56 +
 .../helpers/get_default_decoration.js         |  95 ++
 .../__tests__/helpers/get_last_metric.js      |  23 +
 .../helpers/get_sibling_agg_value.js          |  36 +
 .../vis_data/__tests__/helpers/get_splits.js  | 130 +++
 .../__tests__/helpers/get_timerange.js        |  24 +
 .../vis_data/__tests__/helpers/map_bucket.js  |  37 +
 .../__tests__/helpers/parse_settings.js       |  51 +
 .../lib/vis_data/__tests__/offset_time.js     |  44 +
 .../lib/vis_data/build_annotation_request.js  |   8 +
 .../lib/vis_data/build_processor_function.js  |   5 +
 .../server/lib/vis_data/build_request_body.js |  10 +
 .../server/lib/vis_data/calculate_indices.js  |  46 +
 .../server/lib/vis_data/get_annotations.js    |  59 ++
 .../vis_data/get_interval_and_timefield.js    |   5 +
 .../server/lib/vis_data/get_panel_data.js     |  34 +
 .../server/lib/vis_data/get_request_params.js |  23 +
 .../vis_data/handle_annotation_response.js    |  11 +
 .../lib/vis_data/handle_error_response.js     |  17 +
 .../lib/vis_data/handle_response_body.js      |  18 +
 .../lib/vis_data/helpers/bucket_transform.js  | 173 +++
 .../lib/vis_data/helpers/calculate_auto.js    |  70 ++
 .../vis_data/helpers/extended_stats_types.js  |   7 +
 .../lib/vis_data/helpers/get_agg_value.js     |  35 +
 .../lib/vis_data/helpers/get_bucket_size.js   |  19 +
 .../lib/vis_data/helpers/get_buckets_path.js  |  31 +
 .../helpers/get_default_decoration.js         |  23 +
 .../lib/vis_data/helpers/get_last_metric.js   |   6 +
 .../vis_data/helpers/get_sibling_agg_value.js |   8 +
 .../lib/vis_data/helpers/get_split_colors.js  |  24 +
 .../server/lib/vis_data/helpers/get_splits.js |  53 +
 .../lib/vis_data/helpers/get_timerange.js     |   6 +
 .../server/lib/vis_data/helpers/index.js      |  27 +
 .../server/lib/vis_data/helpers/map_bucket.js |   4 +
 .../lib/vis_data/helpers/parse_settings.js    |  29 +
 .../lib/vis_data/helpers/unit_to_seconds.js   |  14 +
 .../server/lib/vis_data/offset_time.js        |  12 +
 .../annotations/date_histogram.js             |  22 +
 .../request_processors/annotations/index.js   |   8 +
 .../request_processors/annotations/query.js   |  49 +
 .../annotations/top_hits.js                   |  22 +
 .../series/__tests__/date_histogram.js        | 110 ++
 .../series/__tests__/metric_buckets.js        |  84 ++
 .../series/__tests__/query.js                 | 227 ++++
 .../series/__tests__/sibling_buckets.js       |  68 ++
 .../series/__tests__/split_by_everything.js   |  52 +
 .../series/__tests__/split_by_filter.js       |  55 +
 .../series/__tests__/split_by_filters.js      |  88 ++
 .../series/__tests__/split_by_terms.js        | 101 ++
 .../series/date_histogram.js                  |  21 +
 .../series/filter_ratios.js                   |  45 +
 .../request_processors/series/index.js        |  21 +
 .../series/metric_buckets.js                  |  24 +
 .../request_processors/series/query.js        |  48 +
 .../series/sibling_buckets.js                 |  24 +
 .../series/split_by_everything.js             |  12 +
 .../series/split_by_filter.js                 |   9 +
 .../series/split_by_filters.js                |  13 +
 .../series/split_by_terms.js                  |  45 +
 .../series/__tests__/_series_agg.js           |  73 ++
 .../series/__tests__/percentile.js            | 138 +++
 .../series/__tests__/series_agg.js            | 109 ++
 .../series/__tests__/std_deviation_bands.js   | 100 ++
 .../series/__tests__/std_deviation_sibling.js | 104 ++
 .../series/__tests__/std_metric.js            |  81 ++
 .../series/__tests__/std_sibling.js           |  96 ++
 .../series/__tests__/time_shift.js            |  71 ++
 .../response_processors/series/_series_agg.js |  71 ++
 .../response_processors/series/index.js       |  18 +
 .../response_processors/series/percentile.js  |  57 +
 .../response_processors/series/series_agg.js  |  36 +
 .../series/std_deviation_bands.js             |  33 +
 .../series/std_deviation_sibling.js           |  48 +
 .../response_processors/series/std_metric.js  |  29 +
 .../response_processors/series/std_sibling.js |  29 +
 .../response_processors/series/time_shift.js  |  19 +
 .../metrics/server/routes/fields.js           |  15 +
 src/core_plugins/metrics/server/routes/vis.js |  19 +
 src/core_plugins/timelion/public/vis/index.js |   2 +-
 .../functional/apps/visualize/_chart_types.js |   2 +-
 247 files changed, 16793 insertions(+), 5 deletions(-)
 create mode 100644 src/core_plugins/metrics/index.js
 create mode 100644 src/core_plugins/metrics/package.json
 create mode 100644 src/core_plugins/metrics/public/components/__tests__/add_delete_buttons.js
 create mode 100644 src/core_plugins/metrics/public/components/__tests__/yes_no.js
 create mode 100644 src/core_plugins/metrics/public/components/add_delete_buttons.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/agg.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/agg_row.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/agg_select.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/calculation.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/derivative.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/field_select.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/filter_ratio.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/metric_select.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/moving_average.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/percentile.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/percentile_rank.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/serial_diff.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/series_agg.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/std_agg.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/std_deviation.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/std_sibling.js
 create mode 100644 src/core_plugins/metrics/public/components/aggs/vars.js
 create mode 100644 src/core_plugins/metrics/public/components/annotations_editor.js
 create mode 100644 src/core_plugins/metrics/public/components/color_picker.js
 create mode 100644 src/core_plugins/metrics/public/components/color_rules.js
 create mode 100644 src/core_plugins/metrics/public/components/custom_color_picker.js
 create mode 100644 src/core_plugins/metrics/public/components/data_format_picker.js
 create mode 100644 src/core_plugins/metrics/public/components/error.js
 create mode 100644 src/core_plugins/metrics/public/components/icon_select.js
 create mode 100644 src/core_plugins/metrics/public/components/index_pattern.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/agg_lookup.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/calculate_label.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/calculate_siblings.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/collection_actions.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/convert_series_to_vars.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/create_number_handler.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/create_text_handler.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/generate_by_type_filter.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/re_id_series.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/replace_vars.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/__tests__/tick_formatter.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/agg_lookup.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/agg_to_component.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/basic_aggs.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/calculate_label.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/calculate_siblings.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/collection_actions.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/create_agg_row_render.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/create_change_handler.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/create_number_handler.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/create_select_handler.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/create_text_handler.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/generate_by_type_filter.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/new_metric_agg_fn.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/new_series_fn.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/re_id_series.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/replace_vars.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/series_change_handler.js
 create mode 100644 src/core_plugins/metrics/public/components/lib/tick_formatter.js
 create mode 100644 src/core_plugins/metrics/public/components/markdown_editor.js
 create mode 100644 src/core_plugins/metrics/public/components/panel_config.js
 create mode 100644 src/core_plugins/metrics/public/components/panel_config/gauge.js
 create mode 100644 src/core_plugins/metrics/public/components/panel_config/markdown.js
 create mode 100644 src/core_plugins/metrics/public/components/panel_config/metric.js
 create mode 100644 src/core_plugins/metrics/public/components/panel_config/timeseries.js
 create mode 100644 src/core_plugins/metrics/public/components/panel_config/top_n.js
 create mode 100644 src/core_plugins/metrics/public/components/series.js
 create mode 100644 src/core_plugins/metrics/public/components/series_config.js
 create mode 100644 src/core_plugins/metrics/public/components/series_editor.js
 create mode 100644 src/core_plugins/metrics/public/components/split.js
 create mode 100644 src/core_plugins/metrics/public/components/splits/everything.js
 create mode 100644 src/core_plugins/metrics/public/components/splits/filter.js
 create mode 100644 src/core_plugins/metrics/public/components/splits/filter_items.js
 create mode 100644 src/core_plugins/metrics/public/components/splits/filters.js
 create mode 100644 src/core_plugins/metrics/public/components/splits/group_by_select.js
 create mode 100644 src/core_plugins/metrics/public/components/splits/terms.js
 create mode 100644 src/core_plugins/metrics/public/components/tooltip.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_editor.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_editor_visualization.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_picker.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/gauge/series.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/markdown/series.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/metric/series.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/metric/vis.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/top_n/series.js
 create mode 100644 src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
 create mode 100644 src/core_plugins/metrics/public/components/visualization.js
 create mode 100644 src/core_plugins/metrics/public/components/yes_no.js
 create mode 100644 src/core_plugins/metrics/public/directives/vis_editor.js
 create mode 100644 src/core_plugins/metrics/public/directives/visualization.js
 create mode 100644 src/core_plugins/metrics/public/kbn_vis_types/editor.html
 create mode 100644 src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
 create mode 100644 src/core_plugins/metrics/public/kbn_vis_types/index.js
 create mode 100644 src/core_plugins/metrics/public/kbn_vis_types/vis.html
 create mode 100644 src/core_plugins/metrics/public/kbn_vis_types/vis_controller.js
 create mode 100644 src/core_plugins/metrics/public/less/color_picker.less
 create mode 100644 src/core_plugins/metrics/public/less/color_rules.less
 create mode 100644 src/core_plugins/metrics/public/less/editor.less
 create mode 100644 src/core_plugins/metrics/public/less/error.less
 create mode 100644 src/core_plugins/metrics/public/less/kbn_tabs.less
 create mode 100644 src/core_plugins/metrics/public/less/main.less
 create mode 100644 src/core_plugins/metrics/public/less/markdown.less
 create mode 100644 src/core_plugins/metrics/public/less/misc.less
 create mode 100644 src/core_plugins/metrics/public/less/sortable.less
 create mode 100644 src/core_plugins/metrics/public/less/type.less
 create mode 100644 src/core_plugins/metrics/public/lib/__tests__/add_scope.js
 create mode 100644 src/core_plugins/metrics/public/lib/__tests__/create_brush_handler.js
 create mode 100644 src/core_plugins/metrics/public/lib/add_scope.js
 create mode 100644 src/core_plugins/metrics/public/lib/create_brush_handler.js
 create mode 100644 src/core_plugins/metrics/public/lib/create_new_panel.js
 create mode 100644 src/core_plugins/metrics/public/lib/fetch.js
 create mode 100644 src/core_plugins/metrics/public/lib/fetch_fields.js
 create mode 100644 src/core_plugins/metrics/public/services/__tests__/executor_provider.js
 create mode 100644 src/core_plugins/metrics/public/services/executor.js
 create mode 100644 src/core_plugins/metrics/public/services/executor_provider.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/annotation.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/flot_chart.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/gauge.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/legend.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/metric.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/timeseries.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/top_n.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/index.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/less/includes/bar.less
 create mode 100644 src/core_plugins/metrics/public/visualizations/less/includes/chart.less
 create mode 100644 src/core_plugins/metrics/public/visualizations/less/includes/colors.less
 create mode 100644 src/core_plugins/metrics/public/visualizations/less/includes/gauge.less
 create mode 100644 src/core_plugins/metrics/public/visualizations/less/includes/metric.less
 create mode 100644 src/core_plugins/metrics/public/visualizations/less/includes/top_n.less
 create mode 100644 src/core_plugins/metrics/public/visualizations/less/main.less
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/__tests__/calcualte_bar_width.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/__tests__/get_last_value.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/__tests__/get_value_by.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/calculate_bar_width.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/colors.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/events.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/flot.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/get_last_value.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/get_value_by.js
 create mode 100644 src/core_plugins/metrics/server/lib/__tests__/get_fields.js
 create mode 100644 src/core_plugins/metrics/server/lib/get_fields.js
 create mode 100644 src/core_plugins/metrics/server/lib/get_vis_data.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/build_processor_function.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/build_request_body.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/calculate_indices.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/fixture.json
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/fixtures/std_metric_fixture.json
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/get_interval_and_timefield.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/bucket_transform.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_agg_value.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_bucket_size.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_buckets_path.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_default_decoration.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_last_metric.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_sibling_agg_value.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_splits.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_timerange.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/map_bucket.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/parse_settings.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/__tests__/offset_time.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/build_annotation_request.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/build_processor_function.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/build_request_body.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/calculate_indices.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/get_annotations.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/get_interval_and_timefield.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/get_panel_data.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/get_request_params.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/handle_annotation_response.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/handle_error_response.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/handle_response_body.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/bucket_transform.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/calculate_auto.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/extended_stats_types.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_agg_value.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_bucket_size.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_buckets_path.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_default_decoration.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_last_metric.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_sibling_agg_value.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_split_colors.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/get_timerange.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/index.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/map_bucket.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/parse_settings.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/helpers/unit_to_seconds.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/offset_time.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/date_histogram.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/index.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/query.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/top_hits.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/date_histogram.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/metric_buckets.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/query.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/sibling_buckets.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_everything.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_filter.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_filters.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_terms.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/date_histogram.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/filter_ratios.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/index.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/metric_buckets.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/query.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/sibling_buckets.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_everything.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_filter.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_filters.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_terms.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/_series_agg.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/percentile.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/series_agg.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_deviation_bands.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_deviation_sibling.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_metric.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_sibling.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/time_shift.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/_series_agg.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/index.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/percentile.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/series_agg.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_bands.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_sibling.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_metric.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_sibling.js
 create mode 100644 src/core_plugins/metrics/server/lib/vis_data/response_processors/series/time_shift.js
 create mode 100644 src/core_plugins/metrics/server/routes/fields.js
 create mode 100644 src/core_plugins/metrics/server/routes/vis.js

diff --git a/docs/timelion.asciidoc b/docs/timelion.asciidoc
index 895ec55186367..6fe13670f9a4e 100644
--- a/docs/timelion.asciidoc
+++ b/docs/timelion.asciidoc
@@ -6,7 +6,7 @@
 Timelion is a time series data visualizer that enables you to combine totally
 independent data sources within a single visualization. It's driven by a simple
 expression language you use to retrieve time series data, perform calculations
-to tease out the answers to complex questions, and visualize the results. 
+to tease out the answers to complex questions, and visualize the results.
 
 For example, Timelion enables you to easily get the answers to questions like:
 
@@ -32,7 +32,7 @@ Timelion expression as a Kibana dashboard panel. You can then add it to
 a dashboard like any other visualization.
 
 TIP: You can also create time series visualizations right from the Visualize
-app--just select the Timeseries visualization type and enter a Timelion
+app--just select the Timelion visualization type and enter a Timelion
 expression in the expression field.
 
 
diff --git a/docs/visualize.asciidoc b/docs/visualize.asciidoc
index 36c7b713356cb..7b3ca7b6a33e0 100644
--- a/docs/visualize.asciidoc
+++ b/docs/visualize.asciidoc
@@ -34,7 +34,7 @@ instructions.
 <<tagcloud-chart,Tag cloud>>:: Display words as a cloud in which the size of the word correspond to its importance
 <<tilemap,Tile map>>:: Associate the results of an aggregation with geographic
 locations.
-Timeseries:: Compute and combine data from multiple time series
+Timelion:: Compute and combine data from multiple time series
 data sets.
 
 . Specify a search query to retrieve the data for your visualization:
diff --git a/package.json b/package.json
index 12fc20dacc67e..3d690214dc78a 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
     "brace": "0.5.1",
     "bunyan": "1.7.1",
     "check-hash": "1.0.1",
+    "color": "1.0.3",
     "commander": "2.8.1",
     "css-loader": "0.17.0",
     "d3": "3.5.6",
@@ -187,12 +188,14 @@
     "classnames": "2.2.5",
     "del": "1.2.1",
     "elasticdump": "2.1.1",
+    "enzyme": "2.7.0",
     "eslint": "3.11.1",
     "eslint-plugin-babel": "4.0.0",
     "eslint-plugin-mocha": "4.7.0",
     "event-stream": "3.3.2",
     "expect.js": "0.3.1",
     "faker": "1.1.0",
+    "flot-charts": "^0.8.3",
     "grunt": "1.0.1",
     "grunt-aws-s3": "0.14.5",
     "grunt-babel": "6.0.0",
@@ -212,6 +215,7 @@
     "image-diff": "1.6.0",
     "intern": "3.2.3",
     "istanbul-instrumenter-loader": "0.1.3",
+    "jsdom": "9.9.1",
     "karma": "1.2.0",
     "karma-chrome-launcher": "0.2.0",
     "karma-coverage": "0.5.1",
@@ -232,15 +236,25 @@
     "npm": "3.10.10",
     "portscanner": "1.0.0",
     "proxyquire": "1.7.10",
+    "pui-react-overlay-trigger": "^7.0.0",
+    "pui-react-tooltip": "^7.0.0",
     "react": "15.2.0",
+    "react-ace": "3.7.0",
     "react-addons-test-utils": "15.2.0",
+    "react-anything-sortable": "^1.6.1",
+    "react-color": "^2.2.7",
     "react-dom": "15.2.0",
+    "react-markdown": "^2.4.2",
     "react-redux": "4.4.5",
     "react-router": "2.0.0",
     "react-router-redux": "4.0.4",
+    "react-select": "^1.0.0-rc.1",
+    "react-sortable": "^1.1.0",
+    "reactcss": "^1.0.7",
     "redux": "3.0.0",
     "redux-thunk": "0.1.0",
     "sass-loader": "4.0.0",
+    "simianhacker-react-resize-aware": "^1.0.11",
     "simple-git": "1.37.0",
     "sinon": "1.17.2",
     "source-map": "0.5.6",
diff --git a/src/core_plugins/metrics/index.js b/src/core_plugins/metrics/index.js
new file mode 100644
index 0000000000000..e8b1ef3190559
--- /dev/null
+++ b/src/core_plugins/metrics/index.js
@@ -0,0 +1,31 @@
+import fieldsRoutes from './server/routes/fields';
+import visDataRoutes from './server/routes/vis';
+
+export default function (kibana) {
+  return new kibana.Plugin({
+    require: ['kibana','elasticsearch'],
+
+    uiExports: {
+      visTypes: [
+        'plugins/metrics/kbn_vis_types'
+      ]
+    },
+
+    config(Joi) {
+      return Joi.object({
+        enabled: Joi.boolean().default(true),
+        chartResolution: Joi.number().default(150),
+        minimumBucketSize: Joi.number().default(10)
+      }).default();
+    },
+
+
+    init(server, options) {
+      const { status } = server.plugins.elasticsearch;
+      fieldsRoutes(server);
+      visDataRoutes(server);
+    }
+
+
+  });
+}
diff --git a/src/core_plugins/metrics/package.json b/src/core_plugins/metrics/package.json
new file mode 100644
index 0000000000000..6b4874dfe6a68
--- /dev/null
+++ b/src/core_plugins/metrics/package.json
@@ -0,0 +1,6 @@
+{
+  "author": "Chris Cowan<chris@elastic.co>",
+  "name": "metrics",
+  "version": "kibana"
+}
+
diff --git a/src/core_plugins/metrics/public/components/__tests__/add_delete_buttons.js b/src/core_plugins/metrics/public/components/__tests__/add_delete_buttons.js
new file mode 100644
index 0000000000000..b676e63673e07
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/__tests__/add_delete_buttons.js
@@ -0,0 +1,67 @@
+// import React from 'react';
+// import { expect } from 'chai';
+// import { shallow } from 'enzyme';
+// import sinon from 'sinon';
+// import AddDeleteButtons from '../add_delete_buttons';
+// import Tooltip from '../tooltip';
+
+// describe('<AddDeleteButtons />', () => {
+
+//   it('calls onAdd={handleAdd}', () => {
+//     const handleAdd = sinon.spy();
+//     const wrapper = shallow(
+//       <AddDeleteButtons onAdd={handleAdd} />
+//     );
+//     wrapper.find('a').at(0).simulate('click');
+//     expect(handleAdd.calledOnce).to.equal(true);
+//   });
+
+//   it('calls onDelete={handleDelete}', () => {
+//     const handleDelete = sinon.spy();
+//     const wrapper = shallow(
+//       <AddDeleteButtons onDelete={handleDelete} />
+//     );
+//     wrapper.find('a').at(1).simulate('click');
+//     expect(handleDelete.calledOnce).to.equal(true);
+//   });
+
+//   it('calls onClone={handleClone}', () => {
+//     const handleClone = sinon.spy();
+//     const wrapper = shallow(
+//       <AddDeleteButtons onClone={handleClone} />
+//     );
+//     wrapper.find('a').at(0).simulate('click');
+//     expect(handleClone.calledOnce).to.equal(true);
+//   });
+
+//   it('disableDelete={true}', () => {
+//     const wrapper = shallow(
+//       <AddDeleteButtons disableDelete={true} />
+//     );
+//     expect(wrapper.find({ text: 'Delete' })).to.have.length(0);
+//   });
+
+//   it('disableAdd={true}', () => {
+//     const wrapper = shallow(
+//       <AddDeleteButtons disableAdd={true} />
+//     );
+//     expect(wrapper.find({ text: 'Add' })).to.have.length(0);
+//   });
+
+//   it('should not display clone by default', () => {
+//     const wrapper = shallow(
+//       <AddDeleteButtons />
+//     );
+//     expect(wrapper.find({ text: 'Clone' })).to.have.length(0);
+//   });
+
+//   it('should not display clone when disableAdd={true}', () => {
+//     const fn = sinon.spy();
+//     const wrapper = shallow(
+//       <AddDeleteButtons onClone={fn} disableAdd={true} />
+//     );
+//     expect(wrapper.find({ text: 'Clone' })).to.have.length(0);
+//   });
+
+// });
+
diff --git a/src/core_plugins/metrics/public/components/__tests__/yes_no.js b/src/core_plugins/metrics/public/components/__tests__/yes_no.js
new file mode 100644
index 0000000000000..dd7413bbad20c
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/__tests__/yes_no.js
@@ -0,0 +1,33 @@
+// import React from 'react';
+// import { expect } from 'chai';
+// import { shallow } from 'enzyme';
+// import sinon from 'sinon';
+// import YesNo from '../yes_no';
+
+// describe('<YesNo />', () => {
+
+//   it('call onChange={handleChange} on yes', () => {
+//     const handleChange = sinon.spy();
+//     const wrapper = shallow(
+//       <YesNo name="test" onChange={handleChange} />
+//     );
+//     wrapper.find('input').first().simulate('change');
+//     expect(handleChange.calledOnce).to.equal(true);
+//     expect(handleChange.firstCall.args[0]).to.eql({
+//       test: 1
+//     });
+//   });
+
+//   it('call onChange={handleChange} on no', () => {
+//     const handleChange = sinon.spy();
+//     const wrapper = shallow(
+//       <YesNo name="test" onChange={handleChange} />
+//     );
+//     wrapper.find('input').last().simulate('change');
+//     expect(handleChange.calledOnce).to.equal(true);
+//     expect(handleChange.firstCall.args[0]).to.eql({
+//       test: 0
+//     });
+//   });
+
+// });
diff --git a/src/core_plugins/metrics/public/components/add_delete_buttons.js b/src/core_plugins/metrics/public/components/add_delete_buttons.js
new file mode 100644
index 0000000000000..d7804507bff52
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/add_delete_buttons.js
@@ -0,0 +1,58 @@
+import React, { Component, PropTypes } from 'react';
+import Tooltip from './tooltip';
+
+function AddDeleteButtons(props) {
+  const createDelete = () => {
+    if (props.disableDelete) {
+      return null;
+    }
+    return (
+      <Tooltip text="Delete">
+        <a className="thor__button-outlined-danger sm" onClick={ props.onDelete }>
+          <i className="fa fa-trash-o"></i>
+        </a>
+      </Tooltip>
+    );
+  };
+  const createAdd = () => {
+    if (props.disableAdd) {
+      return null;
+    }
+    return (
+      <Tooltip text="Add">
+        <a className="thor__button-outlined-default sm" onClick={ props.onAdd }>
+          <i className="fa fa-plus"></i>
+        </a>
+      </Tooltip>
+    );
+  };
+  const deleteBtn = createDelete();
+  const addBtn = createAdd();
+  let clone;
+  if (props.onClone && !props.disableAdd) {
+    clone = (
+      <Tooltip text="Clone">
+        <a className="thor__button-outlined-default sm" onClick={ props.onClone }>
+          <i className="fa fa-files-o"></i>
+        </a>
+      </Tooltip>
+    );
+  }
+  return (
+    <div className="add_delete__buttons">
+      { clone }
+      { addBtn }
+      { deleteBtn }
+    </div>
+  );
+}
+
+AddDeleteButtons.propTypes = {
+  disableAdd: PropTypes.bool,
+  disableDelete: PropTypes.bool,
+  onClone: PropTypes.func,
+  onAdd: PropTypes.func,
+  onDelete: PropTypes.func
+};
+
+export default AddDeleteButtons;
diff --git a/src/core_plugins/metrics/public/components/aggs/agg.js b/src/core_plugins/metrics/public/components/aggs/agg.js
new file mode 100644
index 0000000000000..9cd1c0a7537a4
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/agg.js
@@ -0,0 +1,51 @@
+import React, { PropTypes } from 'react';
+import StdAgg from './std_agg';
+import aggToComponent from '../lib/agg_to_component';
+import { sortable } from 'react-anything-sortable';
+
+function Agg(props) {
+  const { model } = props;
+  let Component = aggToComponent[model.type];
+  if (!Component) {
+    Component = StdAgg;
+  }
+  const style = Object.assign({ cursor: 'default' }, props.style);
+  return (
+    <div
+      className={props.className}
+      style={style}
+      onMouseDown={props.onMouseDown}
+      onTouchStart={props.onTouchStart}>
+      <Component
+        fields={props.fields}
+        disableDelete={props.disableDelete}
+        model={props.model}
+        onAdd={props.onAdd}
+        onChange={props.onChange}
+        onDelete={props.onDelete}
+        panel={props.panel}
+        series={props.series}
+        siblings={props.siblings}/>
+    </div>
+  );
+
+}
+
+Agg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onSortableItemMount: PropTypes.func,
+  onSortableItemReadyToMove: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+  sortData: PropTypes.string,
+};
+
+export default sortable(Agg);
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_row.js b/src/core_plugins/metrics/public/components/aggs/agg_row.js
new file mode 100644
index 0000000000000..c9a98eb93911c
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/agg_row.js
@@ -0,0 +1,53 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+import AddDeleteButtons from '../add_delete_buttons';
+import Tooltip from '../tooltip';
+
+function AggRow(props) {
+  let iconClassName = 'fa fa-eye-slash';
+  let iconRowClassName = 'vis_editor__agg_row-icon';
+  const last = _.last(props.siblings);
+  if (last.id === props.model.id) {
+    iconClassName = 'fa fa-eye';
+    iconRowClassName += ' last';
+  }
+
+  let dragHandle;
+  if (!props.disableDelete) {
+    dragHandle = (
+      <div>
+        <Tooltip text="Sort">
+          <div className="vis_editor__agg_sort thor__button-outlined-default sm">
+            <i className="fa fa-sort"></i>
+          </div>
+        </Tooltip>
+      </div>
+    );
+  }
+
+  return (
+    <div className="vis_editor__agg_row">
+      <div className="vis_editor__agg_row-item">
+        <div className={iconRowClassName}>
+          <i className={iconClassName}></i>
+        </div>
+        {props.children}
+        { dragHandle }
+        <AddDeleteButtons
+          onAdd={props.onAdd}
+          onDelete={props.onDelete}
+          disableDelete={props.disableDelete}/>
+      </div>
+    </div>
+  );
+}
+
+AggRow.propTypes = {
+  disableDelete: PropTypes.bool,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onDelete: PropTypes.func,
+  siblings: PropTypes.array,
+};
+
+export default AggRow;
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_select.js b/src/core_plugins/metrics/public/components/aggs/agg_select.js
new file mode 100644
index 0000000000000..8dcc21f3bd47b
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/agg_select.js
@@ -0,0 +1,26 @@
+import React, { PropTypes } from 'react';
+import Select from 'react-select';
+import { createOptions } from '../lib/agg_lookup';
+
+function AggSelect(props) {
+  const { siblings, panelType } = props;
+  const options = createOptions(panelType, siblings);
+  return (
+    <div className="vis_editor__row_item">
+      <Select
+        clearable={false}
+        options={options}
+        value={props.value || 'count'}
+        onChange={props.onChange}/>
+    </div>
+  );
+}
+
+AggSelect.propTypes = {
+  onChange: PropTypes.func,
+  panelType: PropTypes.string,
+  siblings: PropTypes.array,
+  value: PropTypes.string
+};
+
+export default AggSelect;
diff --git a/src/core_plugins/metrics/public/components/aggs/calculation.js b/src/core_plugins/metrics/public/components/aggs/calculation.js
new file mode 100644
index 0000000000000..97bea305c7eda
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/calculation.js
@@ -0,0 +1,84 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import uuid from 'node-uuid';
+import AggRow from './agg_row';
+import AggSelect from './agg_select';
+import Select from 'react-select';
+
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+import Vars from './vars';
+
+class CalculationAgg extends Component {
+
+  componentWillMount() {
+    if (!this.props.model.variables) {
+      this.props.onChange(_.assign({}, this.props.model, {
+        variables: [{ id: uuid.v1() }]
+      }));
+    }
+  }
+
+  render() {
+    const { panel, siblings } = this.props;
+
+    const defaults = { script: '' };
+    const model = { ...defaults, ...this.props.model };
+
+    const handleChange = createChangeHandler(this.props.onChange, model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleTextChange = createTextHandler(handleChange);
+
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div className="vis_editor__row_item">
+          <div>
+            <div className="vis_editor__label">Aggregation</div>
+            <AggSelect
+              siblings={this.props.siblings}
+              panelType={panel.type}
+              value={model.type}
+              onChange={handleSelectChange('type')}/>
+            <div className="vis_editor__variables">
+              <div className="vis_editor__label">Variables</div>
+              <Vars
+                metrics={siblings}
+                onChange={handleChange}
+                name="variables"
+                model={model}/>
+            </div>
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Script (Painless)</div>
+              <input
+                className="vis_editor__input-grows-100"
+                type="text"
+                onChange={handleTextChange('script')}
+                value={model.script}/>
+            </div>
+          </div>
+        </div>
+      </AggRow>
+    );
+  }
+
+}
+
+CalculationAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default CalculationAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js b/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
new file mode 100644
index 0000000000000..32760e79fb974
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react';
+import AggRow from './agg_row';
+import AggSelect from './agg_select';
+import MetricSelect from './metric_select';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+
+function CumlativeSumAgg(props) {
+  const { model, panel, siblings } = props;
+  const handleChange = createChangeHandler(props.onChange, model);
+  const handleSelectChange = createSelectHandler(handleChange);
+  return (
+      <AggRow
+        disableDelete={props.disableDelete}
+        model={props.model}
+        onAdd={props.onAdd}
+        onDelete={props.onDelete}
+        siblings={props.siblings}>
+      <div className="vis_editor__row_item">
+        <div className="vis_editor__label">Aggregation</div>
+        <AggSelect
+          siblings={props.siblings}
+          panelType={panel.type}
+          value={model.type}
+          onChange={handleSelectChange('type')}/>
+      </div>
+      <div className="vis_editor__row_item">
+        <div className="vis_editor__label">Metric</div>
+        <MetricSelect
+          onChange={handleSelectChange('field')}
+          metrics={siblings}
+          metric={model}
+          value={model.field}/>
+      </div>
+    </AggRow>
+  );
+
+}
+
+CumlativeSumAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default CumlativeSumAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/derivative.js b/src/core_plugins/metrics/public/components/aggs/derivative.js
new file mode 100644
index 0000000000000..dd90257af1ce5
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/derivative.js
@@ -0,0 +1,71 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AggSelect from './agg_select';
+import MetricSelect from './metric_select';
+import AggRow from './agg_row';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+
+class DerivativeAgg extends Component {
+
+  render() {
+    const { siblings, panel } = this.props;
+
+    const defaults = { unit: '' };
+    const model = { ...defaults, ...this.props.model };
+
+    const handleChange = createChangeHandler(this.props.onChange, model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleTextChange = createTextHandler(handleChange);
+
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Aggregation</div>
+          <AggSelect
+            siblings={this.props.siblings}
+            panelType={panel.type}
+            value={model.type}
+            onChange={handleSelectChange('type')}/>
+        </div>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Metric</div>
+          <MetricSelect
+            onChange={handleSelectChange('field')}
+            metrics={siblings}
+            metric={model}
+            value={model.field}/>
+        </div>
+        <div>
+          <div className="vis_editor__label">Units (1s, 1m, etc)</div>
+          <input
+            className="vis_editor__input"
+            onChange={handleTextChange('unit')}
+            value={model.unit}
+            type="text"/>
+        </div>
+      </AggRow>
+    );
+  }
+
+}
+
+DerivativeAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default DerivativeAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/field_select.js b/src/core_plugins/metrics/public/components/aggs/field_select.js
new file mode 100644
index 0000000000000..2dd5272df3d55
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/field_select.js
@@ -0,0 +1,44 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+import Select from 'react-select';
+import AggLookup from '../lib/agg_lookup';
+import generateByTypeFilter from '../lib/generate_by_type_filter';
+
+function FieldSelect(props) {
+  const { type, fields, indexPattern } = props;
+  if (type === 'count') {
+    return null;
+  }
+  const options = (fields[indexPattern] || [])
+    .filter(generateByTypeFilter(props.restrict))
+    .map(field => {
+      return { label: field.name, value: field.name };
+    });
+
+  return (
+    <Select
+      placeholder="Select field..."
+      disabled={props.disabled}
+      options={options}
+      value={props.value}
+      onChange={props.onChange}/>
+  );
+}
+
+FieldSelect.defaultProps = {
+  indexPattern: '*',
+  disabled: false,
+  restrict: 'none'
+};
+
+FieldSelect.propTypes = {
+  disabled: PropTypes.bool,
+  fields: PropTypes.object,
+  indexPattern: PropTypes.string,
+  onChange: PropTypes.func,
+  restrict: PropTypes.string,
+  type: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default FieldSelect;
diff --git a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
new file mode 100644
index 0000000000000..8b97309fc621d
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
@@ -0,0 +1,103 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AggSelect from './agg_select';
+import FieldSelect from './field_select';
+import MetricSelect from './metric_select';
+import AggRow from './agg_row';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+
+class FilterRatioAgg extends Component {
+
+  render() {
+    const { series, fields, siblings, panel } = this.props;
+
+    const handleChange = createChangeHandler(this.props.onChange, this.props.model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleTextChange = createTextHandler(handleChange);
+    const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+
+    const defaults = {
+      numerator: '*',
+      denominator: '*',
+      metric_agg: 'count'
+    };
+
+    const model = { ...defaults, ...this.props.model };
+
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div style={{ flex: '1 0 auto' }}>
+          <div style={{ flex: '1 0 auto', display: 'flex' }}>
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Aggregation</div>
+              <AggSelect
+                siblings={this.props.siblings}
+                panelType={panel.type}
+                value={model.type}
+                onChange={handleSelectChange('type')}/>
+            </div>
+      <div className="vis_editor__row_item">
+        <div className="vis_editor__label">Numerator</div>
+        <input
+          className="vis_editor__input-grows-100"
+          onChange={handleTextChange('numerator')}
+          value={model.numerator}
+          type="text"/>
+      </div>
+      <div className="vis_editor__row_item">
+        <div className="vis_editor__label">Denominator</div>
+        <input
+          className="vis_editor__input-grows-100"
+          onChange={handleTextChange('denominator')}
+          value={model.denominator}
+          type="text"/>
+      </div>
+    </div>
+      <div style={{ flex: '1 0 auto', display: 'flex', marginTop: '10px' }}>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Metric Aggregation</div>
+          <AggSelect
+            siblings={this.props.siblings}
+            panelType="metrics"
+            value={model.metric_agg}
+            onChange={handleSelectChange('metric_agg')}/>
+        </div>
+      { model.metric_agg !== 'count' ? (
+        <div className="vis_editor__row_item">
+        <div className="vis_editor__label">Field</div>
+        <FieldSelect
+          fields={fields}
+          type={model.metric_agg}
+          restrict="numeric"
+          indexPattern={indexPattern}
+          value={model.field}
+          onChange={handleSelectChange('field')}/>
+      </div>) : null }
+    </div>
+      </div>
+      </AggRow>
+    );
+  }
+
+}
+
+FilterRatioAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default FilterRatioAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/metric_select.js b/src/core_plugins/metrics/public/components/aggs/metric_select.js
new file mode 100644
index 0000000000000..a953606ebbb07
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/metric_select.js
@@ -0,0 +1,64 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+import Select from 'react-select';
+import calculateSiblings from '../lib/calculate_siblings';
+import calculateLabel from '../lib/calculate_label';
+import basicAggs from '../lib/basic_aggs';
+
+function createTypeFilter(restrict, exclude) {
+  return (metric) => {
+    if (_.includes(exclude, metric.type)) return false;
+    switch (restrict) {
+      case 'basic':
+        return _.includes(basicAggs, metric.type);
+      default:
+        return true;
+    }
+  };
+}
+
+function MetricSelect(props) {
+  const {
+    restrict,
+    metric,
+    onChange,
+    value,
+    exclude
+  } = props;
+
+  const metrics = props.metrics
+    .filter(createTypeFilter(restrict, exclude));
+
+  const options = calculateSiblings(metrics, metric)
+    .filter(row => !/_bucket$/.test(row.type) && !/^series/.test(row.type))
+    .map(row => {
+      const label = calculateLabel(row, metrics);
+      return { value: row.id, label };
+    });
+
+  return (
+    <Select
+      placeholder="Select metric..."
+      options={options.concat(props.additionalOptions)}
+      value={value}
+      onChange={onChange}/>
+  );
+}
+
+MetricSelect.defaultProps = {
+  additionalOptions: [],
+  exclude: [],
+  metric: {},
+  restrict: 'none',
+};
+
+MetricSelect.propTypes = {
+  additionalOptions: PropTypes.array,
+  exclude: PropTypes.array,
+  metric: PropTypes.object,
+  onChange: PropTypes.func,
+  restrict: PropTypes.string,
+  value: PropTypes.string
+};
+
+export default MetricSelect;
diff --git a/src/core_plugins/metrics/public/components/aggs/moving_average.js b/src/core_plugins/metrics/public/components/aggs/moving_average.js
new file mode 100644
index 0000000000000..8230783218d2d
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/moving_average.js
@@ -0,0 +1,118 @@
+import React, { Component, PropTypes } from 'react';
+import AggRow from './agg_row';
+import AggSelect from './agg_select';
+import MetricSelect from './metric_select';
+import Select from 'react-select';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+import createNumberHandler from '../lib/create_number_handler';
+
+class MovingAverageAgg extends Component {
+  render() {
+    const { panel, siblings } = this.props;
+    const defaults = {
+      settings: '',
+      minimize: 0,
+      window: '',
+      model: 'simple'
+    };
+    const model = { ...defaults, ...this.props.model };
+    const handleChange = createChangeHandler(this.props.onChange, model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleTextChange = createTextHandler(handleChange);
+    const handleNumberChange = createNumberHandler(handleChange);
+    const modelOptions = [
+      { label: 'Simple', value: 'simple' },
+      { label: 'Linear', value: 'linear' },
+      { label: 'Exponentially Weighted', value: 'ewma' },
+      { label: 'Holt-Linear', value: 'holt' },
+      { label: 'Holt-Winters', value: 'holt_winters' }
+    ];
+    const minimizeOptions = [
+      { label: 'True', value: 1 },
+      { label: 'False', value: 0 }
+    ];
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__agg_row-item">
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Aggregation</div>
+              <AggSelect
+                siblings={this.props.siblings}
+                panelType={panel.type}
+                value={model.type}
+                onChange={handleSelectChange('type')}/>
+            </div>
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Metric</div>
+              <MetricSelect
+                onChange={handleSelectChange('field')}
+                metrics={siblings}
+                metric={model}
+                value={model.field}/>
+            </div>
+          </div>
+          <div className="vis_editor__agg_row-item">
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Model</div>
+              <Select
+                clearable={false}
+                placeholder="Select..."
+                onChange={ handleSelectChange('model') }
+                value={this.props.model.model}
+                options={ modelOptions }/>
+            </div>
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Window Size</div>
+              <input
+                className="vis_editor__input-grows-100"
+                type="text"
+                onChange={handleNumberChange('window')}
+                value={model.window}/>
+            </div>
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Minimize</div>
+              <Select
+                placeholder="Select..."
+                onChange={ handleSelectChange('minimize') }
+                value={model.minimize}
+                options={ minimizeOptions }/>
+            </div>
+          </div>
+          <div className="vis_editor__agg_row-item">
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Settings (<code>Key=Value</code> space seperated)</div>
+              <input
+                className="vis_editor__input-grows-100"
+                type="text"
+                onChange={handleTextChange('settings')}
+                value={model.settings}/>
+            </div>
+          </div>
+        </div>
+      </AggRow>
+    );
+  }
+
+}
+
+MovingAverageAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default MovingAverageAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile.js b/src/core_plugins/metrics/public/components/aggs/percentile.js
new file mode 100644
index 0000000000000..d9b8eb3a8433d
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/percentile.js
@@ -0,0 +1,190 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AggSelect from './agg_select';
+import FieldSelect from './field_select';
+import AggRow from './agg_row';
+import collectionActions from '../lib/collection_actions';
+import calculateSiblings from '../lib/calculate_siblings';
+import AddDeleteButtons from '../add_delete_buttons';
+import Select from 'react-select';
+import uuid from 'node-uuid';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createNumberHandler from '../lib/create_number_handler';
+const newPercentile = (opts) => {
+  return _.assign({ id: uuid.v1(), mode: 'line', shade: 0.2 }, opts);
+};
+
+class Percentiles extends Component {
+
+  constructor(props) {
+    super(props);
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  handleTextChange(item, name) {
+    return (e) => {
+      const handleChange = collectionActions.handleChange.bind(null, this.props);
+      const part = {};
+      part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+      handleChange(_.assign({}, item, part));
+    };
+  }
+
+  handleNumberChange(item, name) {
+    return (e) => {
+      const handleChange = collectionActions.handleChange.bind(null, this.props);
+      const part = {};
+      part[name] = Number(_.get(e, 'value', _.get(e, 'target.value')));
+      handleChange(_.assign({}, item, part));
+    };
+  }
+
+  renderRow(row, i, items) {
+    const defaults = { value: '', percentile: '', shade: '' };
+    const model = { ...defaults, ...row };
+    const handleAdd = collectionActions.handleAdd.bind(null, this.props, newPercentile);
+    const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
+    const modeOptions = [
+      { label: 'Line', value: 'line' },
+      { label: 'Band', value: 'band' }
+    ];
+    const optionsStyle = {};
+    if (model.mode === 'line') {
+      optionsStyle.display = 'none';
+    }
+    return  (
+      <div className="vis_editor__percentiles-row" key={model.id}>
+        <div className="vis_editor__percentiles-content">
+          <input
+            placeholder="Percentile"
+            className="vis_editor__input-grows"
+            type="text"
+            onChange={this.handleNumberChange(model, 'value')}
+            value={model.value}/>
+          <div className="vis_editor__label">Mode</div>
+          <div className="vis_editor__row_item">
+            <Select
+              clearable={false}
+              onChange={this.handleTextChange(model, 'mode')}
+              options={modeOptions}
+              value={model.mode}/>
+          </div>
+          <div style={optionsStyle} className="vis_editor__label">Fill To</div>
+          <input
+            style={optionsStyle}
+            className="vis_editor__input-grows"
+            type="text"
+            onChange={this.handleNumberChange(model, 'percentile')}
+            value={model.percentile}/>
+          <div style={optionsStyle} className="vis_editor__label">Shade (0 to 1)</div>
+          <input
+            style={optionsStyle}
+            className="vis_editor__input-grows"
+            type="text"
+            onChange={this.handleNumberChange(model, 'shade')}
+            value={model.shade}/>
+        </div>
+        <AddDeleteButtons
+          onAdd={handleAdd}
+          onDelete={handleDelete}
+          disableDelete={items.length < 2}/>
+      </div>
+    );
+  }
+
+  render() {
+    const { model, name } = this.props;
+    if (!model[name]) return (<div/>);
+
+    const rows = model[name].map(this.renderRow);
+    return (
+      <div className="vis_editor__percentiles">
+        { rows }
+      </div>
+    );
+  }
+}
+
+Percentiles.defaultProps = {
+  name: 'percentile'
+};
+
+Percentiles.propTypes = {
+  name: PropTypes.string,
+  model: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+
+class PercentileAgg extends Component {
+
+  componentWillMount() {
+    if (!this.props.model.percentiles) {
+      this.props.onChange(_.assign({}, this.props.model, {
+        percentiles: [newPercentile({ value: 50 })]
+      }));
+    }
+  }
+
+  render() {
+    const { series, model, panel, fields } = this.props;
+
+    const handleChange = createChangeHandler(this.props.onChange, model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleNumberChange = createNumberHandler(handleChange);
+    const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__agg_row-item">
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Aggregation</div>
+              <AggSelect
+                siblings={this.props.siblings}
+                panelType={panel.type}
+                value={model.type}
+                onChange={handleSelectChange('type')}/>
+            </div>
+            <div className="vis_editor__row_item">
+              <div className="vis_editor__label">Field</div>
+              <FieldSelect
+                fields={fields}
+                type={model.type}
+                restrict="numeric"
+                indexPattern={indexPattern}
+                value={model.field}
+                onChange={handleSelectChange('field')}/>
+            </div>
+          </div>
+          <Percentiles
+            onChange={handleChange}
+            name="percentiles"
+            model={model}/>
+        </div>
+      </AggRow>
+    );
+  }
+
+}
+
+PercentileAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default PercentileAgg;
+
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
new file mode 100644
index 0000000000000..5d0394f74a59b
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
@@ -0,0 +1,76 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AggSelect from './agg_select';
+import FieldSelect from './field_select';
+import AggRow from './agg_row';
+import Select from 'react-select';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+
+class PercentileRankAgg extends Component {
+
+  render() {
+    const { series, panel, fields } = this.props;
+    const defaults = { value: '' };
+    const model = { ...defaults, ...this.props.model };
+
+
+    const handleChange = createChangeHandler(this.props.onChange, model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleTextChange = createTextHandler(handleChange);
+
+    const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Aggregation</div>
+          <AggSelect
+            siblings={this.props.siblings}
+            panelType={panel.type}
+            value={model.type}
+            onChange={handleSelectChange('type')}/>
+        </div>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Field</div>
+          <FieldSelect
+            fields={fields}
+            type={model.type}
+            restrict="numeric"
+            indexPattern={indexPattern}
+            value={model.field}
+            onChange={handleSelectChange('field')}/>
+        </div>
+        <div className="vis_editor__percentile_rank_value">
+          <div className="vis_editor__label">Value</div>
+          <input
+            className="vis_editor__input-grows"
+            value={model.value}
+            onChange={handleTextChange('value')}/>
+        </div>
+      </AggRow>
+    );
+  }
+
+}
+
+PercentileRankAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default PercentileRankAgg;
+
diff --git a/src/core_plugins/metrics/public/components/aggs/serial_diff.js b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
new file mode 100644
index 0000000000000..3f3af30e5954a
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
@@ -0,0 +1,71 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AggSelect from './agg_select';
+import MetricSelect from './metric_select';
+import AggRow from './agg_row';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createNumberHandler from '../lib/create_number_handler';
+
+class SerialDiffAgg extends Component {
+
+  render() {
+    const { siblings, panel } = this.props;
+    const defaults = { lag: '' };
+    const model = { ...defaults, ...this.props.model };
+
+    const handleChange = createChangeHandler(this.props.onChange, model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleNumberChange = createNumberHandler(handleChange);
+
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Aggregation</div>
+          <AggSelect
+            siblings={this.props.siblings}
+            panelType={panel.type}
+            value={model.type}
+            onChange={handleSelectChange('type')}/>
+        </div>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Metric</div>
+          <MetricSelect
+            onChange={handleSelectChange('field')}
+            metrics={siblings}
+            metric={model}
+            value={model.field}/>
+        </div>
+        <div>
+          <div className="vis_editor__label">Lag</div>
+          <input
+            className="vis_editor__input"
+            onChange={handleNumberChange('lag')}
+            value={model.lag}
+            type="text"/>
+        </div>
+      </AggRow>
+    );
+  }
+
+}
+
+SerialDiffAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default SerialDiffAgg;
+
diff --git a/src/core_plugins/metrics/public/components/aggs/series_agg.js b/src/core_plugins/metrics/public/components/aggs/series_agg.js
new file mode 100644
index 0000000000000..aef30554bc751
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/series_agg.js
@@ -0,0 +1,66 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+import AggSelect from './agg_select';
+import Select from 'react-select';
+import AggRow from './agg_row';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+
+function SeriesAgg(props) {
+  const { model, panel, fields } = props;
+
+  const handleChange = createChangeHandler(props.onChange, model);
+  const handleSelectChange = createSelectHandler(handleChange);
+
+  const functionOptions = [
+    { label: 'Sum', value: 'sum' },
+    { label: 'Max', value: 'max' },
+    { label: 'Min', value: 'min' },
+    { label: 'Avg', value: 'mean' },
+    { label: 'Overall Sum', value: 'overall_sum' },
+    { label: 'Overall Max', value: 'overall_max' },
+    { label: 'Overall Min', value: 'overall_min' },
+    { label: 'Overall Avg', value: 'overall_avg' },
+    { label: 'Cumlative Sum', value: 'cumlative_sum' },
+  ];
+
+  return (
+      <AggRow
+        disableDelete={props.disableDelete}
+        model={props.model}
+        onAdd={props.onAdd}
+        onDelete={props.onDelete}
+        siblings={props.siblings}>
+      <div className="vis_editor__item">
+        <div className="vis_editor__label">Aggregation</div>
+        <AggSelect
+          siblings={props.siblings}
+          panelType={panel.type}
+          value={model.type}
+          onChange={handleSelectChange('type')}/>
+      </div>
+      <div className="vis_editor__item">
+        <div className="vis_editor__label">Function</div>
+        <Select
+          value={model.function}
+          options={functionOptions}
+          onChange={handleSelectChange('function')}/>
+      </div>
+    </AggRow>
+  );
+
+}
+
+SeriesAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default SeriesAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/std_agg.js b/src/core_plugins/metrics/public/components/aggs/std_agg.js
new file mode 100644
index 0000000000000..6d0154e7cf95a
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/std_agg.js
@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+import AggSelect from './agg_select';
+import FieldSelect from './field_select';
+import AggRow from './agg_row';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+
+function StandardAgg(props) {
+  const { model, panel, series, fields } = props;
+
+  const handleChange = createChangeHandler(props.onChange, model);
+  const handleSelectChange = createSelectHandler(handleChange);
+  let restrict = 'numeric';
+  if (model.type === 'cardinality') {
+    restrict = 'string';
+  }
+
+  const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+
+  return (
+    <AggRow
+      disableDelete={props.disableDelete}
+      model={props.model}
+      onAdd={props.onAdd}
+      onDelete={props.onDelete}
+      siblings={props.siblings}>
+      <div className="vis_editor__item">
+        <div className="vis_editor__label">Aggregation</div>
+        <AggSelect
+          siblings={props.siblings}
+          panelType={panel.type}
+          value={model.type}
+          onChange={handleSelectChange('type')}/>
+      </div>
+      { model.type !== 'count' ? (<div className="vis_editor__item">
+        <div className="vis_editor__label">Field</div>
+        <FieldSelect
+          fields={fields}
+          type={model.type}
+          restrict={restrict}
+          indexPattern={indexPattern}
+          value={model.field}
+          onChange={handleSelectChange('field')}/>
+      </div>) : null }
+    </AggRow>
+  );
+
+}
+
+StandardAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default StandardAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/std_deviation.js b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
new file mode 100644
index 0000000000000..168eca32c9447
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
@@ -0,0 +1,88 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AggSelect from './agg_select';
+import FieldSelect from './field_select';
+import AggRow from './agg_row';
+import Select from 'react-select';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+
+class StandardDeviationAgg extends Component {
+
+  render() {
+    const { series, panel, fields } = this.props;
+    const defaults = { sigma: '' };
+    const model = { ...defaults, ...this.props.model };
+
+    const modeOptions = [
+      { label: 'Raw', value: 'raw' },
+      { label: 'Upper Bound', value: 'upper' },
+      { label: 'Lower Bound', value: 'lower' },
+      { label: 'Bounds Band', value: 'band' }
+    ];
+
+    const handleChange = createChangeHandler(this.props.onChange, model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleTextChange = createTextHandler(handleChange);
+
+    const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Aggregation</div>
+          <AggSelect
+            siblings={this.props.siblings}
+            panelType={panel.type}
+            value={model.type}
+            onChange={handleSelectChange('type')}/>
+        </div>
+        <div className="vis_editor__std_deviation-field">
+          <div className="vis_editor__label">Field</div>
+          <FieldSelect
+            fields={fields}
+            type={model.type}
+            restrict="numeric"
+            indexPattern={indexPattern}
+            value={model.field}
+            onChange={handleSelectChange('field')}/>
+        </div>
+        <div className="vis_editor__std_deviation-sigma_item">
+          <div className="vis_editor__label">Sigma</div>
+          <input
+            className="vis_editor__std_deviation-sigma"
+            value={model.sigma}
+            onChange={handleTextChange('sigma')}/>
+        </div>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Mode</div>
+          <Select
+            options={modeOptions}
+            onChange={handleSelectChange('mode')}
+            value={model.mode}/>
+        </div>
+      </AggRow>
+    );
+  }
+
+}
+
+StandardDeviationAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default StandardDeviationAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/std_sibling.js b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
new file mode 100644
index 0000000000000..092fd54ed0611
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
@@ -0,0 +1,96 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AggRow from './agg_row';
+import MetricSelect from './metric_select';
+import AggSelect from './agg_select';
+import Select from 'react-select';
+import createChangeHandler from '../lib/create_change_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+
+class StandardSiblingAgg extends Component {
+
+  render() {
+    const { siblings, panel } = this.props;
+    const defaults = { sigma: '' };
+    const model = { ...defaults, ...this.props.model };
+
+    const handleChange = createChangeHandler(this.props.onChange, model);
+    const handleSelectChange = createSelectHandler(handleChange);
+    const handleTextChange = createTextHandler(handleChange);
+
+    const stdDev = {};
+    if (model.type === 'std_deviation_bucket') {
+      stdDev.sigma = (
+        <div className="vis_editor__std_deviation-sigma_item">
+          <div className="vis_editor__label">Sigma</div>
+          <input
+            className="vis_editor__std_deviation-sigma"
+            value={model.sigma}
+            onChange={handleTextChange('sigma')}/>
+        </div>
+      );
+
+      const modeOptions = [
+        { label: 'Raw', value: 'raw' },
+        { label: 'Upper Bound', value: 'upper' },
+        { label: 'Lower Bound', value: 'lower' },
+        { label: 'Bounds Band', value: 'band' }
+      ];
+
+      stdDev.mode = (
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Mode</div>
+          <Select
+            options={modeOptions}
+            onChange={handleSelectChange('mode')}
+            value={model.mode}/>
+        </div>
+      );
+    }
+
+    return (
+      <AggRow
+        disableDelete={this.props.disableDelete}
+        model={this.props.model}
+        onAdd={this.props.onAdd}
+        onDelete={this.props.onDelete}
+        siblings={this.props.siblings}>
+        <div className="vis_editor__row_item">
+          <div className="vis_editor__label">Aggregation</div>
+          <AggSelect
+            siblings={this.props.siblings}
+            panelType={panel.type}
+            value={model.type}
+            onChange={handleSelectChange('type')}/>
+        </div>
+        <div className="vis_editor__std_sibling-metric">
+          <div className="vis_editor__label">Metric</div>
+          <MetricSelect
+            onChange={handleSelectChange('field')}
+            exclude={['percentile']}
+            metrics={siblings}
+            metric={model}
+            value={model.field}/>
+        </div>
+        { stdDev.sigma }
+        { stdDev.mode }
+      </AggRow>
+    );
+  }
+
+}
+
+StandardSiblingAgg.propTypes = {
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  panel: PropTypes.object,
+  series: PropTypes.object,
+  siblings: PropTypes.array,
+};
+
+export default StandardSiblingAgg;
diff --git a/src/core_plugins/metrics/public/components/aggs/vars.js b/src/core_plugins/metrics/public/components/aggs/vars.js
new file mode 100644
index 0000000000000..6fecaa32d4c53
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/aggs/vars.js
@@ -0,0 +1,80 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AddDeleteButtons from '../add_delete_buttons';
+import collectionActions from '../lib/collection_actions';
+import MetricSelect from './metric_select';
+
+class CalculationVars extends Component {
+
+  constructor(props) {
+    super(props);
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  handleChange(item, name) {
+    return (e) => {
+      const handleChange = collectionActions.handleChange.bind(null, this.props);
+      const part = {};
+      part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+      handleChange(_.assign({}, item, part));
+    };
+  }
+
+  renderRow(row, i, items) {
+    const defaults = { name: '' };
+    const model = { ...defaults, ...row };
+    const handleAdd = collectionActions.handleAdd.bind(null, this.props);
+    const handleDelete = collectionActions.handleDelete.bind(null, this.props, row);
+    return  (
+      <div className="vis_editor__calc_vars-row" key={row.id}>
+        <div className="vis_editor__calc_vars-name">
+          <input
+            placeholder="Variable Name"
+            className="vis_editor__input-grows-100"
+            type="text"
+            onChange={this.handleChange(row, 'name')}
+            value={row.name} />
+        </div>
+        <div className="vis_editor__calc_vars-var">
+          <MetricSelect
+            onChange={this.handleChange(row, 'field')}
+            exclude={['percentile']}
+            metrics={this.props.metrics}
+            metric={this.props.model}
+            value={row.field}/>
+        </div>
+        <div className="vis_editor__calc_vars-control">
+          <AddDeleteButtons
+            onAdd={handleAdd}
+            onDelete={handleDelete}
+            disableDelete={items.length < 2}/>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { model, name } = this.props;
+    if (!model[name]) return (<div/>);
+    const rows = model[name].map(this.renderRow);
+    return (
+      <div className="vis_editor__calc_vars">
+        { rows }
+      </div>
+    );
+  }
+
+}
+
+CalculationVars.defaultProps = {
+  name: 'variables'
+};
+
+CalculationVars.propTypes = {
+  metrics: PropTypes.array,
+  model: PropTypes.object,
+  name: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+export default CalculationVars;
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
new file mode 100644
index 0000000000000..b4de4039cb9a2
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -0,0 +1,168 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import IndexPattern from './index_pattern';
+import collectionActions from './lib/collection_actions';
+import AddDeleteButtons from './add_delete_buttons';
+import ColorPicker from './color_picker';
+import FieldSelect from './aggs/field_select';
+import uuid from 'node-uuid';
+import IconSelect from './icon_select';
+
+function newAnnotation() {
+  return {
+    id: uuid.v1(),
+    color: '#F00',
+    index_pattern: '*',
+    time_field: '@timestamp',
+    icon: 'fa-tag'
+  };
+}
+
+class AnnotationsEditor extends Component {
+
+  constructor(props) {
+    super(props);
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  handleChange(item, name) {
+    return (e) => {
+      const handleChange = collectionActions.handleChange.bind(null, this.props);
+      const part = {};
+      part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+      handleChange(_.assign({}, item, part));
+    };
+  }
+
+  renderRow(row, i, items) {
+    const { fields } = this.props;
+    const defaults = { fields: '', template: '', index_pattern: '*', query_string: '' };
+    const model = { ...defaults, ...row };
+    const handleChange = (part) => {
+      const fn = collectionActions.handleChange.bind(null, this.props);
+      fn(_.assign({}, model, part));
+    };
+    const handleAdd = collectionActions.handleAdd
+      .bind(null, this.props, newAnnotation);
+    const handleDelete = collectionActions.handleDelete
+      .bind(null, this.props, model);
+    return (
+      <div className="vis_editor__annotations-row" key={model.id}>
+        <div className="vis_editor__annotations-color">
+          <ColorPicker
+            disableTrash={true}
+            onChange={handleChange}
+            name="color"
+            value={model.color}/>
+        </div>
+        <div className="vis_editor__annotations-content">
+          <div className="vis_editor__row">
+            <div className="vis_editor__row-item">
+              <div className="vis_editor__label">Index Pattern (required)</div>
+              <input
+                className="vis_editor__input-grows-100"
+                type="text"
+                onChange={this.handleChange(model, 'index_pattern')}
+                value={model.index_pattern} />
+            </div>
+            <div className="vis_editor__row-item">
+              <div className="vis_editor__label">Time Field (required)</div>
+              <FieldSelect
+                restrict="date"
+                value={model.time_field}
+                onChange={this.handleChange(model, 'time_field')}
+                indexPattern={model.index_pattern}
+                fields={this.props.fields}/>
+            </div>
+          </div>
+          <div className="vis_editor__row">
+            <div className="vis_editor__row-item">
+              <div className="vis_editor__label">Query String</div>
+              <input
+                className="vis_editor__input-grows-100"
+                type="text"
+                onChange={this.handleChange(model, 'query_string')}
+                value={model.query_string} />
+            </div>
+          </div>
+          <div className="vis_editor__row">
+            <div className="vis_editor__row-item">
+              <div className="vis_editor__label">Icon (required)</div>
+              <div className="vis_editor__item">
+                <IconSelect
+                  value={model.icon}
+                  onChange={this.handleChange(model, 'icon')} />
+              </div>
+            </div>
+            <div className="vis_editor__row-item">
+              <div className="vis_editor__label">Fields (required - comma separated paths)</div>
+              <input
+                className="vis_editor__input-grows-100"
+                type="text"
+                onChange={this.handleChange(model, 'fields')}
+                value={model.fields} />
+            </div>
+            <div className="vis_editor__row-item">
+              <div className="vis_editor__label">Row Template (required - eg.<code>{'{{field}}'}</code>)</div>
+              <input
+                className="vis_editor__input-grows-100"
+                type="text"
+                onChange={this.handleChange(model, 'template')}
+                value={model.template} />
+            </div>
+          </div>
+        </div>
+        <div className="vis_editor__annotations-controls">
+          <AddDeleteButtons
+            onAdd={handleAdd}
+            onDelete={handleDelete} />
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { model } = this.props;
+    let content;
+    if (!model.annotations || !model.annotations.length) {
+      const handleAdd = collectionActions.handleAdd
+        .bind(null, this.props, newAnnotation);
+      content = (
+        <div className="vis_editor__annotations-missing">
+          <p>Click the button below to create an annotation data source.</p>
+          <a className="thor__button-outlined-default large"
+        onClick={handleAdd}>Add Data Source</a>
+        </div>
+      );
+    } else {
+      const annotations = model.annotations.map(this.renderRow);
+      content = (
+        <div className="vis_editor__annotations">
+          <div className="kbnTabs sm">
+            <div className="kbnTabs__tab-active">Data Sources</div>
+          </div>
+          { annotations }
+        </div>
+      );
+    }
+    return(
+      <div className="vis_editor__container">
+        { content }
+      </div>
+    );
+  }
+
+}
+
+AnnotationsEditor.defaultProps = {
+  name: 'annotations'
+};
+
+AnnotationsEditor.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  name: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+export default AnnotationsEditor;
diff --git a/src/core_plugins/metrics/public/components/color_picker.js b/src/core_plugins/metrics/public/components/color_picker.js
new file mode 100644
index 0000000000000..81b9ca854da60
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/color_picker.js
@@ -0,0 +1,95 @@
+import React, { Component, PropTypes } from 'react';
+import Tooltip from './tooltip';
+import CustomColorPicker from './custom_color_picker';
+const Picker = CustomColorPicker;
+
+class ColorPicker extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      displayPlicker: false,
+      color: {}
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  handleChange(color) {
+    const { rgb, hex } = color;
+    const part = {};
+    part[this.props.name] = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;
+    if (this.props.onChange) this.props.onChange(part);
+  }
+
+  handleClick() {
+    this.setState({ displayPicker: !this.state.displayColorPicker });
+  }
+
+  handleClose() {
+    this.setState({ displayPicker: false });
+  }
+
+  handleClear() {
+    const part = {};
+    part[this.props.name] = null;
+    this.props.onChange(part);
+  }
+
+  renderSwatch() {
+    if (!this.props.value) {
+      return (
+        <div
+          className="vis_editor__color_picker-swatch-empty"
+          onClick={this.handleClick}/>
+      );
+    }
+    return (
+      <div
+        style={{ backgroundColor: this.props.value }}
+        className="vis_editor__color_picker-swatch"
+        onClick={this.handleClick}/>
+    );
+  }
+
+  render() {
+    const swatch = this.renderSwatch();
+    const value = this.props.value || undefined;
+    let clear;
+    if (!this.props.disableTrash) {
+      clear = (
+        <div className="vis_editor__color_picker-clear" onClick={this.handleClear}>
+          <Tooltip text="Clear">
+            <i className="fa fa-ban"/>
+          </Tooltip>
+        </div>
+      );
+    }
+    return (
+      <div className="vis_editor__color_picker">
+        { swatch }
+        { clear }
+        { this.state.displayPicker ? <div className="vis_editor__color_picker-popover">
+          <div className="vis_editor__color_picker-cover"
+            onClick={this.handleClose}/>
+          <Picker
+            color={ value }
+            onChangeComplete={this.handleChange} />
+        </div> : null }
+      </div>
+    );
+  }
+
+}
+
+ColorPicker.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  disableTrash: PropTypes.bool,
+  onChange: PropTypes.func
+};
+
+export default ColorPicker;
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
new file mode 100644
index 0000000000000..8ab4e0d058ef3
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -0,0 +1,115 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import AddDeleteButtons from './add_delete_buttons';
+import Select from 'react-select';
+import collectionActions from './lib/collection_actions';
+import ColorPicker from './color_picker';
+
+class ColorRules extends Component {
+
+  constructor(props) {
+    super(props);
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  handleChange(item, name, cast = String) {
+    return (e) => {
+      const handleChange = collectionActions.handleChange.bind(null, this.props);
+      const part = {};
+      part[name] = cast(_.get(e, 'value', _.get(e, 'target.value')));
+      if (part[name] === 'undefined') part[name] = undefined;
+      handleChange(_.assign({}, item, part));
+    };
+  }
+
+  renderRow(row, i, items) {
+    const defaults = { value: '' };
+    const model = { ...defaults, ...row };
+    const handleAdd = collectionActions.handleAdd.bind(null, this.props);
+    const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
+    const operatorOptions = [
+      { label: '> greater then', value: 'gt' },
+      { label: '>= greater then or equal', value: 'gte' },
+      { label: '< less then', value: 'lt' },
+      { label: '<= less then or equal', value: 'lte' },
+    ];
+    const handleColorChange = (part) => {
+      const handleChange = collectionActions.handleChange.bind(null, this.props);
+      handleChange(_.assign({}, model, part));
+    };
+    let secondary;
+    if (!this.props.hideSecondary) {
+      secondary = (
+        <div className="color_rules__secondary">
+          <div className="color_rules__label">and {this.props.secondaryName} to</div>
+          <ColorPicker
+            onChange={handleColorChange}
+            name={this.props.secondaryVarName}
+            value={model[this.props.secondaryVarName]}/>
+        </div>
+      );
+    }
+    return (
+      <div key={model.id} className="color_rules__rule">
+        <div className="color_rules__label">Set {this.props.primaryName} to</div>
+        <ColorPicker
+          onChange={handleColorChange}
+          name={this.props.primaryVarName}
+          value={model[this.props.primaryVarName]}/>
+        { secondary }
+        <div className="color_rules__label">if metric is</div>
+        <div className="color_rules__item">
+          <Select
+            onChange={this.handleChange(model, 'opperator')}
+            value={model.opperator}
+            options={operatorOptions}/>
+        </div>
+        <input
+          className="color_rules__input"
+          type="text"
+          value={model.value}
+          onChange={this.handleChange(model, 'value', Number)}/>
+        <div className="color_rules__control">
+          <AddDeleteButtons
+            onAdd={handleAdd}
+            onDelete={handleDelete}
+            disableDelete={items.length < 2}/>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { model, name } = this.props;
+    if (!model[name]) return (<div/>);
+    const rows = model[name].map(this.renderRow);
+    return (
+      <div className="color_rules">
+        { rows }
+      </div>
+    );
+  }
+
+}
+
+ColorRules.defaultProps = {
+  name: 'color_rules',
+  primaryName: 'background',
+  primaryVarName: 'background_color',
+  secondaryName: 'text',
+  secondaryVarName: 'color',
+  hideSecondary: false
+};
+
+ColorRules.propTypes = {
+  name: PropTypes.string,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  primaryName: PropTypes.string,
+  primaryVarName: PropTypes.string,
+  secondaryName: PropTypes.string,
+  secondaryVarName: PropTypes.string,
+  hideSecondary: PropTypes.bool
+};
+
+export default ColorRules;
diff --git a/src/core_plugins/metrics/public/components/custom_color_picker.js b/src/core_plugins/metrics/public/components/custom_color_picker.js
new file mode 100644
index 0000000000000..bb5b4aa53557c
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/custom_color_picker.js
@@ -0,0 +1,131 @@
+import React, { Component, PropTypes } from 'react';
+
+import { ColorWrap as colorWrap, Saturation, Hue, Alpha, Checkboard } from 'react-color/lib/components/common';
+import ChromeFields from 'react-color/lib/components/chrome/ChromeFields';
+import ChromePointer from 'react-color/lib/components/chrome/ChromePointer';
+import ChromePointerCircle from 'react-color/lib/components/chrome/ChromePointerCircle';
+import CompactColor from 'react-color/lib/components/compact/CompactColor';
+import color from 'react-color/lib/helpers/color';
+import shallowCompare from 'react-addons-shallow-compare';
+
+export class CustomColorPicker extends Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return shallowCompare(nextProps, nextState);
+  }
+
+  handleChange(data) {
+    this.props.onChange(data);
+  }
+
+  render() {
+    const rgb = this.props.rgb;
+
+    const styles = {
+      active: {
+        background: `rgba(${ rgb.r }, ${ rgb.g }, ${ rgb.b }, ${ rgb.a })`,
+      },
+      Saturation: {
+        radius: '2px 2px 0 0 '
+      },
+      Hue: {
+        radius: '2px',
+      },
+      Alpha: {
+        radius: '2px',
+      }
+    };
+
+    const handleSwatchChange = (data) => {
+      if (data.hex) {
+        color.isValidHex(data.hex) && this.props.onChange({
+          hex: data.hex,
+          source: 'hex',
+        });
+      } else {
+        this.props.onChange(data);
+      }
+    };
+
+    const swatches = this.props.colors.map((c) => {
+      return (
+        <CompactColor
+          key={c}
+          color={c}
+          onClick={handleSwatchChange}/>
+      );
+    });
+
+    return (
+      <div className="custom-picker color_picker">
+        <div className="color_picker__saturation">
+          <Saturation
+            style={styles.Saturation}
+            { ...this.props }
+            pointer={ChromePointerCircle}
+            onChange={this.handleChange}
+          />
+        </div>
+        <div className="color_picker__body">
+          <div className="color_picker__controls flexbox-fix">
+            <div className={ this.props.disableAlpha ? 'color_picker__color-disable_alpha' : 'color_picker__color' }>
+              <div className={ this.props.disableAlpha ? 'color_picker__swatch-disable_alpha' : 'color_picker__swatch' }>
+                <div className="color_picker__active" />
+                <Checkboard />
+              </div>
+            </div>
+            <div className="color_picker__toggles">
+              <div className={ this.props.disableAlpha ? 'color_picker__hue-disable_alpha' : 'color_picker__hue' }>
+                <Hue
+                  style={styles.Hue}
+                  {...this.props}
+                  pointer={ChromePointer}
+                  onChange={this.handleChange}
+                />
+              </div>
+              <div className={ this.props.disableAlpha ? 'color_picker__alpha-disable_alpha' : 'color_picker__alpha'}>
+                <Alpha
+                  style={styles.Alpha}
+                  {...this.props}
+                  pointer={ChromePointer}
+                  onChange={this.handleChange}
+                />
+              </div>
+            </div>
+          </div>
+          <ChromeFields
+            {...this.props}
+            onChange={this.handleChange}
+            disableAlpha={this.props.disableAlpha}
+          />
+          <div className="color_picker__swatches flexbox-fix">
+            {swatches}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+CustomColorPicker.defaultProps = {
+  colors: [
+    '#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',
+    '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',
+    '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400',
+    '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF',
+    '#0F1419', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00',
+    '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E',
+  ],
+};
+
+CustomColorPicker.propTypes = {
+  color: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onChangeComplete: PropTypes.func,
+  onChange: PropTypes.func
+};
+
+export default colorWrap(CustomColorPicker);
diff --git a/src/core_plugins/metrics/public/components/data_format_picker.js b/src/core_plugins/metrics/public/components/data_format_picker.js
new file mode 100644
index 0000000000000..c718d09f07498
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/data_format_picker.js
@@ -0,0 +1,83 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import Select from 'react-select';
+
+class DataFormatPicker extends Component {
+
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleCustomChange = this.handleCustomChange.bind(this);
+  }
+
+  handleCustomChange() {
+    this.props.onChange({ value: this.custom && this.custom.value || '' });
+  }
+
+  handleChange(value) {
+    if (value.value === 'custom') {
+      this.handleCustomChange();
+    } else {
+      this.props.onChange(value);
+    }
+  }
+
+  render() {
+    const value = this.props.value || '';
+    let defaultValue = value;
+    if (!_.includes(['bytes', 'number', 'percent'], value)) {
+      defaultValue = 'custom';
+    }
+    const options = [
+      { label: 'Bytes', value: 'bytes' },
+      { label: 'Number', value: 'number' },
+      { label: 'Percent', value: 'percent' },
+      { label: 'Custom', value: 'custom' }
+    ];
+
+    let custom;
+    if (defaultValue === 'custom') {
+      custom = (
+        <div className="vis_editor__data_format_picker-custom_row">
+          <div className="vis_editor__label">
+            Format String (See <a href="http://numeraljs.com/" target="_BLANK">Numeral.js</a>)
+          </div>
+          <input
+            className="vis_editor__input"
+            defaultValue={value}
+            ref={(el) => this.custom = el}
+            onChange={this.handleCustomChange}
+            type="text"/>
+        </div>
+      );
+    }
+    return (
+      <div className="vis_editor__data_format_picker-container">
+        <div className="vis_editor__label">
+          {this.props.label}
+        </div>
+        <div className="vis_editor__item">
+          <Select
+            clearable={false}
+            value={defaultValue}
+            options={options}
+            onChange={this.handleChange}/>
+        </div>
+        {custom}
+      </div>
+    );
+  }
+
+}
+
+DataFormatPicker.defaultProps = {
+  label: 'Data Formatter'
+};
+
+DataFormatPicker.propTypes = {
+  value: PropTypes.string,
+  label: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+export default DataFormatPicker;
diff --git a/src/core_plugins/metrics/public/components/error.js b/src/core_plugins/metrics/public/components/error.js
new file mode 100644
index 0000000000000..675c220ad50a9
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/error.js
@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react';
+import reactcss from 'reactcss';
+import _ from 'lodash';
+
+function ErrorComponent(props) {
+  const { error } = props;
+  let additionalInfo;
+  const type = _.get(error, 'error.caused_by.type');
+
+  if (type === 'script_exception') {
+    const scriptStack = _.get(error, 'error.caused_by.script_stack');
+    const reason = _.get(error, 'error.caused_by.caused_by.reason');
+    additionalInfo = (
+      <div className="metrics_error__additional">
+        <div className="metrics_error__reason">{ reason }</div>
+        <div className="metrics_error__stack">{ scriptStack.join('\n')}</div>
+      </div>
+    );
+  } else {
+    const reason = _.get(error, 'error.caused_by.reason');
+    additionalInfo = (
+      <div className="metrics_error__additional">
+        <div className="metrics_error__reason">{ reason }</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="metrics_error">
+      <div className="merics_error__title">The request for this panel failed.</div>
+      { additionalInfo }
+    </div>
+  );
+}
+
+ErrorComponent.propTypes = {
+  error: PropTypes.object
+};
+
+export default ErrorComponent;
diff --git a/src/core_plugins/metrics/public/components/icon_select.js b/src/core_plugins/metrics/public/components/icon_select.js
new file mode 100644
index 0000000000000..1bc5d766a752d
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/icon_select.js
@@ -0,0 +1,116 @@
+import React, { Component, PropTypes } from 'react';
+import Select from 'react-select';
+
+class IconOption extends Component {
+
+  constructor(props) {
+    super(props);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
+  handleMouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.props.onSelect(this.props.option, event);
+  }
+
+  handleMouseEnter(event) {
+    this.props.onFocus(this.props.option, event);
+  }
+
+  handleMouseMove(event) {
+    if (this.props.isFocused) return;
+    this.props.onFocus(this.props.option, event);
+  }
+
+  render() {
+    const icon = this.props.option.value;
+    const title = this.props.option.label;
+    return (
+      <div className={this.props.className}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseDown={this.handleMouseDown}
+        onMouseMove={this.handleMouseMove}
+        title={title}>
+        <span className="Select-value-label">
+          <i className={`vis_editor__icon_select-option fa ${icon}`}></i>
+          { this.props.children }
+        </span>
+      </div>
+    );
+  }
+
+}
+
+IconOption.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isFocused: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onSelect: PropTypes.func,
+  option: PropTypes.object.isRequired,
+};
+
+
+function IconValue(props) {
+  const icon = props.value && props.value.value;
+  const label = props.value && props.value.label;
+  return (
+    <div className="Select-value" title={label}>
+      <span className="Select-value-label">
+        <i className={`vis_editor__icon_select-value fa ${icon}`}></i>
+        { props.children }
+      </span>
+    </div>
+  );
+}
+
+IconValue.propTypes = {
+  children: PropTypes.node,
+  placeholder: PropTypes.string,
+  value: PropTypes.object.isRequired
+};
+
+function IconSelect(props) {
+  return (
+    <Select
+      clearable={false}
+      onChange={props.onChange}
+      value={props.value}
+      optionComponent={IconOption}
+      valueComponent={IconValue}
+      options={props.icons} />
+  );
+}
+
+IconSelect.defaultProps = {
+  icons: [
+    { value: 'fa-asterisk', label: 'Asterisk' },
+    { value: 'fa-bell', label: 'Bell' },
+    { value: 'fa-bolt', label: 'Bolt' },
+    { value: 'fa-bomb', label: 'Bomb' },
+    { value: 'fa-bug', label: 'Bug' },
+    { value: 'fa-comment', label: 'Comment' },
+    { value: 'fa-exclamation-circle', label: 'Exclamation Circle' },
+    { value: 'fa-exclamation-triangle', label: 'Exclamation Triangle' },
+    { value: 'fa-fire', label: 'Fire' },
+    { value: 'fa-flag', label: 'Flag' },
+    { value: 'fa-heart', label: 'Heart' },
+    { value: 'fa-map-marker', label: 'Map Marker' },
+    { value: 'fa-map-pin', label: 'Map Pin' },
+    { value: 'fa-star', label: 'Star' },
+    { value: 'fa-tag', label: 'Tag' },
+  ]
+};
+
+IconSelect.propTypes = {
+  icons: PropTypes.array,
+  onChange: PropTypes.func,
+  value: PropTypes.string.isRequired
+};
+
+export default IconSelect;
diff --git a/src/core_plugins/metrics/public/components/index_pattern.js b/src/core_plugins/metrics/public/components/index_pattern.js
new file mode 100644
index 0000000000000..cbe132774fb18
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/index_pattern.js
@@ -0,0 +1,66 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import FieldSelect from './aggs/field_select';
+import createSelectHandler from './lib/create_select_handler';
+import createTextHandler from './lib/create_text_handler';
+
+class IndexPattern extends Component {
+  render() {
+    const { fields, prefix } = this.props;
+    const handleSelectChange = createSelectHandler(this.props.onChange);
+    const handleTextChange = createTextHandler(this.props.onChange);
+    const timeFieldName = `${prefix}time_field`;
+    const indexPatternName = `${prefix}index_pattern`;
+    const intervalName = `${prefix}interval`;
+
+    const defaults = {
+      [indexPatternName]: '*',
+      [intervalName]: 'auto'
+    };
+
+    const model = { ...defaults, ...this.props.model };
+    return (
+      <div className={this.props.className}>
+        <div className="vis_editor__label">Index Pattern</div>
+        <input
+          className="vis_editor__input"
+          disabled={this.props.disabled}
+          onChange={handleTextChange(indexPatternName, '*')}
+          value={model[indexPatternName]}/>
+        <div className="vis_editor__label">Time Field</div>
+        <div className="vis_editor__index_pattern-fields">
+          <FieldSelect
+            restrict="date"
+            value={model[timeFieldName]}
+            disabled={this.props.disabled}
+            onChange={handleSelectChange(timeFieldName)}
+            indexPattern={model[indexPatternName]}
+            fields={fields}/>
+        </div>
+        <div className="vis_editor__label">Interval (auto, 1m, 1d, 1w, 1y)</div>
+        <input
+          className="vis_editor__input"
+          disabled={this.props.disabled}
+          onChange={handleTextChange(intervalName, 'auto')}
+          value={model[intervalName]}/>
+      </div>
+    );
+  }
+}
+
+IndexPattern.defaultProps = {
+  prefix: '',
+  disabled: false,
+  className: 'vis_editor__row'
+};
+
+IndexPattern.propTypes = {
+  model: PropTypes.object.isRequired,
+  fields: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  prefix: PropTypes.string,
+  disabled: PropTypes.bool,
+  className: PropTypes.string
+};
+
+export default IndexPattern;
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/agg_lookup.js b/src/core_plugins/metrics/public/components/lib/__tests__/agg_lookup.js
new file mode 100644
index 0000000000000..bf5110aaabc56
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/agg_lookup.js
@@ -0,0 +1,45 @@
+import { expect } from 'chai';
+import { createOptions, isBasicAgg } from '../agg_lookup';
+
+describe('aggLookup', () => {
+
+  describe('isBasicAgg(metric)', () => {
+    it('returns true for a basic metric (count)', () => {
+      expect(isBasicAgg({ type: 'count' })).to.equal(true);
+    });
+    it('returns false for a pipeline metric (derivative)', () => {
+      expect(isBasicAgg({ type: 'derivative' })).to.equal(false);
+    });
+  });
+
+  describe('createOptions(type, siblings)', () => {
+
+    it('returns options for all aggs', () => {
+      const options = createOptions();
+      expect(options).to.have.length(26);
+      options.forEach((option) => {
+        expect(option).to.have.property('label');
+        expect(option).to.have.property('value');
+        expect(option).to.have.property('disabled');
+      });
+    });
+
+    it('returns options for basic', () => {
+      const options = createOptions('basic');
+      expect(options).to.have.length(13);
+      expect(options.every(opt => isBasicAgg({ type: opt.value }))).to.equal(true);
+    });
+
+    it('returns options for pipeline', () => {
+      const options = createOptions('pipeline');
+      expect(options).to.have.length(13);
+      expect(options.every(opt => !isBasicAgg({ type: opt.value }))).to.equal(true);
+    });
+
+    it('returns options for all if given unknown key', () => {
+      const options = createOptions('foo');
+      expect(options).to.have.length(26);
+    });
+
+  });
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/calculate_label.js b/src/core_plugins/metrics/public/components/lib/__tests__/calculate_label.js
new file mode 100644
index 0000000000000..10414c15de61e
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/calculate_label.js
@@ -0,0 +1,62 @@
+import { expect } from 'chai';
+import calculateLabel from '../calculate_label';
+
+describe('calculateLabel(metric, metrics)', () => {
+  it('returns "Unkonwn" for empty metric', () => {
+    expect(calculateLabel()).to.equal('Unknown');
+  });
+
+  it('returns the metric.alias if set', () => {
+    expect(calculateLabel({ alias: 'Example' })).to.equal('Example');
+  });
+
+  it('returns "Count" for a count metric', () => {
+    expect(calculateLabel({ type: 'count' })).to.equal('Count');
+  });
+
+  it('returns "Calcuation" for a bucket script metric', () => {
+    expect(calculateLabel({ type: 'calculation' })).to.equal('Calculation');
+  });
+
+  it('returns formated label for series_agg', () => {
+    const label = calculateLabel({ type: 'series_agg', function: 'max' });
+    expect(label).to.equal('Series Agg (max)');
+  });
+
+  it('returns formated label for basic aggs', () => {
+    const label = calculateLabel({ type: 'avg', field: 'memory' });
+    expect(label).to.equal('Average of memory');
+  });
+
+  it('returns formated label for pipeline aggs', () => {
+    const metric = { id: 2, type: 'derivative', field: 1 };
+    const metrics = [
+      { id: 1, type: 'max', field: 'network.out.bytes' },
+      metric
+    ];
+    const label = calculateLabel(metric, metrics);
+    expect(label).to.equal('Derivative of Max of network.out.bytes');
+  });
+
+  it('returns formated label for pipeline aggs (deep)', () => {
+    const metric = { id: 3, type: 'derivative', field: 2 };
+    const metrics = [
+      { id: 1, type: 'max', field: 'network.out.bytes' },
+      { id: 2, type: 'moving_average', field: 1 },
+      metric
+    ];
+    const label = calculateLabel(metric, metrics);
+    expect(label).to.equal('Derivative of Moving Average of Max of network.out.bytes');
+  });
+
+  it('returns formated label for pipeline aggs uses alias for field metric', () => {
+    const metric = { id: 2, type: 'derivative', field: 1 };
+    const metrics = [
+      { id: 1, type: 'max', field: 'network.out.bytes', alias: 'Outbound Traffic' },
+      metric
+    ];
+    const label = calculateLabel(metric, metrics);
+    expect(label).to.equal('Derivative of Outbound Traffic');
+  });
+
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/calculate_siblings.js b/src/core_plugins/metrics/public/components/lib/__tests__/calculate_siblings.js
new file mode 100644
index 0000000000000..0884cf0bc1935
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/calculate_siblings.js
@@ -0,0 +1,19 @@
+import calculateSiblings from '../calculate_siblings';
+import { expect } from 'chai';
+
+describe('calculateSiblings(metrics, metric)', () => {
+  it('should return all siblings', () => {
+    const metrics = [
+      { id: 1, type: 'max', field: 'network.bytes' },
+      { id: 2, type: 'derivative', field: 1 },
+      { id: 3, type: 'derivative', field: 2 },
+      { id: 4, type: 'moving_average', field: 2 },
+      { id: 5, type: 'count' }
+    ];
+    const siblings = calculateSiblings(metrics, { id: 2 });
+    expect(siblings).to.eql([
+      { id: 1, type: 'max', field: 'network.bytes' },
+      { id: 5, type: 'count' }
+    ]);
+  });
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/collection_actions.js b/src/core_plugins/metrics/public/components/lib/__tests__/collection_actions.js
new file mode 100644
index 0000000000000..d3329601f812c
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/collection_actions.js
@@ -0,0 +1,58 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import {
+  handleChange,
+  handleAdd,
+  handleDelete
+} from '../collection_actions';
+
+describe('collection actions', () => {
+
+  it('handleChange() calls props.onChange() with updated collection', () => {
+    const fn = sinon.spy();
+    const props = {
+      model: { test: [{ id: 1, title: 'foo' }] },
+      name: 'test',
+      onChange: fn
+    };
+    handleChange.call(null, props, { id: 1, title: 'bar' });
+    expect(fn.calledOnce).to.equal(true);
+    expect(fn.firstCall.args[0]).to.eql({
+      test: [{ id:1, title: 'bar' }]
+    });
+  });
+
+  it('handleAdd() calls props.onChange() with update collection', () => {
+    const newItemFn = sinon.stub().returns({ id: 2, title: 'example' });
+    const fn = sinon.spy();
+    const props = {
+      model: { test: [{ id: 1, title: 'foo' }] },
+      name: 'test',
+      onChange: fn
+    };
+    handleAdd.call(null, props, newItemFn);
+    expect(fn.calledOnce).to.equal(true);
+    expect(newItemFn.calledOnce).to.equal(true);
+    expect(fn.firstCall.args[0]).to.eql({
+      test: [{ id:1, title: 'foo' }, { id: 2, title: 'example' }]
+    });
+  });
+
+  it('handleDelete() calls props.onChange() with update collection', () => {
+    const fn = sinon.spy();
+    const props = {
+      model: { test: [{ id: 1, title: 'foo' }] },
+      name: 'test',
+      onChange: fn
+    };
+    handleDelete.call(null, props, { id: 1 });
+    expect(fn.calledOnce).to.equal(true);
+    expect(fn.firstCall.args[0]).to.eql({
+      test: []
+    });
+  });
+
+
+
+
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/convert_series_to_vars.js b/src/core_plugins/metrics/public/components/lib/__tests__/convert_series_to_vars.js
new file mode 100644
index 0000000000000..0cf5d5df04d88
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/convert_series_to_vars.js
@@ -0,0 +1,8 @@
+import convertSeriesToVars from '../convert_series_to_vars';
+import { expect } from 'chai';
+
+describe('convertSeriesToVars(series, model)', () => {
+  it('returns and object', () => {
+
+  });
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/create_number_handler.js b/src/core_plugins/metrics/public/components/lib/__tests__/create_number_handler.js
new file mode 100644
index 0000000000000..4310c5d676427
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/create_number_handler.js
@@ -0,0 +1,27 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import createNumberHandler from '../create_number_handler';
+
+describe('createNumberHandler()', () => {
+
+  let handleChange;
+  let changeHandler;
+  let event;
+
+  beforeEach(() => {
+    handleChange = sinon.spy();
+    changeHandler = createNumberHandler(handleChange);
+    event = { preventDefault: sinon.spy(), target: { value: '1' } };
+    const fn = changeHandler('test');
+    fn(event);
+  });
+
+  it('calls handleChange() funciton with partial', () => {
+    expect(event.preventDefault.calledOnce).to.equal(true);
+    expect(handleChange.calledOnce).to.equal(true);
+    expect(handleChange.firstCall.args[0]).to.eql({
+      test: 1
+    });
+  });
+
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js b/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
new file mode 100644
index 0000000000000..283ec416d7b5a
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
@@ -0,0 +1,26 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import createSelectHandler from '../create_select_handler';
+
+describe('createSelectHandler()', () => {
+
+  let handleChange;
+  let changeHandler;
+  let event;
+
+  beforeEach(() => {
+    handleChange = sinon.spy();
+    changeHandler = createSelectHandler(handleChange);
+    const fn = changeHandler('test');
+    fn({ value: 'foo' });
+  });
+
+  it('calls handleChange() funciton with partial', () => {
+    expect(handleChange.calledOnce).to.equal(true);
+    expect(handleChange.firstCall.args[0]).to.eql({
+      test: 'foo'
+    });
+  });
+
+});
+
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/create_text_handler.js b/src/core_plugins/metrics/public/components/lib/__tests__/create_text_handler.js
new file mode 100644
index 0000000000000..f4e45eb54ddb7
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/create_text_handler.js
@@ -0,0 +1,28 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import createTextHandler from '../create_text_handler';
+
+describe('createTextHandler()', () => {
+
+  let handleChange;
+  let changeHandler;
+  let event;
+
+  beforeEach(() => {
+    handleChange = sinon.spy();
+    changeHandler = createTextHandler(handleChange);
+    event = { preventDefault: sinon.spy(), target: { value: 'foo' } };
+    const fn = changeHandler('test');
+    fn(event);
+  });
+
+  it('calls handleChange() funciton with partial', () => {
+    expect(event.preventDefault.calledOnce).to.equal(true);
+    expect(handleChange.calledOnce).to.equal(true);
+    expect(handleChange.firstCall.args[0]).to.eql({
+      test: 'foo'
+    });
+  });
+
+});
+
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/generate_by_type_filter.js b/src/core_plugins/metrics/public/components/lib/__tests__/generate_by_type_filter.js
new file mode 100644
index 0000000000000..da65b3150b918
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/generate_by_type_filter.js
@@ -0,0 +1,53 @@
+import generateByTypeFilter from '../generate_by_type_filter';
+import { expect } from 'chai';
+
+describe('generateByTypeFilter()', () => {
+
+  describe('numeric', () => {
+    const fn = generateByTypeFilter('numeric');
+    [
+      'scaled_float',
+      'half_float',
+      'integer',
+      'float',
+      'long',
+      'double'
+    ].forEach((type) => {
+      it(`should return true for ${type}`, () => expect(fn({ type })).to.equal(true));
+    });
+  });
+
+  describe('string', () => {
+    const fn = generateByTypeFilter('string');
+    ['string', 'keyword', 'text'].forEach((type) => {
+      it(`should return true for ${type}`, () => expect(fn({ type })).to.equal(true));
+    });
+  });
+
+  describe('date', () => {
+    const fn = generateByTypeFilter('date');
+    ['date'].forEach((type) => {
+      it(`should return true for ${type}`, () => expect(fn({ type })).to.equal(true));
+    });
+  });
+
+  describe('all', () => {
+    const fn = generateByTypeFilter('all');
+    [
+      'scaled_float',
+      'half_float',
+      'integer',
+      'float',
+      'long',
+      'double',
+      'string',
+      'text',
+      'keyword',
+      'date',
+      'whatever'
+    ].forEach((type) => {
+      it(`should return true for ${type}`, () => expect(fn({ type })).to.equal(true));
+    });
+  });
+
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/re_id_series.js b/src/core_plugins/metrics/public/components/lib/__tests__/re_id_series.js
new file mode 100644
index 0000000000000..de211f85d49d9
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/re_id_series.js
@@ -0,0 +1,78 @@
+import uuid from 'node-uuid';
+import { expect } from 'chai';
+import reIdSeries from '../re_id_series';
+
+describe('reIdSeries()', () => {
+
+  it('reassign ids for series with just basic metrics', () => {
+    const series = {
+      id: uuid.v1(),
+      metrics: [
+        { id: uuid.v1() },
+        { id: uuid.v1() }
+      ]
+    };
+    const newSeries = reIdSeries(series);
+    expect(newSeries).to.not.equal(series);
+    expect(newSeries.id).to.not.equal(series.id);
+    newSeries.metrics.forEach((val, key) => {
+      expect(val.id).to.not.equal(series.metrics[key].id);
+    });
+  });
+
+  it('reassign ids for series with just basic metrics and group by', () => {
+    const firstMetricId = uuid.v1();
+    const series = {
+      id: uuid.v1(),
+      metrics: [
+        { id: firstMetricId },
+        { id: uuid.v1() }
+      ],
+      terms_order_by: firstMetricId
+    };
+    const newSeries = reIdSeries(series);
+    expect(newSeries).to.not.equal(series);
+    expect(newSeries.id).to.not.equal(series.id);
+    newSeries.metrics.forEach((val, key) => {
+      expect(val.id).to.not.equal(series.metrics[key].id);
+    });
+    expect(newSeries.terms_order_by).to.equal(newSeries.metrics[0].id);
+  });
+
+  it('reassign ids for series with pipeline metrics', () => {
+    const firstMetricId = uuid.v1();
+    const series = {
+      id: uuid.v1(),
+      metrics: [
+        { id: firstMetricId },
+        { id: uuid.v1(), field: firstMetricId }
+      ]
+    };
+    const newSeries = reIdSeries(series);
+    expect(newSeries).to.not.equal(series);
+    expect(newSeries.id).to.not.equal(series.id);
+    expect(newSeries.metrics[0].id).to.equal(newSeries.metrics[1].field);
+  });
+
+  it('reassign ids for series with calculation vars', () => {
+    const firstMetricId = uuid.v1();
+    const series = {
+      id: uuid.v1(),
+      metrics: [
+        { id: firstMetricId },
+        {
+          id: uuid.v1(),
+          type: 'calculation',
+          variables: [{ id: uuid.v1(), field: firstMetricId }]
+        }
+      ]
+    };
+    const newSeries = reIdSeries(series);
+    expect(newSeries).to.not.equal(series);
+    expect(newSeries.id).to.not.equal(series.id);
+    expect(newSeries.metrics[1].variables[0].field).to.equal(newSeries.metrics[0].id);
+  });
+
+
+
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/replace_vars.js b/src/core_plugins/metrics/public/components/lib/__tests__/replace_vars.js
new file mode 100644
index 0000000000000..63d420d668a97
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/replace_vars.js
@@ -0,0 +1,23 @@
+import { expect } from 'chai';
+import replaceVars from '../replace_vars';
+
+describe('replaceVars(str, args, vars)', () => {
+  it('replaces vars with values', () => {
+    const vars = { total: 100 };
+    const args = { host: 'test-01' };
+    const template = '# {{args.host}} {{total}}';
+    expect(replaceVars(template, args, vars)).to.equal('# test-01 100');
+  });
+  it('replaces args override vars', () => {
+    const vars = { total: 100, args: { test: 'foo-01' } };
+    const args = { test: 'bar-01' };
+    const template = '# {{args.test}} {{total}}';
+    expect(replaceVars(template, args, vars)).to.equal('# bar-01 100');
+  });
+  it('returns original string if error', () => {
+    const vars = { total: 100 };
+    const args = { host: 'test-01' };
+    const template = '# {{args.host}} {{total';
+    expect(replaceVars(template, args, vars)).to.equal('# {{args.host}} {{total');
+  });
+});
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/tick_formatter.js b/src/core_plugins/metrics/public/components/lib/__tests__/tick_formatter.js
new file mode 100644
index 0000000000000..bbfe1d7ccb7f4
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/tick_formatter.js
@@ -0,0 +1,47 @@
+import { expect } from 'chai';
+import tickFormatter from '../tick_formatter';
+
+describe('tickFormatter(format, template)', () => {
+
+  it('returns a number with two decimal place by default', () => {
+    const fn = tickFormatter();
+    expect(fn(1.5556)).to.equal('1.56');
+  });
+
+  it('returns a percent with percent formatter', () => {
+    const fn = tickFormatter('percent');
+    expect(fn(0.5556)).to.equal('55.56%');
+  });
+
+  it('returns a byte formatted string with byte formatter', () => {
+    const fn = tickFormatter('bytes');
+    expect(fn(1500 ^ 10)).to.equal('1.5KB');
+  });
+
+  it('returns a custom forrmatted string with custom formatter', () => {
+    const fn = tickFormatter('0.0a');
+    expect(fn(1500)).to.equal('1.5k');
+  });
+
+  it('returns a custom forrmatted string with custom formatter and template', () => {
+    const fn = tickFormatter('0.0a', '{{value}}/s');
+    expect(fn(1500)).to.equal('1.5k/s');
+  });
+
+  it('returns zero if passed a string', () => {
+    const fn = tickFormatter();
+    expect(fn('100')).to.equal('0');
+  });
+
+  it('returns value if passed a bad formatter', () => {
+    const fn = tickFormatter('102');
+    expect(fn(100)).to.equal('100');
+  });
+
+  it('returns formatted value if passed a bad template', () => {
+    const fn = tickFormatter('number', '{{value');
+    expect(fn(1.5556)).to.equal('1.56');
+  });
+
+
+});
diff --git a/src/core_plugins/metrics/public/components/lib/agg_lookup.js b/src/core_plugins/metrics/public/components/lib/agg_lookup.js
new file mode 100644
index 0000000000000..fb87655f89fd1
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/agg_lookup.js
@@ -0,0 +1,78 @@
+import _ from 'lodash';
+const lookup = {
+  'count': 'Count',
+  'calculation': 'Calculation',
+  'std_deviation': 'Std. Deviation',
+  'variance': 'Variance',
+  'sum_of_squares': 'Sum of Sq.',
+  'avg': 'Average',
+  'max': 'Max',
+  'min': 'Min',
+  'sum': 'Sum',
+  'percentile': 'Percentile',
+  'percentile_rank': 'Percentile Rank',
+  'cardinality': 'Cardinality',
+  'value_count': 'Value Count',
+  'derivative': 'Derivative',
+  'cumulative_sum': 'Cumulative Sum',
+  'moving_average': 'Moving Average',
+  'avg_bucket': 'Overall Average',
+  'min_bucket': 'Overall Min',
+  'max_bucket': 'Overall Max',
+  'sum_bucket': 'Overall Sum',
+  'variance_bucket': 'Overall Variance',
+  'sum_of_squares_bucket': 'Overall Sum of Sq.',
+  'std_deviation_bucket': 'Overall Std. Deviation',
+  'series_agg': 'Series Agg',
+  'serial_diff': 'Serial Difference',
+  'filter_ratio': 'Filter Ratio'
+};
+
+const pipeline = [
+  'calculation',
+  'derivative',
+  'cumulative_sum',
+  'moving_average',
+  'avg_bucket',
+  'min_bucket',
+  'max_bucket',
+  'sum_bucket',
+  'variance_bucket',
+  'sum_of_squares_bucket',
+  'std_deviation_bucket',
+  'series_agg',
+  'serial_diff'
+];
+
+const byType = {
+  _all: lookup,
+  pipeline: pipeline,
+  basic: _.omit(lookup, pipeline),
+  metrics: _.pick(lookup, [
+    'count',
+    'avg',
+    'min',
+    'max',
+    'sum',
+    'cardinality',
+    'value_count'
+  ])
+};
+
+export function isBasicAgg(item) {
+  return _.includes(Object.keys(byType.basic), item.type);
+}
+
+export function createOptions(type = '_all', siblings = []) {
+  let aggs = byType[type];
+  if (!aggs)  aggs = byType._all;
+  return _(aggs)
+    .map((label, value) => {
+      const disabled = false;
+      return { label, value, disabled };
+    })
+    .sortBy('label')
+    .value();
+}
+export default lookup;
+
diff --git a/src/core_plugins/metrics/public/components/lib/agg_to_component.js b/src/core_plugins/metrics/public/components/lib/agg_to_component.js
new file mode 100644
index 0000000000000..df22a42f9782d
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/agg_to_component.js
@@ -0,0 +1,42 @@
+import MovingAverage from '../aggs/moving_average';
+import Derivative from '../aggs/derivative';
+import Calculation from '../aggs/calculation';
+import StdAgg from '../aggs/std_agg';
+import Percentile from '../aggs/percentile';
+import CumulativeSum from '../aggs/cumulative_sum';
+import StdDeviation from '../aggs/std_deviation';
+import StdSibling from '../aggs/std_sibling';
+import SeriesAgg from '../aggs/series_agg';
+import SerialDiff from '../aggs/serial_diff';
+import FilterRatio from '../aggs/filter_ratio';
+import PercentileRank from '../aggs/percentile_rank';
+export default {
+  count: StdAgg,
+  avg: StdAgg,
+  max: StdAgg,
+  min: StdAgg,
+  sum: StdAgg,
+  std_deviation: StdDeviation,
+  sum_of_squares: StdAgg,
+  variance: StdAgg,
+  avg_bucket: StdSibling,
+  max_bucket: StdSibling,
+  min_bucket: StdSibling,
+  sum_bucket: StdSibling,
+  variance_bucket: StdSibling,
+  sum_of_squares_bucket: StdSibling,
+  std_deviation_bucket: StdSibling,
+  percentile: Percentile,
+  percentile_rank: PercentileRank,
+  cardinality: StdAgg,
+  value_count: StdAgg,
+  calculation: Calculation,
+  cumulative_sum: CumulativeSum,
+  moving_average: MovingAverage,
+  derivative: Derivative,
+  series_agg: SeriesAgg,
+  serial_diff: SerialDiff,
+  filter_ratio: FilterRatio
+};
+
+
diff --git a/src/core_plugins/metrics/public/components/lib/basic_aggs.js b/src/core_plugins/metrics/public/components/lib/basic_aggs.js
new file mode 100644
index 0000000000000..9a5c12306f096
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/basic_aggs.js
@@ -0,0 +1,12 @@
+export default [
+  'count',
+  'avg',
+  'max',
+  'min',
+  'sum',
+  'std_deviation',
+  'variance',
+  'sum_of_squares',
+  'value_count',
+  'cardinality'
+];
diff --git a/src/core_plugins/metrics/public/components/lib/calculate_label.js b/src/core_plugins/metrics/public/components/lib/calculate_label.js
new file mode 100644
index 0000000000000..e785c1aa968c7
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/calculate_label.js
@@ -0,0 +1,37 @@
+import _ from 'lodash';
+import lookup from './agg_lookup';
+const paths = [
+  'cumulative_sum',
+  'derivative',
+  'moving_average',
+  'avg_bucket',
+  'sum_bucket',
+  'min_bucket',
+  'max_bucket',
+  'std_deviation_bucket',
+  'variance_bucket',
+  'sum_of_squares_bucket',
+  'serial_diff'
+];
+export default function calculateLabel(metric, metrics) {
+  if (!metric) return 'Unknown';
+  if (metric.alias) return metric.alias;
+
+  if (metric.type === 'count') return 'Count';
+  if (metric.type === 'calculation') return 'Calculation';
+  if (metric.type === 'series_agg') return `Series Agg (${metric.function})`;
+  if (metric.type === 'filter_ratio') return 'Filter Ratio';
+
+  if (metric.type === 'percentile_rank') {
+    return `${lookup[metric.type]} (${metric.value}) of ${metric.field}`;
+  }
+
+  if (_.includes(paths, metric.type)) {
+    const targetMetric = _.find(metrics, { id: metric.field });
+    const targetLabel = calculateLabel(targetMetric, metrics);
+    return `${lookup[metric.type]} of ${targetLabel}`;
+  }
+
+  return `${lookup[metric.type]} of ${metric.field}`;
+}
+
diff --git a/src/core_plugins/metrics/public/components/lib/calculate_siblings.js b/src/core_plugins/metrics/public/components/lib/calculate_siblings.js
new file mode 100644
index 0000000000000..868bbe0c1bd76
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/calculate_siblings.js
@@ -0,0 +1,17 @@
+import _ from 'lodash';
+
+function getAncestors(siblings, item) {
+  const ancestors = item.id && [item.id] || [];
+  siblings.forEach((sib) => {
+    if (_.includes(ancestors, sib.field)) {
+      ancestors.push(sib.id);
+    }
+  });
+  return ancestors;
+}
+
+export default (siblings, model) => {
+  const ancestors = getAncestors(siblings, model);
+  return siblings.filter(row => !_.includes(ancestors, row.id));
+};
+
diff --git a/src/core_plugins/metrics/public/components/lib/collection_actions.js b/src/core_plugins/metrics/public/components/lib/collection_actions.js
new file mode 100644
index 0000000000000..f965fd4345100
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/collection_actions.js
@@ -0,0 +1,38 @@
+import uuid from 'node-uuid';
+import _ from 'lodash';
+export function handleChange(props, doc) {
+  const { model, name } = props;
+  const collection = model[name] || [];
+  const part = {};
+  part[name] = collection.map(row => {
+    if (row.id === doc.id) return doc;
+    return row;
+  });
+  if (_.isFunction(props.onChange)) {
+    props.onChange(_.assign({}, model, part));
+  }
+}
+
+export function handleDelete(props, doc) {
+  const { model, name } = props;
+  const collection = model[name] || [];
+  const part = {};
+  part[name] = collection.filter(row => row.id !== doc.id);
+  if (_.isFunction(props.onChange)) {
+    props.onChange(_.assign({}, model, part));
+  }
+}
+
+const newFn = () => ({ id: uuid.v1() });
+export function handleAdd(props, fn = newFn) {
+  if (!_.isFunction(fn)) fn = newFn;
+  const { model, name } = props;
+  const collection = model[name] || [];
+  const part = {};
+  part[name] = collection.concat([fn()]);
+  if (_.isFunction(props.onChange)) {
+    props.onChange(_.assign({}, model, part));
+  }
+}
+
+export default { handleAdd, handleDelete, handleChange };
diff --git a/src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js b/src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js
new file mode 100644
index 0000000000000..740b33f4087a2
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js
@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import getLastValue from '../../visualizations/lib/get_last_value';
+import tickFormatter from './tick_formatter';
+import moment from 'moment';
+import calculateLabel from './calculate_label';
+export default (series, model) => {
+  const variables = {};
+  model.series.forEach(seriesModel => {
+    series
+      .filter(row => _.startsWith(row.id, seriesModel.id))
+      .forEach(row => {
+        const metric = _.last(seriesModel.metrics);
+
+        const varName = [
+          _.snakeCase(row.label),
+          _.snakeCase(seriesModel.var_name)
+        ].filter(v => v).join('.');
+
+        const formatter = tickFormatter(seriesModel.formatter, seriesModel.value_template);
+        const lastValue = getLastValue(row.data, 10);
+
+        const data = {
+          last: {
+            raw: lastValue,
+            formatted: formatter(lastValue)
+          },
+          data: {
+            raw: row.data,
+            formatted: row.data.map(point => {
+              return [moment(point[0]).format('lll'), formatter(point[1])];
+            })
+          }
+        };
+        _.set(variables, varName, data);
+        _.set(variables, `${_.snakeCase(row.label)}.label`, row.label);
+
+      });
+  });
+  return variables;
+
+};
diff --git a/src/core_plugins/metrics/public/components/lib/create_agg_row_render.js b/src/core_plugins/metrics/public/components/lib/create_agg_row_render.js
new file mode 100644
index 0000000000000..9594e32aa4c11
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/create_agg_row_render.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import seriesChangeHandler from './series_change_handler';
+import newMetricAggFn from './new_metric_agg_fn';
+import { handleAdd, handleDelete } from './collection_actions';
+import Agg from '../aggs/agg';
+
+export default function createAggRowRender(props) {
+  return (row, index, items) => {
+    const { panel, model, fields } = props;
+    const changeHandler = seriesChangeHandler(props, items);
+    return (
+      <Agg
+        key={row.id}
+        disableDelete={items.length < 2}
+        fields={fields}
+        model={row}
+        onAdd={handleAdd.bind(null, props, newMetricAggFn)}
+        onChange={changeHandler}
+        onDelete={handleDelete.bind(null, props, row)}
+        panel={panel}
+        series={model}
+        siblings={items}
+        sortData={row.id} />
+    );
+  };
+}
diff --git a/src/core_plugins/metrics/public/components/lib/create_change_handler.js b/src/core_plugins/metrics/public/components/lib/create_change_handler.js
new file mode 100644
index 0000000000000..f1d7711ce9ee0
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/create_change_handler.js
@@ -0,0 +1,5 @@
+import _ from 'lodash';
+export default (handleChange, model) => part => {
+  const doc = _.assign({}, model, part);
+  handleChange(doc);
+};
diff --git a/src/core_plugins/metrics/public/components/lib/create_number_handler.js b/src/core_plugins/metrics/public/components/lib/create_number_handler.js
new file mode 100644
index 0000000000000..d5f02a550547b
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/create_number_handler.js
@@ -0,0 +1,10 @@
+import _ from 'lodash';
+export default (handleChange) => {
+  return (name, defaultValue) => (e) => {
+    e.preventDefault();
+    const value = Number(_.get(e, 'target.value', defaultValue));
+    if (_.isFunction(handleChange)) {
+      return handleChange({ [name]: value });
+    }
+  };
+};
diff --git a/src/core_plugins/metrics/public/components/lib/create_select_handler.js b/src/core_plugins/metrics/public/components/lib/create_select_handler.js
new file mode 100644
index 0000000000000..987d4957ad15d
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/create_select_handler.js
@@ -0,0 +1,10 @@
+import _ from 'lodash';
+export default (handleChange) => {
+  return (name) => (value) => {
+    if (_.isFunction(handleChange)) {
+      return handleChange({
+        [name]: value && value.value || null
+      });
+    }
+  };
+};
diff --git a/src/core_plugins/metrics/public/components/lib/create_text_handler.js b/src/core_plugins/metrics/public/components/lib/create_text_handler.js
new file mode 100644
index 0000000000000..eaa7202437328
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/create_text_handler.js
@@ -0,0 +1,10 @@
+import _ from 'lodash';
+export default (handleChange) => {
+  return (name, defaultValue) => (e) => {
+    e.preventDefault();
+    const value = _.get(e, 'target.value', defaultValue);
+    if (_.isFunction(handleChange)) {
+      return handleChange({ [name]: value });
+    }
+  };
+};
diff --git a/src/core_plugins/metrics/public/components/lib/generate_by_type_filter.js b/src/core_plugins/metrics/public/components/lib/generate_by_type_filter.js
new file mode 100644
index 0000000000000..91a44d1e61dd6
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/generate_by_type_filter.js
@@ -0,0 +1,27 @@
+import _ from 'lodash';
+export default function byType(type) {
+  return (field) => {
+    switch (type) {
+      case 'numeric':
+        return _.includes([
+          'scaled_float',
+          'half_float',
+          'integer',
+          'float',
+          'long',
+          'double'
+        ], field.type);
+      case 'string':
+        return _.includes([
+          'string', 'keyword', 'text'
+        ], field.type);
+      case 'date':
+        return _.includes([
+          'date'
+        ], field.type);
+      default:
+        return true;
+    }
+  };
+}
+
diff --git a/src/core_plugins/metrics/public/components/lib/new_metric_agg_fn.js b/src/core_plugins/metrics/public/components/lib/new_metric_agg_fn.js
new file mode 100644
index 0000000000000..6c128939cb8ef
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/new_metric_agg_fn.js
@@ -0,0 +1,7 @@
+import uuid from 'node-uuid';
+export default () => {
+  return {
+    id: uuid.v1(),
+    type: 'count'
+  };
+};
diff --git a/src/core_plugins/metrics/public/components/lib/new_series_fn.js b/src/core_plugins/metrics/public/components/lib/new_series_fn.js
new file mode 100644
index 0000000000000..bd1ffa62af978
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/new_series_fn.js
@@ -0,0 +1,19 @@
+import uuid from 'node-uuid';
+import _ from 'lodash';
+import newMetricAggFn from './new_metric_agg_fn';
+export default (obj = {}) => {
+  return _.assign({
+    id: uuid.v1(),
+    color: '#68BC00',
+    split_mode: 'everything',
+    metrics: [ newMetricAggFn() ],
+    seperate_axis: 0,
+    axis_position: 'right',
+    formatter: 'number',
+    chart_type: 'line',
+    line_width: 1,
+    point_size: 1,
+    fill: 0,
+    stacked: 'none'
+  }, obj);
+};
diff --git a/src/core_plugins/metrics/public/components/lib/re_id_series.js b/src/core_plugins/metrics/public/components/lib/re_id_series.js
new file mode 100644
index 0000000000000..7d039493c4b49
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/re_id_series.js
@@ -0,0 +1,22 @@
+import uuid from 'node-uuid';
+import _ from 'lodash';
+export default source => {
+  const series = _.cloneDeep(source);
+  series.id = uuid.v1();
+  series.metrics.forEach((metric) => {
+    const id = uuid.v1();
+    const metricId = metric.id;
+    metric.id = id;
+    if (series.terms_order_by === metricId) series.terms_order_by = id;
+    series.metrics.filter(r => r.field === metricId).forEach(r => r.field = id);
+    series.metrics.filter(r => r.type === 'calculation' &&
+      r.variables.some(v => v.field === metricId))
+      .forEach(r => {
+        r.variables.filter(v => v.field === metricId).forEach(v => {
+          v.id = uuid.v1();
+          v.field = id;
+        });
+      });
+  });
+  return series;
+};
diff --git a/src/core_plugins/metrics/public/components/lib/replace_vars.js b/src/core_plugins/metrics/public/components/lib/replace_vars.js
new file mode 100644
index 0000000000000..307059bcb95a9
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/replace_vars.js
@@ -0,0 +1,10 @@
+import _ from 'lodash';
+import handlebars from 'handlebars/dist/handlebars';
+export default function replaceVars(str, args = {}, vars = {}) {
+  try {
+    const template = handlebars.compile(str);
+    return template(_.assign({}, vars, { args }));
+  } catch (e) {
+    return str;
+  }
+}
diff --git a/src/core_plugins/metrics/public/components/lib/series_change_handler.js b/src/core_plugins/metrics/public/components/lib/series_change_handler.js
new file mode 100644
index 0000000000000..8542fa592ce25
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/series_change_handler.js
@@ -0,0 +1,23 @@
+import _ from 'lodash';
+import newMetricAggFn from './new_metric_agg_fn';
+import { isBasicAgg } from './agg_lookup';
+import {
+  handleAdd,
+  handleChange
+} from './collection_actions';
+export default (props, items) => doc => {
+  // If we only have one sibling and the user changes to a pipeline
+  // agg we are going to add the pipeline instead of changing the
+  // current item.
+  if (items.length === 1 && !isBasicAgg(doc)) {
+    handleAdd.call(null, props, () => {
+      const metric = newMetricAggFn();
+      metric.type = doc.type;
+      const incompatPipelines = ['calculation', 'series_agg'];
+      if (!_.contains(incompatPipelines, doc.type)) metric.field = doc.id;
+      return metric;
+    });
+  } else {
+    handleChange.call(null, props, doc);
+  }
+};
diff --git a/src/core_plugins/metrics/public/components/lib/tick_formatter.js b/src/core_plugins/metrics/public/components/lib/tick_formatter.js
new file mode 100644
index 0000000000000..5508f162f4c63
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/lib/tick_formatter.js
@@ -0,0 +1,32 @@
+import numeral from '@spalger/numeral';
+import _ from 'lodash';
+import handlebars from 'handlebars/dist/handlebars';
+
+const formatLookup = {
+  'bytes': '0.0b',
+  'number': '0,0.[00]',
+  'percent': '0.[00]%'
+};
+
+export default (format = '0,0.[00]', template) => {
+  if (!template) template = '{{value}}';
+  const render = handlebars.compile(template);
+  return (val) => {
+    const formatString = formatLookup[format] || format;
+    let value;
+    if (!_.isNumber(val)) {
+      value = 0;
+    } else {
+      try {
+        value = numeral(val).format(formatString);
+      } catch (e) {
+        value = val;
+      }
+    }
+    try {
+      return render({ value });
+    } catch (e) {
+      return String(value);
+    }
+  };
+};
diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
new file mode 100644
index 0000000000000..b77efd24d925a
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -0,0 +1,144 @@
+/* eslint max-len:0 */
+import React, { Component, PropTypes } from 'react';
+import tickFormatter from './lib/tick_formatter';
+import moment from 'moment';
+import calculateLabel from './lib/calculate_label';
+import convertSeriesToVars from './lib/convert_series_to_vars';
+import AceEditor from 'react-ace';
+import _ from 'lodash';
+import brace from 'brace';
+import 'brace/mode/markdown';
+import 'brace/theme/github';
+import { getLastValue } from 'plugins/metrics/visualizations';
+import numeral from 'numeral';
+
+class MarkdownEditor extends Component {
+
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleOnLoad = this.handleOnLoad.bind(this);
+  }
+
+  handleChange(value) {
+    this.props.onChange({ markdown: value });
+  }
+
+  handleOnLoad(ace) {
+    this.ace = ace;
+  }
+
+  handleVarClick(snippet) {
+    return (e) => {
+      if (this.ace) this.ace.insert(snippet);
+    };
+  }
+
+  render() {
+    const { model, visData } = this.props;
+    const series = _.get(visData, `${model.id}.series`, []);
+    const variables = convertSeriesToVars(series, model);
+    const rows = [];
+    const rawFormatter = tickFormatter('0.[0000]');
+
+    const createPrimativeRow = key => {
+      const snippet = `{{ ${key} }}`;
+      let value = _.get(variables, key);
+      if (/raw$/.test(key)) value = rawFormatter(value);
+      rows.push(
+        <tr key={key}>
+          <td>
+            <a onClick={this.handleVarClick(snippet)}>
+              { snippet }
+            </a>
+          </td>
+          <td>
+            <code>"{ value }"</code>
+          </td>
+        </tr>
+      );
+    };
+
+    const createArrayRow = key => {
+      const snippet = `{{# ${key} }}{{/ ${key} }}`;
+      const date = _.get(variables, `${key}[0][0]`);
+      let value = _.get(variables, `${key}[0][1]`);
+      if (/raw$/.test(key)) value = rawFormatter(value);
+      rows.push(
+        <tr key={key}>
+          <td>
+            <a onClick={this.handleVarClick(snippet)}>
+              { `{{ ${key} }}` }
+            </a>
+          </td>
+          <td>
+            <code>[ [ "{date}", "{value}" ], ... ]</code>
+          </td>
+        </tr>
+      );
+    };
+
+    function walk(obj, path = []) {
+      for (const name in obj) {
+        if (_.isArray(obj[name])) {
+          createArrayRow(path.concat(name).join('.'));
+        } else if (_.isObject(obj[name])) {
+          walk(obj[name], path.concat(name));
+        } else {
+          createPrimativeRow(path.concat(name).join('.'));
+        }
+      }
+    }
+
+    walk(variables);
+
+
+    return (
+      <div className="vis_editor__markdown">
+        <div className="vis_editor__markdown-editor">
+          <AceEditor
+            onLoad={this.handleOnLoad}
+            mode="markdown"
+            theme="github"
+            width="100%"
+            height="100%"
+            name={`ace-${model.id}`}
+            setOptions={{ wrap: true, fontSize: '14px' }}
+            value={model.markdown}
+            onChange={this.handleChange}/>
+        </div>
+        <div className="vis_editor__markdown-variables">
+          <div>The following variables can be used in the Markdown by using the Handlebar (mustache) syntax. <a href="http://handlebarsjs.com/expressions.html" target="_BLANK">Click here for documentation</a> on the available expressions. HTML is also enabled.</div>
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows}
+            </tbody>
+          </table>
+          <div className="vis_editor__markdown-code-desc">There is also a special variable named <code>_all</code> which you can use to access the entire tree. This is useful for creating lists with data from a group by...</div>
+          <pre>
+            <code>{`# All servers:
+
+{{#each _all}}
+- {{ label }} {{ last.formatted }}
+{{/each}}`}</code>
+          </pre>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+MarkdownEditor.propTypes = {
+  onChange: PropTypes.func,
+  model: PropTypes.object,
+  visData: PropTypes.object
+};
+
+export default MarkdownEditor;
diff --git a/src/core_plugins/metrics/public/components/panel_config.js b/src/core_plugins/metrics/public/components/panel_config.js
new file mode 100644
index 0000000000000..26aa7fda0ed9b
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/panel_config.js
@@ -0,0 +1,32 @@
+import React, { PropTypes } from 'react';
+import timeseries from './panel_config/timeseries';
+import metric from './panel_config/metric';
+import topN from './panel_config/top_n';
+import gauge from './panel_config/gauge';
+import markdown from './panel_config/markdown';
+
+const types = {
+  timeseries,
+  metric,
+  top_n: topN,
+  gauge,
+  markdown
+};
+
+function PanelConfig(props) {
+  const { model } = props;
+  const component = types[model.type];
+  if (component) {
+    return React.createElement(component, props);
+  }
+  return (<div>Missing panel config for "{model.type}"</div>);
+}
+
+PanelConfig.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  visData: PropTypes.object,
+};
+
+export default PanelConfig;
diff --git a/src/core_plugins/metrics/public/components/panel_config/gauge.js b/src/core_plugins/metrics/public/components/panel_config/gauge.js
new file mode 100644
index 0000000000000..847f40fdb4d91
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/panel_config/gauge.js
@@ -0,0 +1,168 @@
+import React, { Component, PropTypes } from 'react';
+import SeriesEditor from '../series_editor';
+import IndexPattern from '../index_pattern';
+import Select from 'react-select';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+import createNumberHandler from '../lib/create_number_handler';
+import DataFormatPicker from '../data_format_picker';
+import ColorRules from '../color_rules';
+import ColorPicker from '../color_picker';
+import uuid from 'node-uuid';
+import YesNo from 'plugins/metrics/components/yes_no';
+
+class GaugePanelConfig extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { selectedTab: 'data' };
+  }
+
+  componentWillMount() {
+    const { model } = this.props;
+    const parts = {};
+    if (!model.gauge_color_rules ||
+      (model.gauge_color_rules && model.gauge_color_rules.length === 0)) {
+      parts.gauge_color_rules = [{ id: uuid.v1() }];
+    }
+    if (model.gauge_width == null) parts.gauge_width = 10;
+    if (model.gauge_inner_width == null) parts.gauge_inner_width = 10;
+    if (model.gauge_style == null) parts.gauge_style = 'half';
+    this.props.onChange(parts);
+  }
+
+  switchTab(selectedTab) {
+    this.setState({ selectedTab });
+  }
+
+  render() {
+    const { selectedTab } = this.state;
+    const defaults = {
+      gauge_max: '',
+      filter: '',
+      gauge_style: 'circle',
+      gauge_inner_width: '',
+      gauge_width: ''
+    };
+    const model = { ...defaults, ...this.props.model };
+    const handleSelectChange = createSelectHandler(this.props.onChange);
+    const handleTextChange = createTextHandler(this.props.onChange);
+    const handleNumberChange = createNumberHandler(this.props.onChange);
+    const positionOptions = [
+      { label: 'Right', value: 'right' },
+      { label: 'Left', value: 'left' }
+    ];
+    const styleOptions = [
+      { label: 'Circle', value: 'circle' },
+      { label: 'Half Circle', value: 'half' }
+    ];
+    let view;
+    if (selectedTab === 'data') {
+      view = (
+        <SeriesEditor
+          colorPicker={true}
+          fields={this.props.fields}
+          limit={1}
+          model={this.props.model}
+          name={this.props.name}
+          onChange={this.props.onChange} />
+      );
+    } else {
+      view = (
+        <div className="vis_editor__container">
+          <IndexPattern
+            fields={this.props.fields}
+            model={this.props.model}
+            onChange={this.props.onChange}/>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Panel Filter</div>
+            <input
+              className="vis_editor__input-grows"
+              type="text"
+              onChange={handleTextChange('filter')}
+              value={model.filter}/>
+            <div className="vis_editor__label">Ignore Global Filter</div>
+            <YesNo
+              value={model.ignore_global_filter}
+              name="ignore_global_filter"
+              onChange={this.props.onChange}/>
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Background Color</div>
+            <ColorPicker
+              onChange={this.props.onChange}
+              name="background_color"
+              value={model.background_color}/>
+            <div className="vis_editor__label">Gauge Max (empty for auto)</div>
+            <input
+              className="vis_editor__input-grows"
+              type="number"
+              onChange={handleTextChange('gauge_max')}
+              value={model.gauge_max}/>
+            <div className="vis_editor__label">Gauge Style</div>
+            <Select
+              autosize={false}
+              clearable={false}
+              options={styleOptions}
+              value={model.gauge_style}
+              onChange={handleSelectChange('gauge_style')}/>
+
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Inner Color</div>
+            <ColorPicker
+              onChange={this.props.onChange}
+              name="gauge_inner_color"
+              value={model.gauge_inner_color}/>
+            <div className="vis_editor__label">Inner Line Width</div>
+            <input
+              className="vis_editor__input-grows"
+              type="number"
+              onChange={handleTextChange('gauge_inner_width')}
+              value={model.gauge_inner_width}/>
+            <div className="vis_editor__label">Gauge Line Width</div>
+            <input
+              className="vis_editor__input-grows"
+              type="number"
+              onChange={handleTextChange('gauge_width')}
+              value={model.gauge_width} />
+          </div>
+          <div>
+            <div className="vis_editor__label">Color Rules</div>
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <ColorRules
+              primaryName="gauge color"
+              primaryVarName="gauge"
+              secondaryName="text color"
+              secondaryVarName="text"
+              model={model}
+              onChange={this.props.onChange}
+              name="gauge_color_rules"/>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <div className="kbnTabs">
+          <div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
+            onClick={e => this.switchTab('data')}>Data</div>
+          <div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
+            onClick={e => this.switchTab('options')}>Panel Options</div>
+        </div>
+        {view}
+      </div>
+    );
+  }
+
+}
+
+GaugePanelConfig.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  visData: PropTypes.object,
+};
+
+export default GaugePanelConfig;
diff --git a/src/core_plugins/metrics/public/components/panel_config/markdown.js b/src/core_plugins/metrics/public/components/panel_config/markdown.js
new file mode 100644
index 0000000000000..3497ace42bd83
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/panel_config/markdown.js
@@ -0,0 +1,157 @@
+import React, { Component, PropTypes } from 'react';
+import SeriesEditor from '../series_editor';
+import IndexPattern from '../index_pattern';
+import AceEditor from 'react-ace';
+import brace from 'brace';
+import 'brace/mode/less';
+import Select from 'react-select';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+import DataFormatPicker from '../data_format_picker';
+import ColorPicker from '../color_picker';
+import YesNo from '../yes_no';
+import MarkdownEditor from '../markdown_editor';
+import less from 'less/lib/less-browser';
+const lessC = less(window, { env: 'production' });
+
+class MarkdownPanelConfig extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { selectedTab: 'markdown' };
+    this.handleCSSChange = this.handleCSSChange.bind(this);
+  }
+
+  switchTab(selectedTab) {
+    this.setState({ selectedTab });
+  }
+
+  handleCSSChange(value) {
+    const { model } = this.props;
+    const lessSrc = `#markdown-${model.id} {
+  ${value}
+}`;
+    lessC.render(lessSrc, { compress: true }, (e, output) => {
+      const parts = { markdown_less: value };
+      if (output) {
+        parts.markdown_css = output.css;
+      }
+      this.props.onChange(parts);
+    });
+  }
+
+  render() {
+    const defaults = { filter: '' };
+    const model = { ...defaults, ...this.props.model };
+    const { selectedTab } = this.state;
+    const handleSelectChange = createSelectHandler(this.props.onChange);
+    const handleTextChange = createTextHandler(this.props.onChange);
+    const positionOptions = [
+      { label: 'Right', value: 'right' },
+      { label: 'Left', value: 'left' }
+    ];
+
+    const legendPositionOptions = [
+      { label: 'Right', value: 'right' },
+      { label: 'Left', value: 'left' },
+      { label: 'Bottom', value: 'bottom' }
+    ];
+
+    const alignOptions = [
+      { label: 'Top', value: 'top' },
+      { label: 'Middle', value: 'middle' },
+      { label: 'Bottom', value: 'bottom' }
+    ];
+    let view;
+    if (selectedTab === 'markdown') {
+      view = (<MarkdownEditor {...this.props}/>);
+    } else if (selectedTab === 'data') {
+      view = (
+        <SeriesEditor
+          colorPicker={false}
+          fields={this.props.fields}
+          model={this.props.model}
+          name={this.props.name}
+          onChange={this.props.onChange} />
+      );
+    } else {
+      view = (
+        <div className="vis_editor__container">
+          <IndexPattern
+            fields={this.props.fields}
+            model={this.props.model}
+            onChange={this.props.onChange}/>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Background Color</div>
+            <ColorPicker
+              onChange={this.props.onChange}
+              name="background_color"
+              value={model.background_color}/>
+            <div className="vis_editor__label">Panel Filter</div>
+            <input
+              className="vis_editor__input-grows"
+              type="text"
+              onChange={handleTextChange('filter')}
+              value={model.filter} />
+            <div className="vis_editor__label">Ignore Global Filter</div>
+            <YesNo
+              value={model.ignore_global_filter}
+              name="ignore_global_filter"
+              onChange={this.props.onChange}/>
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Show Scrollbars</div>
+            <YesNo
+              value={model.markdown_scrollbars}
+              name="markdown_scrollbars"
+              onChange={this.props.onChange}/>
+            <div className="vis_editor__label">Vertical Alignment</div>
+            <div className="vis_editor__row_item">
+              <Select
+                autosize={true}
+                clearable={false}
+                options={alignOptions}
+                value={model.markdown_vertical_align}
+                onChange={handleSelectChange('markdown_vertical_align')}/>
+            </div>
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Custom CSS (supports Less)</div>
+        </div>
+          <div className="vis_editor__ace-editor">
+            <AceEditor
+              mode="less"
+              theme="github"
+              width="100%"
+              name={`ace-css-${model.id}`}
+              setOptions={{ fontSize: '14px' }}
+              value={ model.markdown_less}
+              onChange={this.handleCSSChange}/>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <div className="kbnTabs">
+          <div className={`kbnTabs__tab${selectedTab === 'markdown' && '-active' || ''}`}
+            onClick={e => this.switchTab('markdown')}>Markdown</div>
+          <div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
+            onClick={e => this.switchTab('data')}>Data</div>
+          <div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
+            onClick={e => this.switchTab('options')}>Panel Options</div>
+        </div>
+        {view}
+      </div>
+    );
+  }
+}
+
+MarkdownPanelConfig.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  visData: PropTypes.object,
+};
+
+export default MarkdownPanelConfig;
diff --git a/src/core_plugins/metrics/public/components/panel_config/metric.js b/src/core_plugins/metrics/public/components/panel_config/metric.js
new file mode 100644
index 0000000000000..d64a1e0c8acc6
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/panel_config/metric.js
@@ -0,0 +1,106 @@
+import React, { Component, PropTypes } from 'react';
+import SeriesEditor from '../series_editor';
+import IndexPattern from '../index_pattern';
+import Select from 'react-select';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+import DataFormatPicker from '../data_format_picker';
+import ColorRules from '../color_rules';
+import YesNo from '../yes_no';
+import uuid from 'node-uuid';
+
+class MetricPanelConfig extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { selectedTab: 'data' };
+  }
+
+  componentWillMount() {
+    const { model } = this.props;
+    if (!model.background_color_rules || (model.background_color_rules && model.background_color_rules.length === 0)) {
+      this.props.onChange({
+        background_color_rules: [{ id: uuid.v1() }]
+      });
+    }
+  }
+
+  switchTab(selectedTab) {
+    this.setState({ selectedTab });
+  }
+
+  render() {
+    const { selectedTab } = this.state;
+    const defaults = { filter: '' };
+    const model = { ...defaults, ...this.props.model };
+    const handleTextChange = createTextHandler(this.props.onChange);
+    const positionOptions = [
+      { label: 'Right', value: 'right' },
+      { label: 'Left', value: 'left' }
+    ];
+    let view;
+    if (selectedTab === 'data') {
+      view = (
+        <SeriesEditor
+          colorPicker={false}
+          fields={this.props.fields}
+          limit={2}
+          model={this.props.model}
+          name={this.props.name}
+          onChange={this.props.onChange} />
+      );
+    } else {
+      view = (
+        <div className="vis_editor__container">
+          <IndexPattern
+            fields={this.props.fields}
+            model={this.props.model}
+            onChange={this.props.onChange}/>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Panel Filter</div>
+            <input
+              className="vis_editor__input-grows"
+              type="text"
+              onChange={handleTextChange('filter')}
+              value={model.filter}/>
+            <div className="vis_editor__label">Ignore Global Filter</div>
+            <YesNo
+              value={model.ignore_global_filter}
+              name="ignore_global_filter"
+              onChange={this.props.onChange}/>
+          </div>
+          <div>
+            <div className="vis_editor__label">Color Rules</div>
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <ColorRules
+              model={model}
+              onChange={this.props.onChange}
+              name="background_color_rules"/>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <div className="kbnTabs">
+          <div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
+            onClick={e => this.switchTab('data')}>Data</div>
+          <div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
+            onClick={e => this.switchTab('options')}>Panel Options</div>
+        </div>
+        {view}
+      </div>
+    );
+  }
+
+}
+
+MetricPanelConfig.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  visData: PropTypes.object,
+};
+
+export default MetricPanelConfig;
diff --git a/src/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
new file mode 100644
index 0000000000000..f0efbbe96b9f7
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -0,0 +1,151 @@
+import React, { Component, PropTypes } from 'react';
+import SeriesEditor from '../series_editor';
+import AnnotationsEditor from '../annotations_editor';
+import IndexPattern from '../index_pattern';
+import Select from 'react-select';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+import DataFormatPicker from '../data_format_picker';
+import ColorPicker from '../color_picker';
+import YesNo from '../yes_no';
+
+class TimeseriesPanelConfig extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { selectedTab: 'data' };
+  }
+
+  switchTab(selectedTab) {
+    this.setState({ selectedTab });
+  }
+
+  render() {
+    const defaults = {
+      filter: '',
+      axis_max: '',
+      axis_min: '',
+      legend_position: 'right'
+    };
+    const model = { ...defaults, ...this.props.model };
+    const { selectedTab } = this.state;
+    const handleSelectChange = createSelectHandler(this.props.onChange);
+    const handleTextChange = createTextHandler(this.props.onChange);
+    const positionOptions = [
+      { label: 'Right', value: 'right' },
+      { label: 'Left', value: 'left' }
+    ];
+    const legendPositionOptions = [
+      { label: 'Right', value: 'right' },
+      { label: 'Left', value: 'left' },
+      { label: 'Bottom', value: 'bottom' }
+    ];
+    let view;
+    if (selectedTab === 'data') {
+      view = (
+        <SeriesEditor
+          fields={this.props.fields}
+          model={this.props.model}
+          name={this.props.name}
+          onChange={this.props.onChange} />
+      );
+    } else if (selectedTab === 'annotations') {
+      view = (
+        <AnnotationsEditor
+          fields={this.props.fields}
+          model={this.props.model}
+          name="annotations"
+          onChange={this.props.onChange} />
+      );
+    } else {
+      view = (
+        <div className="vis_editor__container">
+          <IndexPattern
+            fields={this.props.fields}
+            model={this.props.model}
+            onChange={this.props.onChange}/>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Axis Min</div>
+            <input
+              className="vis_editor__input-grows"
+              type="text"
+              onChange={handleTextChange('axis_min')}
+              value={model.axis_min}/>
+            <div className="vis_editor__label">Axis Max</div>
+            <input
+              className="vis_editor__input-grows"
+              type="text"
+              onChange={handleTextChange('axis_max')}
+              value={model.axis_max}/>
+            <div className="vis_editor__label">Axis Position</div>
+            <div className="vis_editor__row_item">
+              <Select
+                autosize={false}
+                clearable={false}
+                options={positionOptions}
+                value={model.axis_position}
+                onChange={handleSelectChange('axis_position')}/>
+            </div>
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Background Color</div>
+            <ColorPicker
+              onChange={this.props.onChange}
+              name="background_color"
+              value={model.background_color}/>
+            <div className="vis_editor__label">Show Legend</div>
+            <YesNo
+              value={model.show_legend}
+              name="show_legend"
+              onChange={this.props.onChange}/>
+            <div className="vis_editor__label">Legend Position</div>
+            <div className="vis_editor__row_item">
+              <Select
+                clearable={false}
+                options={legendPositionOptions}
+                value={model.legend_position}
+                onChange={handleSelectChange('legend_position')}/>
+            </div>
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Panel Filter</div>
+            <input
+              className="vis_editor__input-grows"
+              type="text"
+              onChange={handleTextChange('filter')}
+              value={model.filter}/>
+            <div className="vis_editor__label">Ignore Global Filter</div>
+            <YesNo
+              value={model.ignore_global_filter}
+              name="ignore_global_filter"
+              onChange={this.props.onChange}/>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <div className="kbnTabs">
+          <div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
+            onClick={e => this.switchTab('data')}>Data</div>
+          <div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
+            onClick={e => this.switchTab('options')}>Panel Options</div>
+          <div className={`kbnTabs__tab${selectedTab === 'annotations' && '-active' || ''}`}
+            onClick={e => this.switchTab('annotations')}>Annotations</div>
+        </div>
+        {view}
+      </div>
+    );
+  }
+
+
+}
+
+TimeseriesPanelConfig.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  visData: PropTypes.object,
+};
+
+export default TimeseriesPanelConfig;
diff --git a/src/core_plugins/metrics/public/components/panel_config/top_n.js b/src/core_plugins/metrics/public/components/panel_config/top_n.js
new file mode 100644
index 0000000000000..c28cbf6f2d379
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/panel_config/top_n.js
@@ -0,0 +1,129 @@
+import React, { Component, PropTypes } from 'react';
+import SeriesEditor from '../series_editor';
+import _ from 'lodash';
+import IndexPattern from '../index_pattern';
+import Select from 'react-select';
+import createSelectHandler from '../lib/create_select_handler';
+import createTextHandler from '../lib/create_text_handler';
+import DataFormatPicker from '../data_format_picker';
+import ColorRules from '../color_rules';
+import ColorPicker from '../color_picker';
+import uuid from 'node-uuid';
+import YesNo from '../yes_no';
+
+class TopNPanelConfig extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { selectedTab: 'data' };
+  }
+
+  componentWillMount() {
+    const { model } = this.props;
+    const parts = {};
+    if (!model.bar_color_rules || (model.bar_color_rules && model.bar_color_rules.length === 0)) {
+      parts.bar_color_rules = [{ id: uuid.v1() }];
+    }
+    if (model.series && model.series.length > 0) {
+      parts.series = [_.assign({}, model.series[0])];
+    }
+    this.props.onChange(parts);
+  }
+
+  switchTab(selectedTab) {
+    this.setState({ selectedTab });
+  }
+
+  render() {
+    const { selectedTab } = this.state;
+    const { fields } = this.props;
+    const defaults = { drilldown_url: '', filter: '' };
+    const model = { ...defaults, ...this.props.model };
+    const handleSelectChange = createSelectHandler(this.props.onChange);
+    const handleTextChange = createTextHandler(this.props.onChange);
+    const positionOptions = [
+      { label: 'Right', value: 'right' },
+      { label: 'Left', value: 'left' }
+    ];
+    let view;
+    if (selectedTab === 'data') {
+      view = (
+        <SeriesEditor
+          colorPicker={false}
+          fields={this.props.fields}
+          limit={1}
+          model={this.props.model}
+          name={this.props.name}
+          onChange={this.props.onChange} />
+      );
+    } else {
+      view = (
+        <div className="vis_editor__container">
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Item Url (This supports mustache templating.
+              <code>{'{{key}}'}</code> is set to the term)</div>
+            <input
+              className="vis_editor__input-grows"
+              onChange={handleTextChange('drilldown_url')}
+              value={model.drilldown_url}/>
+          </div>
+          <IndexPattern
+            fields={this.props.fields}
+            model={this.props.model}
+            onChange={this.props.onChange}/>
+          <div className="vis_editor__vis_config-row">
+            <div className="vis_editor__label">Background Color</div>
+            <ColorPicker
+              onChange={this.props.onChange}
+              name="background_color"
+              value={model.background_color}/>
+            <div className="vis_editor__label">Panel Filter</div>
+            <input
+              className="vis_editor__input-grows"
+              type="text"
+              onChange={handleTextChange('filter')}
+              value={model.filter}/>
+            <div className="vis_editor__label">Ignore Global Filter</div>
+            <YesNo
+              value={model.ignore_global_filter}
+              name="ignore_global_filter"
+              onChange={this.props.onChange}/>
+          </div>
+          <div>
+            <div className="vis_editor__label">Color Rules</div>
+          </div>
+          <div className="vis_editor__vis_config-row">
+            <ColorRules
+              model={model}
+              primaryVarName="bar_color"
+              primaryName="bar"
+              hideSecondary={true}
+              onChange={this.props.onChange}
+              name="bar_color_rules"/>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <div className="kbnTabs">
+          <div className={`kbnTabs__tab${selectedTab === 'data' && '-active' || ''}`}
+            onClick={e => this.switchTab('data')}>Data</div>
+          <div className={`kbnTabs__tab${selectedTab === 'options' && '-active' || ''}`}
+            onClick={e => this.switchTab('options')}>Panel Options</div>
+        </div>
+        {view}
+      </div>
+    );
+  }
+
+}
+
+TopNPanelConfig.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  visData: PropTypes.object,
+};
+
+export default TopNPanelConfig;
diff --git a/src/core_plugins/metrics/public/components/series.js b/src/core_plugins/metrics/public/components/series.js
new file mode 100644
index 0000000000000..6111b2560a525
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/series.js
@@ -0,0 +1,108 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+
+import timeseries from './vis_types/timeseries/series';
+import metric from './vis_types/metric/series';
+import topN from './vis_types/top_n/series';
+import gauge from './vis_types/gauge/series';
+import markdown from './vis_types/markdown/series';
+import { sortable } from 'react-anything-sortable';
+
+const lookup = {
+  top_n: topN,
+  metric,
+  timeseries,
+  gauge,
+  markdown
+};
+
+class Series extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: true,
+      selectedTab: 'metrics'
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.switchTab = this.switchTab.bind(this);
+    this.toggleVisible = this.toggleVisible.bind(this);
+  }
+
+  switchTab(selectedTab) {
+    this.setState({ selectedTab });
+  }
+
+  handleChange(part) {
+    if (this.props.onChange) {
+      const { model } = this.props;
+      const doc = _.assign({}, model, part);
+      this.props.onChange(doc);
+    }
+  }
+
+  toggleVisible(e) {
+    e.preventDefault();
+    this.setState({ visible: !this.state.visible });
+  }
+
+  render() {
+    const { panel } = this.props;
+    const Component = lookup[panel.type];
+    if (Component) {
+      const params = {
+        className: this.props.className,
+        colorPicker: this.props.colorPicker,
+        disableAdd: this.props.disableAdd,
+        disableDelete: this.props.disableDelete,
+        fields: this.props.fields,
+        name: this.props.name,
+        onAdd: this.props.onAdd,
+        onChange: this.handleChange,
+        onClone: this.props.onClone,
+        onDelete: this.props.onDelete,
+        onMouseDown: this.props.onMouseDown,
+        onTouchStart: this.props.onTouchStart,
+        onSortableItemMount: this.props.onSortableItemMount,
+        onSortableItemReadyToMove: this.props.onSortableItemReadyToMove,
+        model: this.props.model,
+        panel: this.props.panel,
+        selectedTab: this.state.selectedTab,
+        sortData: this.props.sortData,
+        style: this.props.style,
+        switchTab: this.switchTab,
+        toggleVisible: this.toggleVisible,
+        visible: this.state.visible
+      };
+      return (<Component {...params}/>);
+    }
+    return (<div>Missing Series component for panel type: {panel.type}</div>);
+  }
+
+}
+
+Series.defaultProps = {
+  name: 'metrics'
+};
+
+Series.propTypes = {
+  className: PropTypes.string,
+  colorPicker: PropTypes.bool,
+  disableAdd: PropTypes.bool,
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  name: PropTypes.string,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onClone: PropTypes.func,
+  onDelete: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onSortableItemMount: PropTypes.func,
+  onSortableItemReadyToMove: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  model: PropTypes.object,
+  panel: PropTypes.object,
+  sortData: PropTypes.string,
+};
+
+export default sortable(Series);
diff --git a/src/core_plugins/metrics/public/components/series_config.js b/src/core_plugins/metrics/public/components/series_config.js
new file mode 100644
index 0000000000000..319fb7c77139c
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/series_config.js
@@ -0,0 +1,64 @@
+import React, { Component, PropTypes } from 'react';
+import Select from 'react-select';
+import DataFormatPicker from './data_format_picker';
+import createSelectHandler from './lib/create_select_handler';
+import createTextHandler from './lib/create_text_handler';
+import YesNo from './yes_no';
+import IndexPattern from './index_pattern';
+
+class SeriesConfig extends Component {
+  render() {
+    const { fields } = this.props;
+    const defaults = { offset_time: '', value_template: '' };
+    const model = { ...defaults, ...this.props.model };
+    const handleSelectChange = createSelectHandler(this.props.onChange);
+    const handleTextChange = createTextHandler(this.props.onChange);
+
+    return (
+      <div>
+        <div className="vis_editor__series_config-container">
+          <div className="vis_editor__series_config-row">
+            <DataFormatPicker
+              onChange={handleSelectChange('formatter')}
+              value={model.formatter}/>
+            <div className="vis_editor__label">Template (eg.<code>{'{{value}}/s'}</code>)</div>
+            <input
+              className="vis_editor__input-grows"
+              onChange={handleTextChange('value_template')}
+              value={model.value_template}/>
+            <div className="vis_editor__label">Offset series time by (1m, 1h, 1w, 1d)</div>
+            <input
+              className="vis_editor__input-grows"
+              type="text"
+              onChange={handleTextChange('offset_time')}
+              value={model.offset_time}/>
+          </div>
+          <div className="vis_editor__series_config-row">
+            <div className="vis_editor__label">Override Index Pattern</div>
+            <YesNo
+              value={model.override_index_pattern}
+              name="override_index_pattern"
+              onChange={this.props.onChange}/>
+            <IndexPattern
+              onChange={this.props.onChange}
+              model={this.props.model}
+              fields={this.props.fields}
+              prefix="series_"
+              className="vis_editor__row_item vis_editor__row"
+              disabled={!model.override_index_pattern} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+SeriesConfig.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+export default SeriesConfig;
+
diff --git a/src/core_plugins/metrics/public/components/series_editor.js b/src/core_plugins/metrics/public/components/series_editor.js
new file mode 100644
index 0000000000000..db603c360f238
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/series_editor.js
@@ -0,0 +1,83 @@
+import React, { Component, PropTypes } from 'react';
+import reIdSeries from './lib/re_id_series';
+import _ from 'lodash';
+import Series from './series';
+import {
+  handleAdd,
+  handleDelete,
+  handleChange
+} from './lib/collection_actions';
+import newSeriesFn from './lib/new_series_fn';
+import Sortable from 'react-anything-sortable';
+
+class SeriesEditor extends Component {
+
+  constructor(props) {
+    super(props);
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  handleClone(series) {
+    const newSeries = reIdSeries(series);
+    handleAdd.call(null, this.props, () => newSeries);
+  }
+
+  renderRow(row, index) {
+    const { props } = this;
+    const { fields, model, name, limit, colorPicker } = props;
+    return (
+      <Series
+        colorPicker={colorPicker}
+        disableAdd={model[name].length >= limit}
+        disableDelete={model[name].length < 2}
+        fields={fields}
+        key={row.id}
+        onAdd={handleAdd.bind(null, props, newSeriesFn)}
+        onChange={handleChange.bind(null, props)}
+        onClone={() => this.handleClone(row)}
+        onDelete={handleDelete.bind(null, props, row)}
+        model={row}
+        panel={model}
+        sortData={row.id} />
+    );
+  }
+
+  render() {
+    const { limit, model, name } = this.props;
+    const series = model[name]
+      .filter((val, index) => index < (limit || Infinity))
+      .map(this.renderRow);
+    const handleSort = (data) => {
+      const series = data.map(id => model[name].find(s => s.id === id));
+      this.props.onChange({ series });
+    };
+    return (
+      <div className="vis_editor__series_editor-container">
+        <Sortable
+          dynamic={true}
+          direction="vertical"
+          onSort={handleSort}
+          sortHandle="vis_editor__sort">
+          { series }
+        </Sortable>
+      </div>
+    );
+  }
+
+}
+SeriesEditor.defaultProps = {
+  name: 'series',
+  limit: Infinity,
+  colorPicker: true
+};
+
+SeriesEditor.propTypes = {
+  colorPicker: PropTypes.bool,
+  fields: PropTypes.object,
+  limit: PropTypes.number,
+  model: PropTypes.object,
+  name: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+export default SeriesEditor;
diff --git a/src/core_plugins/metrics/public/components/split.js b/src/core_plugins/metrics/public/components/split.js
new file mode 100644
index 0000000000000..023e8005e0337
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/split.js
@@ -0,0 +1,73 @@
+import React, { Component, PropTypes } from 'react';
+import Select from 'react-select';
+import _ from 'lodash';
+import FieldSelect from './aggs/field_select';
+import MetricSelect from './aggs/metric_select';
+import calculateLabel from './lib/calculate_label';
+import createTextHandler from './lib/create_text_handler';
+import createSelectHandler from './lib/create_select_handler';
+import uuid from 'node-uuid';
+
+import SplitByTerms from './splits/terms';
+import SplitByFilter from './splits/filter';
+import SplitByFilters from './splits/filters';
+import SplitByEverything from './splits/everything';
+
+class Split extends Component {
+
+  componentWillReceiveProps(nextProps) {
+    const { model } = nextProps;
+    if (model.split_mode === 'filters' && !model.split_filters) {
+      this.props.onChange({
+        split_filters: [
+          { color: model.color, id: uuid.v1() }
+        ]
+      });
+    }
+  }
+
+  render() {
+    const { model, panel } = this.props;
+    const indexPattern = model.override_index_pattern &&
+      model.series_index_pattern ||
+      panel.index_pattern;
+    if (model.split_mode === 'filter') {
+      return (
+        <SplitByFilter
+          model={model}
+          onChange={this.props.onChange} />
+      );
+    }
+    if (model.split_mode === 'filters') {
+      return (
+        <SplitByFilters
+          model={model}
+          onChange={this.props.onChange} />
+      );
+    }
+    if (model.split_mode === 'terms') {
+      return (
+        <SplitByTerms
+          model={model}
+          indexPattern={indexPattern}
+          fields={this.props.fields}
+          onChange={this.props.onChange} />
+      );
+    }
+    return (
+      <SplitByEverything
+        model={model}
+        onChange={this.props.onChange} />
+    );
+  }
+
+}
+
+Split.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  panel: PropTypes.object
+};
+
+export default Split;
diff --git a/src/core_plugins/metrics/public/components/splits/everything.js b/src/core_plugins/metrics/public/components/splits/everything.js
new file mode 100644
index 0000000000000..ae4ba3aa7be1b
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/splits/everything.js
@@ -0,0 +1,28 @@
+import createTextHandler from '../lib/create_text_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import GroupBySelect from './group_by_select';
+import React, { Component, PropTypes } from 'react';
+
+function SplitByEverything(props) {
+  const { onChange, model } = props;
+  const handleSelectChange = createSelectHandler(onChange);
+  return (
+    <div className="vis_editor__split-container">
+      <div className="vis_editor__label">Group By</div>
+      <div className="vis_editor__split-selects">
+        <GroupBySelect
+          value={model.split_mode}
+          onChange={handleSelectChange('split_mode')} />
+      </div>
+    </div>
+  );
+
+}
+
+SplitByEverything.propTypes = {
+  model: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+export default SplitByEverything;
+
diff --git a/src/core_plugins/metrics/public/components/splits/filter.js b/src/core_plugins/metrics/public/components/splits/filter.js
new file mode 100644
index 0000000000000..b39950f17e46a
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/splits/filter.js
@@ -0,0 +1,38 @@
+import createTextHandler from '../lib/create_text_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import GroupBySelect from './group_by_select';
+import React, { Component, PropTypes } from 'react';
+
+class SplitByFilter extends Component {
+
+  render() {
+    const { onChange } = this.props;
+    const defaults = { filter: '' };
+    const model = { ...defaults, ...this.props.model };
+    const handleTextChange = createTextHandler(onChange);
+    const handleSelectChange = createSelectHandler(onChange);
+    return (
+      <div className="vis_editor__split-container">
+        <div className="vis_editor__label">Group By</div>
+        <div className="vis_editor__split-selects">
+          <GroupBySelect
+            value={model.split_mode}
+            onChange={handleSelectChange('split_mode')} />
+        </div>
+        <div className="vis_editor__label">Query String</div>
+        <input
+          className="vis_editor__split-filter"
+          value={model.filter}
+          onChange={handleTextChange('filter')} />
+      </div>
+    );
+  }
+
+}
+
+SplitByFilter.propTypes = {
+  model: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+export default SplitByFilter;
diff --git a/src/core_plugins/metrics/public/components/splits/filter_items.js b/src/core_plugins/metrics/public/components/splits/filter_items.js
new file mode 100644
index 0000000000000..0740181c8e7a3
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/splits/filter_items.js
@@ -0,0 +1,89 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import collectionActions from '../lib/collection_actions';
+import AddDeleteButtons from '../add_delete_buttons';
+import ColorPicker from '../color_picker';
+import uuid from 'node-uuid';
+class FilterItems extends Component {
+
+  constructor(props) {
+    super(props);
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  handleChange(item, name) {
+    return (e) => {
+      const handleChange = collectionActions.handleChange.bind(null, this.props);
+      handleChange(_.assign({}, item, {
+        [name]: _.get(e, 'value', _.get(e, 'target.value'))
+      }));
+    };
+  }
+
+  renderRow(row, i, items) {
+    const defaults = { filter: '', label: '' };
+    const model = { ...defaults, ...row };
+    const handleChange = (part) => {
+      const fn = collectionActions.handleChange.bind(null, this.props);
+      fn(_.assign({}, model, part));
+    };
+    const newFilter = () => ({ color: this.props.model.color, id: uuid.v1() });
+    const handleAdd = collectionActions.handleAdd
+      .bind(null, this.props, newFilter);
+    const handleDelete = collectionActions.handleDelete
+      .bind(null, this.props, model);
+    return  (
+      <div className="vis_editor__split-filter-row" key={model.id}>
+        <div className="vis_editor__split-filter-color">
+          <ColorPicker
+            disableTrash={true}
+            onChange={handleChange}
+            name="color"
+            value={model.color}/>
+        </div>
+        <div className="vis_editor__split-filter-item">
+          <input
+            placeholder="Filter"
+            className="vis_editor__input-grows-100"
+            type="text"
+            onChange={this.handleChange(model, 'filter')}
+            value={model.filter}/>
+        </div>
+        <div className="vis_editor__split-filter-item">
+          <input
+            placeholder="Label"
+            className="vis_editor__input-grows-100"
+            type="text"
+            onChange={this.handleChange(model, 'label')}
+            value={model.label}/>
+        </div>
+        <div className="vis_editor__split-filter-control">
+          <AddDeleteButtons
+            onAdd={handleAdd}
+            onDelete={handleDelete}
+            disableDelete={items.length < 2}/>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { model, name } = this.props;
+    if (!model[name]) return (<div/>);
+    const rows = model[name].map(this.renderRow);
+    return (
+      <div className="vis_editor__split-filters">
+        { rows }
+      </div>
+    );
+  }
+
+}
+
+FilterItems.propTypes = {
+  name: PropTypes.string,
+  model: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+export default FilterItems;
diff --git a/src/core_plugins/metrics/public/components/splits/filters.js b/src/core_plugins/metrics/public/components/splits/filters.js
new file mode 100644
index 0000000000000..c25f907220471
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/splits/filters.js
@@ -0,0 +1,35 @@
+import createSelectHandler from '../lib/create_select_handler';
+import GroupBySelect from './group_by_select';
+import FilterItems from './filter_items';
+import React, { Component, PropTypes } from 'react';
+function SplitByFilters(props) {
+  const { onChange, model } = props;
+  const handleSelectChange = createSelectHandler(onChange);
+  return(
+    <div className="vis_editor__item">
+      <div className="vis_editor__split-container">
+        <div className="vis_editor__label">Group By</div>
+        <div className="vis_editor__split-selects">
+          <GroupBySelect
+            value={model.split_mode}
+            onChange={handleSelectChange('split_mode')} />
+        </div>
+      </div>
+      <div className="vis_editor__split-container">
+        <div className="vis_editor__row vis_editor__item">
+          <FilterItems
+            name="split_filters"
+            model={model}
+            onChange={onChange} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+SplitByFilters.propTypes = {
+  model: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+export default SplitByFilters;
diff --git a/src/core_plugins/metrics/public/components/splits/group_by_select.js b/src/core_plugins/metrics/public/components/splits/group_by_select.js
new file mode 100644
index 0000000000000..653698885c0ea
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/splits/group_by_select.js
@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+import Select from 'react-select';
+function GroupBySelect(props) {
+  const modeOptions = [
+    { label: 'Everything', value: 'everything' },
+    { label: 'Filter', value: 'filter' },
+    { label: 'Filters', value: 'filters' },
+    { label: 'Terms', value: 'terms' }
+  ];
+  return (
+    <Select
+      clearable={false}
+      value={ props.value || 'everything' }
+      onChange={props.onChange}
+      options={ modeOptions }/>
+  );
+
+}
+
+GroupBySelect.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string
+};
+
+export default GroupBySelect;
diff --git a/src/core_plugins/metrics/public/components/splits/terms.js b/src/core_plugins/metrics/public/components/splits/terms.js
new file mode 100644
index 0000000000000..aad1e31a14c11
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/splits/terms.js
@@ -0,0 +1,65 @@
+import React, { Component, PropTypes } from 'react';
+import GroupBySelect from './group_by_select';
+import createTextHandler from '../lib/create_text_handler';
+import createSelectHandler from '../lib/create_select_handler';
+import FieldSelect from '../aggs/field_select';
+import MetricSelect from '../aggs/metric_select';
+
+class SplitByTerms extends Component {
+
+  render() {
+    const handleTextChange = createTextHandler(this.props.onChange);
+    const handleSelectChange = createSelectHandler(this.props.onChange);
+    const { indexPattern } = this.props;
+    const defaults = { terms_size: 10, terms_order_by: '_count' };
+    const model = { ...defaults, ...this.props.model };
+    const { metrics } = model;
+    const defaultCount = { value: '_count', label: 'Doc Count (default)' };
+
+    return (
+      <div className="vis_editor__split-container">
+        <div className="vis_editor__label">Group By</div>
+        <div className="vis_editor__split-selects">
+          <GroupBySelect
+            value={model.split_mode}
+            onChange={handleSelectChange('split_mode')} />
+        </div>
+        <div className="vis_editor__label">By</div>
+        <div className="vis_editor__item">
+          <FieldSelect
+            indexPattern={indexPattern}
+            onChange={handleSelectChange('terms_field')}
+            value={model.terms_field}
+            fields={this.props.fields} />
+        </div>
+        <div className="vis_editor__label">Top</div>
+        <input
+          placeholder="Size..."
+          type="number"
+          value={model.terms_size}
+          className="vis_editor__split-term_count"
+          onChange={handleTextChange('terms_size')} />
+        <div className="vis_editor__label">Order By</div>
+        <div className="vis_editor__split-aggs">
+          <MetricSelect
+            metrics={metrics}
+            clearable={false}
+            additionalOptions={[defaultCount]}
+            onChange={handleSelectChange('terms_order_by')}
+            restrict="basic"
+            value={model.terms_order_by}/>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+SplitByTerms.propTypes = {
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  indexPattern: PropTypes.string,
+  fields: PropTypes.object
+};
+
+export default SplitByTerms;
diff --git a/src/core_plugins/metrics/public/components/tooltip.js b/src/core_plugins/metrics/public/components/tooltip.js
new file mode 100644
index 0000000000000..09c298c6aa924
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/tooltip.js
@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+import { Tooltip } from 'pui-react-tooltip';
+import { OverlayTrigger } from 'pui-react-overlay-trigger';
+
+function TooltipComponent(props) {
+  const tooltip = (
+    <Tooltip>{ props.text }</Tooltip>
+  );
+  return (
+    <OverlayTrigger placement={props.placement} overlay={tooltip}>
+      { props.children}
+    </OverlayTrigger>
+  );
+}
+
+TooltipComponent.defaultProps = {
+  placement: 'top',
+  text: 'Tip!'
+};
+
+TooltipComponent.propTypes = {
+  placement: PropTypes.string,
+  text: PropTypes.node
+};
+
+export default TooltipComponent;
diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
new file mode 100644
index 0000000000000..8b4ccd97b4fe3
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -0,0 +1,67 @@
+import React, { Component, PropTypes } from 'react';
+import VisEditorVisualization from './vis_editor_visualization';
+import Visualization from './visualization';
+import VisPicker from './vis_picker';
+import PanelConfig from './panel_config';
+
+class VisEditor extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { model: props.model };
+  }
+
+  render() {
+    const handleChange = (part) => {
+      const nextModel = { ...this.state.model, ...part };
+      this.setState({ model: nextModel });
+      if (this.props.onChange) {
+        this.props.onChange(nextModel);
+      }
+    };
+
+    if (this.props.embedded) {
+      return (
+        <Visualization
+          fields={this.props.fields}
+          model={this.props.model}
+          visData={this.props.visData} />
+      );
+    }
+
+
+    const { model } = this.state;
+
+    if (model) {
+      return (
+        <div className="vis_editor">
+          <VisPicker
+            model={model}
+            onChange={handleChange} />
+          <VisEditorVisualization
+            model={model}
+            visData={this.props.visData}
+            onBrush={this.props.onBrush}
+            onChange={handleChange} />
+          <PanelConfig
+            fields={this.props.fields}
+            model={model}
+            visData={this.props.visData}
+            onChange={handleChange} />
+        </div>
+      );
+    }
+    return null;
+  }
+
+}
+
+VisEditor.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onBrush: PropTypes.func,
+  onChange: PropTypes.func,
+  visData: PropTypes.object
+};
+
+export default VisEditor;
diff --git a/src/core_plugins/metrics/public/components/vis_editor_visualization.js b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
new file mode 100644
index 0000000000000..29168b1c42d71
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
@@ -0,0 +1,78 @@
+import React, { Component, PropTypes } from 'react';
+import Visualization from './visualization';
+
+class VisEditorVisualization extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      height: 250,
+      dragging: false
+    };
+
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+
+  handleMouseDown(e) {
+    this.setState({ dragging: true });
+  }
+
+  handleMouseUp(e) {
+    this.setState({ dragging: false });
+  }
+
+  componentWillMount() {
+    this.handleMouseMove = (event) => {
+      if (this.state.dragging) {
+        const height = this.state.height + event.movementY;
+        if (height > 250) {
+          this.setState({ height });
+        }
+      }
+    };
+    window.addEventListener('mousemove', this.handleMouseMove);
+    window.addEventListener('mouseup', this.handleMouseUp);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mousemove', this.handleMouseMove);
+    window.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  render() {
+    const style = { height: this.state.height };
+    if (this.state.dragging) {
+      style.userSelect = 'none';
+    }
+    const visBackgroundColor = '#FFF';
+    return (
+      <div>
+        <div style={style} className="vis_editor__visualization">
+          <Visualization
+            backgroundColor={visBackgroundColor}
+            className="dashboard__visualization"
+            model={this.props.model}
+            onBrush={this.props.onBrush}
+            onChange={this.handleChange}
+            visData={this.props.visData} />
+        </div>
+        <div
+          className="vis_editor__visualization-draghandle"
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}>
+          <i className="fa fa-ellipsis-h"></i>
+        </div>
+      </div>
+    );
+  }
+}
+
+VisEditorVisualization.propTypes = {
+  model: PropTypes.object,
+  onBrush: PropTypes.func,
+  onChange: PropTypes.func,
+  visData: PropTypes.object
+};
+
+export default VisEditorVisualization;
diff --git a/src/core_plugins/metrics/public/components/vis_picker.js b/src/core_plugins/metrics/public/components/vis_picker.js
new file mode 100644
index 0000000000000..70672b6e4c383
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_picker.js
@@ -0,0 +1,68 @@
+import React, { Component, PropTypes } from 'react';
+
+function VisPickerItem(props) {
+  const { label, icon, type } = props;
+  let itemClassName = 'vis_editor__vis_picker-item';
+  let iconClassName = 'vis_editor__vis_picker-icon';
+  let labelClassName = 'vis_editor__vis_picker-label';
+  if (props.selected) {
+    itemClassName += ' selected';
+    iconClassName += ' selected';
+    labelClassName += ' selected';
+  }
+  return (
+    <div className={itemClassName} onClick={e => props.onClick(type)}>
+      <div className={iconClassName}>
+        <i className={`fa ${icon}`}></i>
+      </div>
+      <div className={labelClassName}>
+        { label }
+      </div>
+    </div>
+  );
+}
+
+VisPickerItem.propTypes = {
+  icon: PropTypes.string,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  type: PropTypes.string,
+  selected: PropTypes.bool
+};
+
+function VisPicker(props) {
+  const handleChange = (type) => {
+    props.onChange({ type });
+  };
+
+  const { model } = props;
+  const icons = [
+    { type: 'timeseries', icon: 'fa-line-chart', label: 'Time Series' },
+    { type: 'metric', icon: 'fa-superscript', label: 'Metric' },
+    { type: 'top_n', icon: 'fa-bar-chart fa-rotate-90', label: 'Top N' },
+    { type: 'gauge', icon: 'fa-circle-o-notch', label: 'Gauge' },
+    { type: 'markdown', icon: 'fa-paragraph', label: 'Markdown' }
+  ].map((item, i, items) => {
+    return (
+      <VisPickerItem
+        key={item.type}
+        onClick={handleChange}
+        selected={ item.type === model.type }
+        {...item}/>
+    );
+  });
+
+  return (
+    <div className="vis_editor__vis_picker-container">
+      { icons }
+    </div>
+  );
+
+}
+
+VisPicker.propTypes = {
+  model: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+export default VisPicker;
diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
new file mode 100644
index 0000000000000..35eaecba46154
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
@@ -0,0 +1,167 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import ColorPicker from '../../color_picker';
+import AddDeleteButtons from '../../add_delete_buttons';
+import SeriesConfig from '../../series_config';
+import Sortable from 'react-anything-sortable';
+import Split from '../../split';
+import Tooltip from '../../tooltip';
+import createAggRowRender from '../../lib/create_agg_row_render';
+import createTextHandler from '../../lib/create_text_handler';
+
+function GaugeSeries(props) {
+  const {
+    panel,
+    fields,
+    onAdd,
+    onChange,
+    onDelete,
+    disableDelete,
+    disableAdd,
+    selectedTab,
+    visible
+  } = props;
+
+  const defaults = { label: '' };
+  const model = { ...defaults, ...props.model };
+
+  const handleChange = createTextHandler(onChange);
+  const aggs = model.metrics.map(createAggRowRender(props));
+
+  let caretClassName = 'fa fa-caret-down';
+  if (!visible) caretClassName = 'fa fa-caret-right';
+
+  let body = null;
+  if (visible) {
+    let metricsClassName = 'kbnTabs__tab';
+    let optionsClassname = 'kbnTabs__tab';
+    if (selectedTab === 'metrics') metricsClassName += '-active';
+    if (selectedTab === 'options') optionsClassname += '-active';
+    let seriesBody;
+    if (selectedTab === 'metrics') {
+      const handleSort = (data) => {
+        const metrics = data.map(id => model.metrics.find(m => m.id === id));
+        props.onChange({ metrics });
+      };
+      seriesBody = (
+        <div>
+          <Sortable
+            style={{ cursor: 'default' }}
+            dynamic={true}
+            direction="vertical"
+            onSort={handleSort}
+            sortHandle="vis_editor__agg_sort">
+            { aggs }
+          </Sortable>
+          <div className="vis_editor__series_row">
+            <div className="vis_editor__series_row-item">
+              <Split
+                onChange={props.onChange}
+                fields={fields}
+                panel={panel}
+                model={model}/>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      seriesBody = (
+        <SeriesConfig
+          fields={props.fields}
+          model={props.model}
+          onChange={props.onChange} />
+      );
+    }
+    body = (
+      <div className="vis_editor__series-row">
+        <div className="kbnTabs sm">
+          <div className={metricsClassName}
+            onClick={e => props.switchTab('metrics')}>Metrics</div>
+          <div className={optionsClassname}
+            onClick={e => props.switchTab('options')}>Options</div>
+        </div>
+        {seriesBody}
+      </div>
+    );
+  }
+
+  let colorPicker;
+  if (props.colorPicker) {
+    colorPicker = (
+      <ColorPicker
+        disableTrash={true}
+        onChange={props.onChange}
+        name="color"
+        value={model.color}/>
+    );
+  }
+
+  let dragHandle;
+  if (!props.disableDelete) {
+    dragHandle = (
+      <Tooltip text="Sort">
+        <div className="vis_editor__sort thor__button-outlined-default sm">
+          <i className="fa fa-sort"></i>
+        </div>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      className={`${props.className} vis_editor__series`}
+      style={props.style}
+      onMouseDown={props.onMouseDown}
+      onTouchStart={props.onTouchStart}>
+      <div className="vis_editor__container">
+        <div className="vis_editor__series-details">
+          <div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
+          { colorPicker }
+          <div className="vis_editor__row vis_editor__row_item">
+            <input
+              className="vis_editor__input-grows"
+              onChange={handleChange('label')}
+              placeholder='Label'
+              value={model.label}/>
+          </div>
+          { dragHandle }
+          <AddDeleteButtons
+            onDelete={onDelete}
+            onClone={props.onClone}
+            onAdd={onAdd}
+            disableDelete={disableDelete}
+            disableAdd={disableAdd}/>
+        </div>
+      </div>
+      { body }
+    </div>
+  );
+
+}
+
+GaugeSeries.propTypes = {
+  className: PropTypes.string,
+  colorPicker: PropTypes.bool,
+  disableAdd: PropTypes.bool,
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  name: PropTypes.string,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onClone: PropTypes.func,
+  onDelete: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onSortableItemMount: PropTypes.func,
+  onSortableItemReadyToMove: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  model: PropTypes.object,
+  panel: PropTypes.object,
+  selectedTab: PropTypes.string,
+  sortData: PropTypes.string,
+  style: PropTypes.object,
+  switchTab: PropTypes.func,
+  toggleVisible: PropTypes.func,
+  visible: PropTypes.bool
+};
+
+export default GaugeSeries;
diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js b/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
new file mode 100644
index 0000000000000..c4d85b6d1522f
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
@@ -0,0 +1,78 @@
+import React, { PropTypes } from 'react';
+import tickFormatter from '../../lib/tick_formatter';
+import _ from 'lodash';
+import { Gauge, getLastValue } from 'plugins/metrics/visualizations';
+import color from 'color';
+
+function getColors(props) {
+  const { model, visData } = props;
+  const series = _.get(visData, `${model.id}.series`, []);
+  let text;
+  let gauge;
+  if (model.gauge_color_rules) {
+    model.gauge_color_rules.forEach((rule) => {
+      if (rule.opperator && rule.value != null) {
+        const value = series[0] && getLastValue(series[0].data) || 0;
+        if (_[rule.opperator](value, rule.value)) {
+          gauge = rule.gauge;
+          text = rule.text;
+        }
+      }
+    });
+  }
+  return { text, gauge };
+}
+
+function GaugeVisualization(props) {
+  const { backgroundColor, model, visData } = props;
+  const colors = getColors(props);
+  const series = _.get(visData, `${model.id}.series`, [])
+    .map((row, i) => {
+      const seriesDef = model.series.find(s => _.includes(row.id, s.id));
+      const newProps = {};
+      if (seriesDef) {
+        newProps.formatter = tickFormatter(seriesDef.formatter, seriesDef.value_template);
+      }
+      if (i === 0 && colors.gauge) newProps.color = colors.gauge;
+      return _.assign({}, row, newProps);
+    });
+  const params = {
+    metric: series[0],
+    type: model.gauge_style || 'half',
+    reversed: props.reversed
+  };
+
+  if (colors.text) {
+    params.valueColor = colors.text;
+  }
+
+  if (model.gauge_width) params.gaugeLine = model.gauge_width;
+  if (model.gauge_inner_color) params.innerColor = model.gauge_inner_color;
+  if (model.gauge_inner_width) params.innerLine = model.gauge_inner_width;
+  if (model.gauge_max != null) params.max = model.gauge_max;
+
+  const panelBackgroundColor = model.background_color || backgroundColor;
+
+  if (panelBackgroundColor && panelBackgroundColor !== 'inherit') {
+    params.reversed = color(panelBackgroundColor).luminosity() < 0.45;
+  }
+  const style = { backgroundColor: panelBackgroundColor };
+
+  return (
+    <div className="dashboard__visualization" style={style}>
+      <Gauge {...params} />
+    </div>
+  );
+}
+
+GaugeVisualization.propTypes = {
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  model: PropTypes.object,
+  onBrush: PropTypes.func,
+  onChange: PropTypes.func,
+  reversed: PropTypes.bool,
+  visData: PropTypes.object
+};
+
+export default GaugeVisualization;
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
new file mode 100644
index 0000000000000..ffd80f5fd54af
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
@@ -0,0 +1,149 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import ColorPicker from '../../color_picker';
+import AddDeleteButtons from '../../add_delete_buttons';
+import SeriesConfig from '../../series_config';
+import Sortable from 'react-anything-sortable';
+import Tooltip from '../../tooltip';
+import Split from '../../split';
+import calculateLabel from '../../lib/calculate_label';
+import createAggRowRender from '../../lib/create_agg_row_render';
+import createTextHandler from '../../lib/create_text_handler';
+
+function MarkdownSeries(props) {
+  const {
+    panel,
+    fields,
+    onAdd,
+    onChange,
+    onDelete,
+    disableDelete,
+    disableAdd,
+    selectedTab,
+    visible
+  } = props;
+
+  const defaults = { label: '', var_name: '' };
+  const model = { ...defaults, ...props.model };
+
+  const handleChange = createTextHandler(onChange);
+  const aggs = model.metrics.map(createAggRowRender(props));
+
+  let caretClassName = 'fa fa-caret-down';
+  if (!visible) caretClassName = 'fa fa-caret-right';
+
+  let body = null;
+  if (visible) {
+    let metricsClassName = 'kbnTabs__tab';
+    let optionsClassname = 'kbnTabs__tab';
+    if (selectedTab === 'metrics') metricsClassName += '-active';
+    if (selectedTab === 'options') optionsClassname += '-active';
+    let seriesBody;
+    if (selectedTab === 'metrics') {
+      const handleSort = (data) => {
+        const metrics = data.map(id => model.metrics.find(m => m.id === id));
+        props.onChange({ metrics });
+      };
+      seriesBody = (
+        <div>
+          <Sortable
+            style={{ cursor: 'default' }}
+            dynamic={true}
+            direction="vertical"
+            onSort={handleSort}
+            sortHandle="vis_editor__agg_sort">
+            { aggs }
+          </Sortable>
+          <div className="vis_editor__series_row">
+            <div className="vis_editor__series_row-item">
+              <Split
+                onChange={props.onChange}
+                fields={fields}
+                panel={panel}
+                model={model}/>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      seriesBody = (
+        <SeriesConfig
+          fields={props.fields}
+          model={props.model}
+          onChange={props.onChange} />
+      );
+    }
+    body = (
+      <div className="vis_editor__series-row">
+        <div className="kbnTabs sm">
+          <div className={metricsClassName}
+            onClick={e => props.switchTab('metrics')}>Metrics</div>
+          <div className={optionsClassname}
+            onClick={e => props.switchTab('options')}>Options</div>
+        </div>
+        {seriesBody}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`${props.className} vis_editor__series`}
+      style={props.style}
+      onMouseDown={props.onMouseDown}
+      onTouchStart={props.onTouchStart}>
+      <div className="vis_editor__container">
+        <div className="vis_editor__series-details">
+          <div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
+          <div className="vis_editor__row vis_editor__row_item">
+            <input
+              className="vis_editor__input-grows vis_editor__row_item"
+              onChange={handleChange('label')}
+              placeholder='Label'
+              value={model.label}/>
+            <input
+              className="vis_editor__input-grows"
+              onChange={handleChange('var_name')}
+              placeholder='Variable Name'
+              value={model.var_name}/>
+          </div>
+          <AddDeleteButtons
+            onDelete={onDelete}
+            onClone={props.onClone}
+            onAdd={onAdd}
+            disableDelete={disableDelete}
+            disableAdd={disableAdd}/>
+        </div>
+      </div>
+      { body }
+    </div>
+  );
+
+}
+
+MarkdownSeries.propTypes = {
+  className: PropTypes.string,
+  colorPicker: PropTypes.bool,
+  disableAdd: PropTypes.bool,
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  name: PropTypes.string,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onClone: PropTypes.func,
+  onDelete: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onSortableItemMount: PropTypes.func,
+  onSortableItemReadyToMove: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  model: PropTypes.object,
+  panel: PropTypes.object,
+  selectedTab: PropTypes.string,
+  sortData: PropTypes.string,
+  style: PropTypes.object,
+  switchTab: PropTypes.func,
+  toggleVisible: PropTypes.func,
+  visible: PropTypes.bool
+};
+
+export default MarkdownSeries;
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js b/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
new file mode 100644
index 0000000000000..bd027a5e2a9d5
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
@@ -0,0 +1,61 @@
+import React, { PropTypes } from 'react';
+import tickFormatter from '../../lib/tick_formatter';
+import _ from 'lodash';
+import { getLastValue } from 'plugins/metrics/visualizations';
+import color from 'color';
+import Markdown from 'react-markdown';
+import replaceVars from '../../lib/replace_vars';
+import convertSeriesToVars from '../../lib/convert_series_to_vars';
+
+function MarkdownVisualization(props) {
+  const { backgroundColor, model, visData } = props;
+  const series = _.get(visData, `${model.id}.series`, []);
+  const variables = convertSeriesToVars(series, model);
+  const style = { };
+  let reversed = props.reversed;
+  const panelBackgroundColor = model.background_color || backgroundColor;
+  if (panelBackgroundColor) {
+    style.backgroundColor = panelBackgroundColor;
+    reversed = color(panelBackgroundColor).luminosity() < 0.45;
+  }
+  let markdown;
+  if (model.markdown) {
+    const markdownSource = replaceVars(model.markdown, {}, {
+      _all: variables,
+      ...variables
+    });
+    let className = 'thorMarkdown';
+    let contentClassName = `thorMarkdown__content ${model.markdown_vertical_align}`;
+    if (model.markdown_scrollbars) contentClassName += ' scrolling';
+    if (reversed) className += ' reversed';
+    markdown = (
+      <div className={className}>
+        <style type="text/css">
+          {model.markdown_css}
+        </style>
+        <div className={contentClassName}>
+          <div id={`markdown-${model.id}`}>
+            <Markdown source={markdownSource}/>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="dashboard__visualization" style={style}>
+      {markdown}
+    </div>
+  );
+}
+
+MarkdownVisualization.propTypes = {
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  model: PropTypes.object,
+  onBrush: PropTypes.func,
+  onChange: PropTypes.func,
+  reversed: PropTypes.bool,
+  visData: PropTypes.object
+};
+
+export default MarkdownVisualization;
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/series.js b/src/core_plugins/metrics/public/components/vis_types/metric/series.js
new file mode 100644
index 0000000000000..9da8aab8fc0f0
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/metric/series.js
@@ -0,0 +1,167 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import ColorPicker from '../../color_picker';
+import AddDeleteButtons from '../../add_delete_buttons';
+import SeriesConfig from '../../series_config';
+import Sortable from 'react-anything-sortable';
+import Split from '../../split';
+import Tooltip from '../../tooltip';
+import createAggRowRender from '../../lib/create_agg_row_render';
+import createTextHandler from '../../lib/create_text_handler';
+
+function MetricSeries(props) {
+  const {
+    panel,
+    fields,
+    onAdd,
+    onChange,
+    onDelete,
+    disableDelete,
+    disableAdd,
+    selectedTab,
+    visible
+  } = props;
+
+  const defaults = { label: '' };
+  const model = { ...defaults, ...props.model };
+
+  const handleChange = createTextHandler(onChange);
+  const aggs = model.metrics.map(createAggRowRender(props));
+
+  let caretClassName = 'fa fa-caret-down';
+  if (!visible) caretClassName = 'fa fa-caret-right';
+
+  let body = null;
+  if (visible) {
+    let metricsClassName = 'kbnTabs__tab';
+    let optionsClassname = 'kbnTabs__tab';
+    if (selectedTab === 'metrics') metricsClassName += '-active';
+    if (selectedTab === 'options') optionsClassname += '-active';
+    let seriesBody;
+    if (selectedTab === 'metrics') {
+      const handleSort = (data) => {
+        const metrics = data.map(id => model.metrics.find(m => m.id === id));
+        props.onChange({ metrics });
+      };
+      seriesBody = (
+        <div>
+          <Sortable
+            style={{ cursor: 'default' }}
+            dynamic={true}
+            direction="vertical"
+            onSort={handleSort}
+            sortHandle="vis_editor__agg_sort">
+            { aggs }
+          </Sortable>
+          <div className="vis_editor__series_row">
+            <div className="vis_editor__series_row-item">
+              <Split
+                onChange={props.onChange}
+                fields={fields}
+                panel={panel}
+                model={model}/>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      seriesBody = (
+        <SeriesConfig
+          fields={props.fields}
+          model={props.model}
+          onChange={props.onChange} />
+      );
+    }
+    body = (
+      <div className="vis_editor__series-row">
+        <div className="kbnTabs sm">
+          <div className={metricsClassName}
+            onClick={e => props.switchTab('metrics')}>Metrics</div>
+          <div className={optionsClassname}
+            onClick={e => props.switchTab('options')}>Options</div>
+        </div>
+        {seriesBody}
+      </div>
+    );
+  }
+
+  let colorPicker;
+  if (props.colorPicker) {
+    colorPicker = (
+      <ColorPicker
+        disableTrash={true}
+        onChange={props.onChange}
+        name="color"
+        value={model.color}/>
+    );
+  }
+
+  let dragHandle;
+  if (!props.disableDelete) {
+    dragHandle = (
+      <Tooltip text="Sort">
+        <div className="vis_editor__sort thor__button-outlined-default sm">
+          <i className="fa fa-sort"></i>
+        </div>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      className={`${props.className} vis_editor__series`}
+      style={props.style}
+      onMouseDown={props.onMouseDown}
+      onTouchStart={props.onTouchStart}>
+      <div className="vis_editor__container">
+        <div className="vis_editor__series-details">
+          <div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
+          { colorPicker }
+          <div className="vis_editor__row vis_editor__row_item">
+            <input
+              className="vis_editor__input-grows"
+              onChange={handleChange('label')}
+              placeholder='Label'
+              value={model.label}/>
+          </div>
+          { dragHandle }
+          <AddDeleteButtons
+            onDelete={onDelete}
+            onClone={props.onClone}
+            onAdd={onAdd}
+            disableDelete={disableDelete}
+            disableAdd={disableAdd}/>
+        </div>
+      </div>
+      { body }
+    </div>
+  );
+
+}
+
+MetricSeries.propTypes = {
+  className: PropTypes.string,
+  colorPicker: PropTypes.bool,
+  disableAdd: PropTypes.bool,
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  name: PropTypes.string,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onClone: PropTypes.func,
+  onDelete: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onSortableItemMount: PropTypes.func,
+  onSortableItemReadyToMove: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  model: PropTypes.object,
+  panel: PropTypes.object,
+  selectedTab: PropTypes.string,
+  sortData: PropTypes.string,
+  style: PropTypes.object,
+  switchTab: PropTypes.func,
+  toggleVisible: PropTypes.func,
+  visible: PropTypes.bool
+};
+
+export default MetricSeries;
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/vis.js b/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
new file mode 100644
index 0000000000000..f83b91b0b05b6
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
@@ -0,0 +1,73 @@
+import React, { PropTypes } from 'react';
+import tickFormatter from '../../lib/tick_formatter';
+import _ from 'lodash';
+import { Metric, getLastValue } from 'plugins/metrics/visualizations';
+import { findDOMNode } from 'react-dom';
+import color from 'color';
+
+
+function getColors(props) {
+  const { model, visData } = props;
+  const series = _.get(visData, `${model.id}.series`, []);
+  let color;
+  let background;
+  if (model.background_color_rules) {
+    model.background_color_rules.forEach((rule) => {
+      if (rule.opperator && rule.value != null) {
+        const value = series[0] && getLastValue(series[0].data) || 0;
+        if (_[rule.opperator](value, rule.value)) {
+          background = rule.background_color;
+          color = rule.color;
+        }
+      }
+    });
+  }
+  return { color, background };
+}
+
+function MetricVisualization(props) {
+  const { backgroundColor, model, visData } = props;
+  const colors = getColors(props);
+  const series = _.get(visData, `${model.id}.series`, [])
+    .map((row, i) => {
+      const seriesDef = model.series.find(s => _.includes(row.id, s.id));
+      const newProps = {};
+      if (seriesDef) {
+        newProps.formatter = tickFormatter(seriesDef.formatter, seriesDef.value_template);
+      }
+      if (i === 0 && colors.color) newProps.color = colors.color;
+      return _.assign({}, _.pick(row, ['label', 'data']), newProps);
+    });
+  const params = {
+    metric: series[0],
+    reversed: props.reversed
+  };
+  if (series[1]) {
+    params.secondary = series[1];
+  }
+
+  const panelBackgroundColor = colors.background || backgroundColor;
+
+  if (panelBackgroundColor && panelBackgroundColor !== 'inherit') {
+    params.reversed = color(panelBackgroundColor).luminosity() < 0.45;
+  }
+  const style = { backgroundColor: panelBackgroundColor };
+  return (
+    <div className="dashboard__visualization" style={style}>
+      <Metric {...params}/>
+    </div>
+  );
+
+}
+
+MetricVisualization.propTypes = {
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  model: PropTypes.object,
+  onBrush: PropTypes.func,
+  onChange: PropTypes.func,
+  reversed: PropTypes.bool,
+  visData: PropTypes.object
+};
+
+export default MetricVisualization;
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
new file mode 100644
index 0000000000000..35b6a07df9c6a
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -0,0 +1,221 @@
+import React, { Component, PropTypes } from 'react';
+import Select from 'react-select';
+import DataFormatPicker from '../../data_format_picker';
+import createSelectHandler from '../../lib/create_select_handler';
+import YesNo from '../../yes_no';
+import createTextHandler from '../../lib/create_text_handler';
+import IndexPattern from '../../index_pattern';
+
+function TimeseriesConfig(props) {
+  const handleSelectChange = createSelectHandler(props.onChange);
+  const handleTextChange = createTextHandler(props.onChange);
+
+  const defaults = {
+    fill: '',
+    line_width: '',
+    point_size: '',
+    value_template: '{{value}}',
+    offset_time: '',
+    split_color_mode: 'gradient',
+    axis_min: '',
+    axis_max: '',
+    stacked: 'none',
+    steps: 0
+  };
+  const model = { ...defaults, ...props.model };
+
+  const stackedOptions = [
+    { label: 'None', value: 'none' },
+    { label: 'Stacked', value: 'stacked' },
+    { label: 'Percent', value: 'percent' }
+  ];
+
+  const positionOptions = [
+    { label: 'Right', value: 'right' },
+    { label: 'Left', value: 'left' }
+  ];
+
+  const chartTypeOptions = [
+    { label: 'Bar', value: 'bar' },
+    { label: 'Line', value: 'line' }
+  ];
+
+  const splitColorOptions = [
+    { label: 'Gradient', value: 'gradient' },
+    { label: 'Rainbow', value: 'rainbow' }
+  ];
+
+  let type;
+  if (model.chart_type === 'line') {
+    type = (
+      <div className="vis_editor__series_config-row">
+        <div className="vis_editor__label">Chart Type</div>
+        <div className="vis_editor__item">
+          <Select
+            clearable={false}
+            options={chartTypeOptions}
+            value={model.chart_type}
+            onChange={handleSelectChange('chart_type')}/>
+        </div>
+        <div className="vis_editor__label">Stacked</div>
+        <div className="vis_editor__item">
+          <Select
+            clearable={false}
+            options={stackedOptions}
+            value={model.stacked}
+            onChange={handleSelectChange('stacked')}/>
+        </div>
+        <div className="vis_editor__label">Fill (0 to 1)</div>
+        <input
+          className="vis_editor__input-grows"
+          type="text"
+          onChange={handleTextChange('fill')}
+          value={model.fill}/>
+        <div className="vis_editor__label">Line Width</div>
+        <input
+          className="vis_editor__input-grows"
+          type="text"
+          onChange={handleTextChange('line_width')}
+          value={model.line_width}/>
+        <div className="vis_editor__label">Point Size</div>
+        <input
+          className="vis_editor__input-grows"
+          type="text"
+          onChange={handleTextChange('point_size')}
+          value={model.point_size}/>
+        <div className="vis_editor__label">Steps</div>
+        <YesNo
+          value={model.steps}
+          name="steps"
+          onChange={props.onChange}/>
+      </div>
+    );
+  }
+  if (model.chart_type === 'bar') {
+    type = (
+      <div className="vis_editor__series_config-row">
+        <div className="vis_editor__label">Chart Type</div>
+        <div className="vis_editor__item">
+          <Select
+            clearable={false}
+            options={chartTypeOptions}
+            value={model.chart_type}
+            onChange={handleSelectChange('chart_type')}/>
+        </div>
+        <div className="vis_editor__label">Stacked</div>
+        <div className="vis_editor__item">
+          <Select
+            clearable={false}
+            options={stackedOptions}
+            value={model.stacked}
+            onChange={handleSelectChange('stacked')}/>
+        </div>
+        <div className="vis_editor__label">Fill (0 to 1)</div>
+        <input
+          className="vis_editor__input-grows"
+          type="text"
+          onChange={handleTextChange('fill')}
+          value={model.fill}/>
+        <div className="vis_editor__label">Line Width</div>
+        <input
+          className="vis_editor__input-grows"
+          type="text"
+          onChange={handleTextChange('line_width')}
+          value={model.line_width}/>
+      </div>
+    );
+  }
+
+  const disableSeperateYaxis = model.seperate_axis ? false : true;
+
+  return (
+    <div>
+      <div className="vis_editor__series_config-container">
+        <div className="vis_editor__series_config-row">
+          <DataFormatPicker
+            onChange={handleSelectChange('formatter')}
+            value={model.formatter}/>
+          <div className="vis_editor__label">Template (eg.<code>{'{{value}}/s'}</code>)</div>
+          <input
+            className="vis_editor__input-grows"
+            onChange={handleTextChange('value_template')}
+            value={model.value_template}/>
+        </div>
+        { type }
+        <div className="vis_editor__series_config-row">
+          <div className="vis_editor__label">Offset series time by (1m, 1h, 1w, 1d)</div>
+          <input
+            className="vis_editor__input-grows"
+            type="text"
+            onChange={handleTextChange('offset_time')}
+            value={model.offset_time}/>
+          <div className="vis_editor__label">Hide in Legend</div>
+          <YesNo
+            value={model.hide_in_legend}
+            name="hide_in_legend"
+            onChange={props.onChange}/>
+          <div className="vis_editor__label">Split Color Theme</div>
+          <div className="vis_editor__row_item">
+            <Select
+              clearable={false}
+              options={splitColorOptions}
+              value={model.split_color_mode}
+              onChange={handleSelectChange('split_color_mode')}/>
+          </div>
+        </div>
+        <div className="vis_editor__series_config-row">
+          <div className="vis_editor__label">Separate Axis</div>
+          <YesNo
+            value={model.seperate_axis}
+            name="seperate_axis"
+            onChange={props.onChange}/>
+          <div className="vis_editor__label">Axis Min</div>
+          <input
+            className="vis_editor__input-grows"
+            type="text"
+            disabled={disableSeperateYaxis}
+            onChange={handleTextChange('axis_min')}
+            value={model.axis_min}/>
+          <div className="vis_editor__label">Axis Max</div>
+          <input
+            className="vis_editor__input-grows"
+            type="text"
+            disabled={disableSeperateYaxis}
+            onChange={handleTextChange('axis_max')}
+            value={model.axis_max}/>
+          <div className="vis_editor__label">Axis Position</div>
+          <div className="vis_editor__row_item">
+            <Select
+              clearable={false}
+              disabled={disableSeperateYaxis}
+              options={positionOptions}
+              value={model.axis_position}
+              onChange={handleSelectChange('axis_position')}/>
+          </div>
+        </div>
+        <div className="vis_editor__series_config-row">
+          <div className="vis_editor__label">Override Index Pattern</div>
+          <YesNo
+            value={model.override_index_pattern}
+            name="override_index_pattern"
+            onChange={props.onChange}/>
+          <IndexPattern
+            {...props}
+            prefix="series_"
+            className="vis_editor__row_item vis_editor__row"
+            disabled={!model.override_index_pattern}
+            with-interval={true} />
+        </div>
+      </div>
+    </div>
+  );
+
+}
+
+TimeseriesConfig.propTypes = {
+  fields: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+export default TimeseriesConfig;
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
new file mode 100644
index 0000000000000..21ea5b3e143a3
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
@@ -0,0 +1,166 @@
+import React, { Component, PropTypes } from 'react';
+import ColorPicker from '../../color_picker';
+import AddDeleteButtons from '../../add_delete_buttons';
+import SeriesConfig from './config';
+import Sortable from 'react-anything-sortable';
+import Tooltip from '../../tooltip';
+import Split from '../../split';
+import createAggRowRender from '../../lib/create_agg_row_render';
+import createTextHandler from '../../lib/create_text_handler';
+
+function TimeseriesSeries(props) {
+  const {
+    panel,
+    fields,
+    onAdd,
+    onDelete,
+    disableDelete,
+    disableAdd,
+    selectedTab,
+    onChange,
+    visible
+  } = props;
+
+  const defaults = { label: '' };
+  const model = { ...defaults, ...props.model };
+
+  const handleChange = createTextHandler(onChange);
+  const aggs = model.metrics.map(createAggRowRender(props));
+
+  let caretClassName = 'fa fa-caret-down';
+  if (!visible) caretClassName = 'fa fa-caret-right';
+
+  let body = null;
+  if (visible) {
+    let metricsClassName = 'kbnTabs__tab';
+    let optionsClassname = 'kbnTabs__tab';
+    if (selectedTab === 'metrics') metricsClassName += '-active';
+    if (selectedTab === 'options') optionsClassname += '-active';
+    let seriesBody;
+    if (selectedTab === 'metrics') {
+      const handleSort = (data) => {
+        const metrics = data.map(id => model.metrics.find(m => m.id === id));
+        props.onChange({ metrics });
+      };
+      seriesBody = (
+        <div>
+          <Sortable
+            style={{ cursor: 'default' }}
+            dynamic={true}
+            direction="vertical"
+            onSort={handleSort}
+            sortHandle="vis_editor__agg_sort">
+            { aggs }
+          </Sortable>
+          <div className="vis_editor__series_row">
+            <div className="vis_editor__series_row-item">
+              <Split
+                onChange={props.onChange}
+                fields={fields}
+                panel={panel}
+                model={model}/>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      seriesBody = (
+        <SeriesConfig
+          fields={props.fields}
+          model={props.model}
+          onChange={props.onChange} />
+      );
+    }
+    body = (
+      <div className="vis_editor__series-row">
+        <div className="kbnTabs sm">
+          <div className={metricsClassName}
+            onClick={e => props.switchTab('metrics')}>Metrics</div>
+          <div className={optionsClassname}
+            onClick={e => props.switchTab('options')}>Options</div>
+        </div>
+        {seriesBody}
+      </div>
+    );
+  }
+
+  let colorPicker;
+  if (props.colorPicker) {
+    colorPicker = (
+      <ColorPicker
+        disableTrash={true}
+        onChange={props.onChange}
+        name="color"
+        value={model.color}/>
+    );
+  }
+
+  let dragHandle;
+  if (!props.disableDelete) {
+    dragHandle = (
+      <Tooltip text="Sort">
+        <div className="vis_editor__sort thor__button-outlined-default sm">
+          <i className="fa fa-sort"></i>
+        </div>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      className={`${props.className} vis_editor__series`}
+      style={props.style}
+      onMouseDown={props.onMouseDown}
+      onTouchStart={props.onTouchStart}>
+      <div className="vis_editor__container">
+        <div className="vis_editor__series-details">
+          <div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
+          { colorPicker }
+          <div className="vis_editor__row vis_editor__row_item">
+            <input
+              className="vis_editor__input-grows"
+              onChange={handleChange('label')}
+              placeholder='Label'
+              value={model.label}/>
+          </div>
+          { dragHandle }
+          <AddDeleteButtons
+            onDelete={onDelete}
+            onClone={props.onClone}
+            onAdd={onAdd}
+            disableDelete={disableDelete}
+            disableAdd={disableAdd}/>
+        </div>
+      </div>
+      { body }
+    </div>
+  );
+
+}
+
+TimeseriesSeries.propTypes = {
+  className: PropTypes.string,
+  colorPicker: PropTypes.bool,
+  disableAdd: PropTypes.bool,
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  name: PropTypes.string,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onClone: PropTypes.func,
+  onDelete: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onSortableItemMount: PropTypes.func,
+  onSortableItemReadyToMove: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  model: PropTypes.object,
+  panel: PropTypes.object,
+  selectedTab: PropTypes.string,
+  sortData: PropTypes.string,
+  style: PropTypes.object,
+  switchTab: PropTypes.func,
+  toggleVisible: PropTypes.func,
+  visible: PropTypes.bool
+};
+
+export default TimeseriesSeries;
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
new file mode 100644
index 0000000000000..be8a8c6a7a3f6
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
@@ -0,0 +1,147 @@
+import React, { PropTypes } from 'react';
+import tickFormatter from '../../lib/tick_formatter';
+import _ from 'lodash';
+import { Timeseries } from 'plugins/metrics/visualizations';
+import color from 'color';
+import replaceVars from '../../lib/replace_vars';
+
+function hasSeperateAxis(row) {
+  return row.seperate_axis;
+}
+
+function TimeseriesVisualization(props) {
+  const { backgroundColor, model, visData } = props;
+  const series = _.get(visData, `${model.id}.series`, []);
+  let annotations;
+  if (model.annotations && _.isArray(model.annotations)) {
+    annotations = model.annotations.map(annotation => {
+      const data = _.get(visData, `${model.id}.annotations.${annotation.id}`, [])
+        .map(item => [item.key, item.docs]);
+      return {
+        id: annotation.id,
+        color: annotation.color,
+        icon: annotation.icon,
+        series: data.map(s => {
+          return [s[0], s[1].map(doc => {
+            return replaceVars(annotation.template, null, doc);
+          })];
+        })
+      };
+    });
+  }
+  const seriesModel = model.series.map(s => _.cloneDeep(s));
+  const firstSeries = seriesModel.find(s => s.formatter && !s.seperate_axis);
+  const formatter = tickFormatter(_.get(firstSeries, 'formatter'), _.get(firstSeries, 'value_template'));
+
+  const mainAxis = {
+    position: model.axis_position,
+    tickFormatter: formatter,
+    axis_formatter: _.get(firstSeries, 'formatter', 'number'),
+  };
+
+  if (model.axis_min) mainAxis.min = model.axis_min;
+  if (model.axis_max) mainAxis.max = model.axis_max;
+
+  const yaxes = [mainAxis];
+
+
+  seriesModel.forEach(s => {
+    series
+      .filter(r => _.startsWith(r.id, s.id))
+      .forEach(r => r.tickFormatter = tickFormatter(s.formatter, s.value_template));
+
+    if (s.hide_in_legend) {
+      series
+        .filter(r => _.startsWith(r.id, s.id))
+        .forEach(r => delete r.label);
+    }
+    if (s.stacked === 'percent') {
+      s.seperate_axis = true;
+      s.axis_formatter = 'percent';
+      s.axis_min = 0;
+      s.axis_max = 1;
+      s.axis_position = model.axis_position;
+      const seriesData = series.filter(r => _.startsWith(r.id, s.id));
+      const first = seriesData[0];
+      if (first) {
+        first.data.forEach((row, index) => {
+          const rowSum = seriesData.reduce((acc, item) => {
+            return item.data[index][1] + acc;
+          }, 0);
+          seriesData.forEach(item => {
+            item.data[index][1] = rowSum && item.data[index][1] / rowSum || 0;
+          });
+        });
+      }
+    }
+  });
+
+
+  let axisCount = 1;
+  if (seriesModel.some(hasSeperateAxis)) {
+    seriesModel.forEach((row) => {
+      if (row.seperate_axis) {
+        axisCount++;
+
+        const formatter = tickFormatter(row.formatter, row.value_template);
+
+        const yaxis = {
+          alignTicksWithAxis: 1,
+          position: row.axis_position,
+          tickFormatter: formatter,
+          axis_formatter: row.axis_formatter
+        };
+
+        if (row.axis_min != null) yaxis.min = row.axis_min;
+        if (row.axis_max != null) yaxis.max = row.axis_max;
+
+        yaxes.push(yaxis);
+
+        // Assign axis and formatter to each series
+        series
+          .filter(r => _.startsWith(r.id, row.id))
+          .forEach(r => {
+            r.yaxis = axisCount;
+          });
+      }
+    });
+  }
+
+  const params = {
+    crosshair: true,
+    tickFormatter: formatter,
+    legendPosition: model.legend_position || 'right',
+    series,
+    annotations,
+    yaxes,
+    reversed: props.reversed,
+    legend: Boolean(model.show_legend),
+    onBrush: (ranges) => {
+      if (props.onBrush) props.onBrush(ranges);
+    }
+  };
+  const style = { };
+  const panelBackgroundColor = model.background_color || backgroundColor;
+  if (panelBackgroundColor) {
+    style.backgroundColor = panelBackgroundColor;
+    params.reversed = color(panelBackgroundColor || backgroundColor).luminosity() < 0.45;
+  }
+  return (
+    <div className="dashboard__visualization" style={style}>
+      <Timeseries {...params}/>
+    </div>
+  );
+
+}
+
+TimeseriesVisualization.propTypes = {
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  model: PropTypes.object,
+  onBrush: PropTypes.func,
+  onChange: PropTypes.func,
+  reversed: PropTypes.bool,
+  visData: PropTypes.object
+};
+
+export default TimeseriesVisualization;
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
new file mode 100644
index 0000000000000..4e2390a6aa99c
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
@@ -0,0 +1,122 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import ColorPicker from '../../color_picker';
+import AddDeleteButtons from '../../add_delete_buttons';
+import SeriesConfig from '../../series_config';
+import Sortable from 'react-anything-sortable';
+import Tooltip from '../../tooltip';
+import MetricSelect from '../../aggs/metric_select';
+import Split from '../../split';
+import { handleChange } from '../../lib/collection_actions';
+import createAggRowRender from '../../lib/create_agg_row_render';
+
+function TopNSeries(props) {
+  const {
+    panel,
+    model,
+    fields,
+    onAdd,
+    onDelete,
+    disableDelete,
+    disableAdd,
+    selectedTab,
+    visible,
+  } = props;
+
+  const aggs = model.metrics.map(createAggRowRender(props));
+
+  let caretClassName = 'fa fa-caret-down';
+  if (!visible) caretClassName = 'fa fa-caret-right';
+
+  let body = null;
+  if (visible) {
+    let metricsClassName = 'kbnTabs__tab';
+    let optionsClassname = 'kbnTabs__tab';
+    if (selectedTab === 'metrics') metricsClassName += '-active';
+    if (selectedTab === 'options') optionsClassname += '-active';
+    let seriesBody;
+    if (selectedTab === 'metrics') {
+      const handleSort = (data) => {
+        const metrics = data.map(id => model.metrics.find(m => m.id === id));
+        props.onChange({ metrics });
+      };
+      seriesBody = (
+        <div>
+          <Sortable
+            style={{ cursor: 'default' }}
+            dynamic={true}
+            direction="vertical"
+            onSort={handleSort}
+            sortHandle="vis_editor__agg_sort">
+            { aggs }
+          </Sortable>
+          <div className="vis_editor__series_row">
+            <div className="vis_editor__series_row-item">
+              <Split
+                onChange={props.onChange}
+                fields={fields}
+                panel={panel}
+                model={model}/>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      seriesBody = (
+        <SeriesConfig
+          fields={props.fields}
+          model={props.model}
+          onChange={props.onChange} />
+      );
+    }
+    body = (
+      <div className="vis_editor__series-row">
+        <div className="kbnTabs sm">
+          <div className={metricsClassName}
+            onClick={e => props.switchTab('metrics')}>Metrics</div>
+          <div className={optionsClassname}
+            onClick={e => props.switchTab('options')}>Options</div>
+        </div>
+        {seriesBody}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`${props.className} vis_editor__series`}
+      style={props.style}
+      onMouseDown={props.onMouseDown}
+      onTouchStart={props.onTouchStart}>
+      { body }
+    </div>
+  );
+
+}
+
+TopNSeries.propTypes = {
+  className: PropTypes.string,
+  colorPicker: PropTypes.bool,
+  disableAdd: PropTypes.bool,
+  disableDelete: PropTypes.bool,
+  fields: PropTypes.object,
+  name: PropTypes.string,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onClone: PropTypes.func,
+  onDelete: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onSortableItemMount: PropTypes.func,
+  onSortableItemReadyToMove: PropTypes.func,
+  onTouchStart: PropTypes.func,
+  model: PropTypes.object,
+  panel: PropTypes.object,
+  selectedTab: PropTypes.string,
+  sortData: PropTypes.string,
+  style: PropTypes.object,
+  switchTab: PropTypes.func,
+  toggleVisible: PropTypes.func,
+  visible: PropTypes.bool
+};
+
+export default TopNSeries;
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js b/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
new file mode 100644
index 0000000000000..79cf04387b42e
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
@@ -0,0 +1,63 @@
+import tickFormatter from '../../lib/tick_formatter';
+import _ from 'lodash';
+import { TopN, getLastValue } from 'plugins/metrics/visualizations';
+import color from 'color';
+
+import React, { PropTypes } from 'react';
+function TopNVisualization(props) {
+  const { backgroundColor, model, visData } = props;
+
+  const series = _.get(visData, `${model.id}.series`, [])
+    .map(item => {
+      const id = _.first(item.id.split(/:/));
+      const seriesConfig = model.series.find(s => s.id === id);
+      if (seriesConfig) {
+        const formatter = tickFormatter(seriesConfig.formatter, seriesConfig.value_template);
+        const value = getLastValue(item.data, item.data.length);
+        let color = item.color || seriesConfig.color;
+        if (model.bar_color_rules) {
+          model.bar_color_rules.forEach(rule => {
+            if (rule.opperator && rule.value != null && rule.bar_color) {
+              if (_[rule.opperator](value, rule.value)) {
+                color = rule.bar_color;
+              }
+            }
+          });
+        }
+        return _.assign({}, item, {
+          color,
+          tickFormatter: formatter
+        });
+      }
+      return item;
+    });
+
+  const params = {
+    series: series,
+    reversed: props.reversed
+  };
+  const panelBackgroundColor = model.background_color || backgroundColor;
+
+  if (panelBackgroundColor && panelBackgroundColor !== 'inherit') {
+    params.reversed = color(panelBackgroundColor).luminosity() < 0.45;
+  }
+  const style = { backgroundColor: panelBackgroundColor };
+  return (
+    <div className="dashboard__visualization" style={style}>
+      <TopN {...params}/>
+    </div>
+  );
+
+}
+
+TopNVisualization.propTypes = {
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  model: PropTypes.object,
+  onBrush: PropTypes.func,
+  onChange: PropTypes.func,
+  reversed: PropTypes.bool,
+  visData: PropTypes.object
+};
+
+export default TopNVisualization;
diff --git a/src/core_plugins/metrics/public/components/visualization.js b/src/core_plugins/metrics/public/components/visualization.js
new file mode 100644
index 0000000000000..bf29f524ec6b6
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/visualization.js
@@ -0,0 +1,58 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+
+import timeseries from './vis_types/timeseries/vis';
+import metric from './vis_types/metric/vis';
+import topN from './vis_types/top_n/vis';
+import gauge from './vis_types/gauge/vis';
+import markdown from './vis_types/markdown/vis';
+import Error from './error';
+
+const types = {
+  timeseries,
+  metric,
+  top_n: topN,
+  gauge,
+  markdown
+};
+
+function Visualization(props) {
+  const { visData, model } = props;
+  // Show the error panel
+  const error = _.get(visData, `${model.id}.error`);
+  if (error) {
+    return (
+      <div className={props.className}>
+        <Error error={error}/>
+      </div>
+    );
+  }
+  const component = types[model.type];
+  if (component) {
+    return React.createElement(component, {
+      reversed: props.reversed,
+      backgroundColor: props.backgroundColor,
+      model: props.model,
+      onBrush: props.onBrush,
+      onChange: props.onChange,
+      visData: props.visData
+    });
+  }
+  return (<div className={props.className}></div>);
+}
+
+Visualization.defaultProps = {
+  className: 'thor__visualization'
+};
+
+Visualization.propTypes = {
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  model: PropTypes.object,
+  onBrush: PropTypes.func,
+  onChange: PropTypes.func,
+  reversed: PropTypes.bool,
+  visData: PropTypes.object
+};
+
+export default Visualization;
diff --git a/src/core_plugins/metrics/public/components/yes_no.js b/src/core_plugins/metrics/public/components/yes_no.js
new file mode 100644
index 0000000000000..8c654b76a0d85
--- /dev/null
+++ b/src/core_plugins/metrics/public/components/yes_no.js
@@ -0,0 +1,41 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+
+function YesNo(props) {
+  const { name, value } = props;
+  const handleChange = value => {
+    const { name } = props;
+    return (e) => {
+      const parts = { [name]: value };
+      props.onChange(parts);
+    };
+  };
+  const inputName = name + _.uniqueId();
+  return (
+    <div className="thor__yes_no">
+      <label>
+        <input
+          type="radio"
+          name={inputName}
+          checked={Boolean(value)}
+          value="yes"
+          onChange={handleChange(1)}/>
+        Yes</label>
+      <label>
+        <input
+          type="radio"
+          name={inputName}
+          checked={!Boolean(value)}
+          value="no"
+          onChange={handleChange(0)}/>
+        No</label>
+    </div>
+  );
+}
+
+YesNo.propTypes = {
+  name: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+
+export default YesNo;
diff --git a/src/core_plugins/metrics/public/directives/vis_editor.js b/src/core_plugins/metrics/public/directives/vis_editor.js
new file mode 100644
index 0000000000000..aa9dffe508fad
--- /dev/null
+++ b/src/core_plugins/metrics/public/directives/vis_editor.js
@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import modules from 'ui/modules';
+import VisEditor from '../components/vis_editor';
+import addScope from '../lib/add_scope';
+import angular from 'angular';
+import createBrushHandler from '../lib/create_brush_handler';
+const app = modules.get('apps/metrics/directives');
+app.directive('metricsVisEditor', (timefilter) => {
+  return {
+    restrict: 'E',
+    link: ($scope, $el, $attrs) => {
+      const addToState = ['embedded', 'fields', 'visData'];
+      const Component = addScope(VisEditor, $scope, addToState);
+      const handleBrush = createBrushHandler($scope, timefilter);
+      const handleChange = part => {
+        $scope.$evalAsync(() => angular.copy(part, $scope.model));
+      };
+      render(<Component model={$scope.model} onChange={handleChange} onBrush={handleBrush} />, $el[0]);
+      $scope.$on('$destroy', () => {
+        unmountComponentAtNode($el[0]);
+      });
+    }
+  };
+});
+
diff --git a/src/core_plugins/metrics/public/directives/visualization.js b/src/core_plugins/metrics/public/directives/visualization.js
new file mode 100644
index 0000000000000..866b6ad67a488
--- /dev/null
+++ b/src/core_plugins/metrics/public/directives/visualization.js
@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import $ from 'jquery';
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import Visualization from '../components/visualization';
+import addScope from '../lib/add_scope';
+import modules from 'ui/modules';
+import createBrushHandler from '../lib/create_brush_handler';
+const app = modules.get('apps/metrics/directives');
+app.directive('metricsVisualization', (timefilter) => {
+  return {
+    restrict: 'E',
+    link: ($scope, $el, $attrs) => {
+      const addToState = ['model', 'visData', 'reversed'];
+      const Component = addScope(Visualization, $scope, addToState);
+      const handleBrush = createBrushHandler($scope, timefilter);
+      render(<Component onBrush={handleBrush} className="dashboard__visualization"/>, $el[0]);
+      $scope.$on('$destroy', () => unmountComponentAtNode($el[0]));
+
+      // For Metrics, Gauges and markdown visualizations we want to hide the
+      // panel title because it just doens't make sense to show it.
+      const panel = $($el[0]).parents('.panel');
+      if (panel.length) {
+        const panelHeading = panel.find('.panel-heading');
+        const panelTitle = panel.find('.panel-title');
+        const matchingTypes = ['metric', 'gauge', 'markdown'];
+        if (panelHeading.length && panelTitle.length && _.contains(matchingTypes, $scope.model.type)) {
+          panel.css({ position: 'relative' });
+          panelHeading.css({
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            zIndex: 100
+          });
+          panelTitle.css({ display: 'none' });
+        }
+      }
+    }
+  };
+});
+
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/editor.html b/src/core_plugins/metrics/public/kbn_vis_types/editor.html
new file mode 100644
index 0000000000000..9b7a3abf51298
--- /dev/null
+++ b/src/core_plugins/metrics/public/kbn_vis_types/editor.html
@@ -0,0 +1,6 @@
+<div
+  refresh-hack
+  class="vis_editor_container"
+  ng-controller="MetricsEditorController" >
+  <metrics-vis-editor/>
+</div>
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js b/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
new file mode 100644
index 0000000000000..61dbbb40d9bc3
--- /dev/null
+++ b/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
@@ -0,0 +1,110 @@
+import modules from 'ui/modules';
+import '../services/executor';
+import 'plugins/timelion/directives/refresh_hack';
+import $ from 'jquery';
+import createNewPanel from '../lib/create_new_panel';
+import '../directives/vis_editor';
+import _ from 'lodash';
+import angular from 'angular';
+const app = modules.get('kibana/metrics_vis', ['kibana']);
+app.controller('MetricsEditorController', (
+  $location,
+  $element,
+  $scope,
+  Private,
+  timefilter,
+  metricsExecutor
+) => {
+
+  $scope.embedded = $location.search().embed === 'true';
+  const queryFilter = Private(require('ui/filter_bar/query_filter'));
+  const createFetch = Private(require('../lib/fetch'));
+  const fetch = () => {
+    const fn = createFetch($scope);
+    return fn().then((resp) => {
+      $element.trigger('renderComplete');
+      return resp;
+    });
+  };
+  const fetchFields = Private(require('../lib/fetch_fields'));
+
+  const debouncedFetch = _.debounce(() => {
+    fetch();
+  }, 1000, {
+    leading: false,
+    trailing: true
+  });
+
+  const debouncedFetchFields = _.debounce(fetchFields($scope), 1000, {
+    leading: false,
+    trailing: true
+  });
+
+  // If the model doesn't exist we need to either intialize it with a copy from
+  // the $scope.vis._editableVis.params or create a new panel all together.
+  if (!$scope.model) {
+    if ($scope.vis._editableVis.params.type) {
+      $scope.model = _.assign({}, $scope.vis._editableVis.params);
+    } else {
+      $scope.model = createNewPanel();
+      angular.copy($scope.model, $scope.vis._editableVis.params);
+    }
+  }
+
+  $scope.$watchCollection('model', (newValue, oldValue) => {
+    angular.copy(newValue, $scope.vis._editableVis.params);
+    // When the content of the model changes we need to stage the changes to
+    // the Editable visualization. Normally this is done through clicking the
+    // play which triggers `stageEditableVis` in kibana/public/visualize/editor/editor.js
+    // but because we are auto running everything that doesn't work with our worflow
+    // plus it's covered up by the Thor editor UI.
+    const visAppScope = angular.element($('visualize-app')).scope();
+    visAppScope.stageEditableVis();
+    debouncedFetch();
+
+    const patternsToFetch = [];
+    // Fetch any missing index patterns
+    if (!$scope.fields[newValue.index_pattern]) {
+      patternsToFetch.push(newValue.index_pattern);
+    }
+
+    newValue.series.forEach(series => {
+      if (series.override_index_pattern &&
+        !$scope.fields[series.series_index_pattern]) {
+        patternsToFetch.push(series.series_index_pattern);
+      }
+    });
+
+    if (newValue.annotations) {
+      newValue.annotations.forEach(item => {
+        if (item.index_pattern &&
+          !$scope.fields[item.index_pattern]) {
+          patternsToFetch.push(item.index_pattern);
+        }
+      });
+    }
+
+    if(patternsToFetch.length) {
+      debouncedFetchFields(_.unique(patternsToFetch));
+    }
+  });
+
+  $scope.visData = {};
+  $scope.fields = {};
+  // All those need to be consolidated
+  $scope.$listen(queryFilter, 'fetch', fetch);
+  $scope.$on('fetch', fetch);
+
+  fetchFields($scope)($scope.model.index_pattern);
+
+  // Register fetch
+  metricsExecutor.register({ execute: fetch });
+
+  // Start the executor
+  metricsExecutor.start();
+
+  // Destory the executor
+  $scope.$on('$destroy', metricsExecutor.destroy);
+
+});
+
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/index.js b/src/core_plugins/metrics/public/kbn_vis_types/index.js
new file mode 100644
index 0000000000000..8e6a1b8183c41
--- /dev/null
+++ b/src/core_plugins/metrics/public/kbn_vis_types/index.js
@@ -0,0 +1,31 @@
+import './vis_controller';
+import './editor_controller';
+import '../visualizations/less/main.less';
+import 'react-select/dist/react-select.css';
+import '../less/main.less';
+
+  // register the provider with the visTypes registry so that other know it exists
+import visTypes from 'ui/registry/vis_types';
+visTypes.register(MetricsVisProvider);
+
+export default function MetricsVisProvider(Private) {
+  const TemplateVisType = Private(require('ui/template_vis_type'));
+
+  // return the visType object, which kibana will use to display and configure new
+  // Vis object of this type.
+  return new TemplateVisType({
+    name: 'metrics',
+    title: 'Time Series Visual Builder',
+    icon: 'fa-area-chart',
+    description: `Create a time series based visualization for metrics. Perfect
+        for creating visualizations for time series based metrics using the
+        powerful pipeline aggs Elasticsearch feature`,
+    template: require('./vis.html'),
+    fullEditor: true,
+    params: {
+      editor: require('./editor.html')
+    },
+    requiresSearch: false,
+    implementsRenderComplete: true,
+  });
+}
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/vis.html b/src/core_plugins/metrics/public/kbn_vis_types/vis.html
new file mode 100644
index 0000000000000..94eab1b5b547f
--- /dev/null
+++ b/src/core_plugins/metrics/public/kbn_vis_types/vis.html
@@ -0,0 +1,5 @@
+<div
+  refresh-hack
+  ng-controller="MetricsVisController">
+  <metrics-visualization/>
+</div>
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/vis_controller.js b/src/core_plugins/metrics/public/kbn_vis_types/vis_controller.js
new file mode 100644
index 0000000000000..d12e34fe7b5b5
--- /dev/null
+++ b/src/core_plugins/metrics/public/kbn_vis_types/vis_controller.js
@@ -0,0 +1,48 @@
+import modules from 'ui/modules';
+import 'plugins/timelion/directives/refresh_hack';
+import 'ui/state_management/app_state';
+import '../directives/visualization';
+const app = modules.get('kibana/metrics_vis');
+
+app.controller('MetricsVisController', (
+  $scope,
+  $element,
+  Private,
+  timefilter,
+  getAppState,
+  $location
+) => {
+
+  // If we are in the visualize editor context (and not embedded) we should not
+  // render the visualizations. This is handled by the editor itself.
+  const embedded = $location.search().embed === 'true';
+  if (!embedded && $scope.vis._editableVis) {
+    return;
+  }
+  // We need to watch the app state for changes to the dark theme attribute.
+  $scope.state = getAppState();
+  $scope.$watch('state.options.darkTheme', newValue => {
+    $scope.reversed = Boolean(newValue);
+  });
+
+  const queryFilter = Private(require('ui/filter_bar/query_filter'));
+  const createFetch = Private(require('../lib/fetch'));
+  const fetch = () => {
+    const fn = createFetch($scope);
+    return fn().then((resp) => {
+      $element.trigger('renderComplete');
+      return resp;
+    });
+  };
+
+
+  $scope.model = $scope.vis.params;
+  $scope.$watch('vis.params', fetch);
+
+  // All those need to be consolidated
+  $scope.$listen(timefilter, 'fetch', fetch);
+  $scope.$listen(queryFilter, 'fetch', fetch);
+
+  $scope.$on('courier:searchRefresh', fetch);
+  $scope.$on('fetch', fetch);
+});
diff --git a/src/core_plugins/metrics/public/less/color_picker.less b/src/core_plugins/metrics/public/less/color_picker.less
new file mode 100644
index 0000000000000..ee715d9597a46
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/color_picker.less
@@ -0,0 +1,89 @@
+.color_picker {
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 2px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.3);
+  box-sizing: initial;
+  width: 275px;
+  font-family: 'Menlo';
+}
+
+.color_picker__saturation {
+  width: 100%;
+  padding-bottom: 55%;
+  position: relative;
+  border-radius: 2px 2px 0 0;
+  overflow: hidden;
+}
+
+.color_picker__body {
+  padding: 16px 16px 12px;
+}
+
+.color_picker__controls {
+  display: flex;
+}
+
+.color_picker__color {
+  width: 32px;
+}
+
+.color_picker__color-disable_alpha {
+  width: 22px;
+}
+
+.color_picker__swatch {
+  margin-top: 6px;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.color_picker__swatch-disable_alpha {
+  width: 10px;
+  height: 10px;
+  margin: 0px;
+}
+
+.color_picker__active {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
+  z-index: 2;
+}
+
+.color_picker__toggles {
+  flex: 1
+}
+
+.color_picker__hue {
+  height: 10px;
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.color_picker__hue-disable_alpha {
+  margin-bottom: 0px;
+}
+
+.color_picker__alpha {
+  height: 10px;
+  position: relative;
+}
+
+.color_picker__alpha-disable_alpha {
+  display: none;
+}
+
+.color_picker__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 10px;
+}
+
diff --git a/src/core_plugins/metrics/public/less/color_rules.less b/src/core_plugins/metrics/public/less/color_rules.less
new file mode 100644
index 0000000000000..d19eba6375bbb
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/color_rules.less
@@ -0,0 +1,36 @@
+.color_rules {
+  flex: 1 0 auto;
+}
+
+.color_rules__rule {
+  background-color: @grayLightest;
+  padding: 10px;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  flex: 1 0 auto;
+}
+
+.color_rules__item {
+  flex: 1 0 auto;
+  margin-right: 10px;
+}
+
+.color_rules__label {
+  margin: 0 10px;
+}
+
+.color_rules__input {
+  padding: 6px 10px;
+  border-radius: 4px;
+  border: 1px solid @grayLight;
+  flex: 1 0 auto;
+  margin-right: 10px;
+}
+
+.color_rules__secondary {
+  display: flex;
+  align-items: center;
+}
+
+
diff --git a/src/core_plugins/metrics/public/less/editor.less b/src/core_plugins/metrics/public/less/editor.less
new file mode 100644
index 0000000000000..dac03187dc146
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/editor.less
@@ -0,0 +1,426 @@
+@borderRadius: 4px;
+
+.vis_editor_container {
+  background: @pageColor;
+}
+
+// general styles
+.vis_editor__title {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  font-size: 20px;
+  margin-bottom: 20px;
+
+  i.fa {
+    color: @grayLighter;
+    margin: 0 10px;
+  }
+
+  i.fa-pencil {
+    &:hover {
+      color: @gray;
+    }
+  }
+
+  i.fa-check-square {
+    color: @esGreen;
+    &:hover {
+      color: darken(@esGreen, 10%);
+    }
+  }
+
+  input {
+    padding: 0 10px;
+    border-radius: 4px;
+    border: 1px solid @grayLighter;
+    flex-grow: 1;
+  }
+}
+.vis_editor__container {
+  padding: 10px;
+  background-color: @white;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+.vis_editor__label {
+  color: @gray;
+  margin: 0 10px;
+  flex-shrink: 0;
+  &:first-child {
+    margin: 0 10px 0 0;
+  }
+}
+.vis_editor__input { padding: 8px 10px; border-radius: @borderRadius; border: 1px solid @grayLight; }
+.vis_editor__input-grows { .vis_editor__input; flex-grow: 1; }
+.vis_editor__input-grows-100 { .vis_editor__input-grows; width: 100%; }
+.vis_editor__row { display: flex; align-items: center; }
+.vis_editor__item { flex-grow: 1; }
+.vis_editor__row_item { flex-grow: 1; margin-right: 10px; }
+.vis_editor__subhead { font-size: 12px; color: @gray; margin: 5px 0; }
+.vis_editor__subhead-main { font-size: 18px; color: @gray; margin: 10px 10px 5px; }
+.vis_editor__note { font-size: 14px; color: @gray; margin: 5px 0 10px 0; }
+
+// color_picker.js
+.vis_editor__color_picker {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.vis_editor__color_picker-swatch { border: 1px solid @grayDark; width: 20px; height: 20px; border-radius: 4px; }
+.vis_editor__color_picker-swatch-empty {
+  .vis_editor__color_picker-swatch;
+  background-color: transparent;
+  background-size: 20px 20px;
+  background-image: repeating-linear-gradient(-45deg, #C00, #C00 2px, transparent 2px, transparent 16px);
+}
+.vis_editor__color_picker-clear {
+  margin-left: 5px;
+  color: #C00;
+}
+.vis_editor__color_picker-popover { position: absolute; top: 20px; z-index: 2 }
+.vis_editor__color_picker-cover { position: fixed; top: 0px; right: 0px; left: 0px; bottom: 0px; }
+
+// data_format_picker
+.vis_editor__data_format_picker-container {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.vis_editor__data_format_picker-custom_row {
+  display: flex;
+  align-items: center;
+  > .vis_editor__label { margin-left: 10px; }
+}
+
+
+// index_pattern.js
+.vis_editor__index_pattern-fields { margin-right: 10px; flex-grow: 1; }
+
+// series.js
+// mainRow == .vis_editor__container
+.vis_editor__series {
+  background-color: @white;
+  padding: 10px;
+  border-top: 2px solid @lineColor;
+  &:first-child {
+    border-top: none;
+  }
+
+}
+.vis_editor__series-row {
+  .vis_editor__container;
+  padding: 0 10px 10px;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+.vis_editor__series-details {
+  .vis_editor__row;
+  flex-grow: 1;
+  > * { margin-right: 10px; }
+  > .vis_editor__sort {
+    cursor: move;
+    margin-right: 0px;
+  }
+}
+
+// series_config.js
+.vis_editor__series_config-subhead { .vis_editor__subhead; margin: 10px 0 5px; }
+
+// series_editor.js
+.vis_editor__series_editor-container { margin-bottom: 20px; }
+
+//split.js
+.vis_editor__split-container { .vis_editor__row; flex-grow: 1; }
+.vis_editor__split-filter { .vis_editor__input; flex-grow: 1; }
+.vis_editor__split-selects { .vis_editor__item; }
+.vis_editor__split-aggs { flex-grow: 1; }
+.vis_editor__split-term_count { .vis_editor__input; width: 50; }
+
+// vis_picker.js
+.vis_editor__vis_picker-container {
+  display: flex;
+  align-items: center;
+}
+
+.vis_editor__vis_picker-item {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  padding: 5px 0;
+  margin: 0 10px;
+  &:hover {
+    border-bottom: 2px solid @grayDarker;
+  }
+  &.selected {
+    border-bottom: 2px solid @grayDarker;
+  }
+}
+.vis_editor__vis_picker-icon {
+  display: none;
+  margin-right: 5px;
+  color: @grayDark;
+  &:hover,
+  &.selected {
+    color: @grayDarker;
+  }
+}
+.vis_editor__vis_picker-label {
+  font-size: 18px;
+  color: @grayDark;
+  &:hover,
+  &.selected {
+    color: @grayDarker;
+  }
+}
+
+.vis_editor__vis_picker-controls {
+  flex: 1 0 auto;
+  text-align: right;
+  margin-right: 10px;
+}
+
+// visualization.js
+.vis_editor__visualization {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  width: 100%;
+  height: 250px;
+  line-height: normal;
+  background-color: @white;
+}
+
+.vis_editor__visualization-draghandle {
+  text-align: center;
+  color: @grayLight;
+  cursor: row-resize;
+  &:hover {
+    color: @gray;
+  }
+}
+
+.vis_editor__visualization-title {
+  color: @gray;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+// aggs/agg_row
+.vis_editor__agg_row-icon {
+  margin-right: 10px;
+  color: @gray;
+  &.last { color: @grayDark }
+}
+
+.vis_editor__series_row {
+  display: flex;
+  background-color: @grayLightest;
+  margin-bottom: 2px;
+  padding: 10px;
+  align-items: center;
+  .vis_editor__label { margin-bottom: 5px; font-size: 12px; }
+}
+
+.vis_editor__agg_row {
+  .vis_editor__series_row;
+}
+
+.vis_editor__series_row-item {
+  display: flex;
+  flex-grow: 1;
+}
+
+.vis_editor__agg_row-item {
+  .vis_editor__series_row-item;
+  margin-bottom: 10px;
+}
+
+// aggs/std_deviation.js
+.vis_editor__std_deviation-field {
+  .vis_editor__row_item;
+  flex-grow: 2;
+}
+.vis_editor__std_deviation-sigma_item {
+  margin-right: 10px;
+}
+.vis_editor__std_deviation-sigma {
+  .vis_editor__input;
+  width: 50px;
+}
+
+.vis_editor__percentile_rank_value {
+  margin-right: 10px;
+}
+
+// aggs/std_sibling.js
+.vis_editor__std_sibling-metric {
+  .vis_editor__row_item;
+  flex-grow: 2;
+}
+
+// aggs/vis_config
+.vis_editor__vis_config-row {
+  .vis_editor__row;
+  margin: 10px 0;
+}
+
+// aggs/series_config
+.vis_editor__series_config-container {
+  background-color: @grayLightest;
+  padding: 10px;
+}
+
+.vis_editor__series_config-row {
+  .vis_editor__row;
+  padding: 5px 0;
+  font-size: 12px;
+}
+
+.vis_editor__percentiles,
+.vis_editor__variables {
+  .vis_editor__row_item;
+  margin: 10px 0;
+}
+.vis_editor__calc_vars {
+  // background-color: @white;
+  // padding: 10px;
+  margin-right: 10px;
+  margin-bottom: 2px;
+}
+
+.vis_editor__percentiles-row,
+.vis_editor__calc_vars-row {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.vis_editor__calc_vars-name {
+  margin-right: 10px;
+}
+
+.vis_editor__calc_vars-var{
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.vis_editor__percentiles-content {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.vis_editor__markdown {
+  display: flex;
+  background-color: @white;
+  min-height: 500px;
+}
+
+.vis_editor__markdown-editor {
+  border: 2px solid @lineColor;
+  width: 50%;
+  flex: 1 0 auto;
+}
+
+.vis_editor__markdown-variables {
+  padding: 10px;
+  flex: 1 0 auto;
+  max-height: 500px;
+  overflow: auto;
+  width: 50%;
+  .table a { text-decoration: none }
+  pre {
+    border-radius: 0;
+    border: none;
+  }
+}
+
+.vis_editor__markdown-code-desc {
+  margin-bottom: 10px;
+}
+
+.vis_editor__ace-editor {
+  border: 2px solid @lineColor;
+}
+
+.vis_editor__split-filters {
+  flex-grow: 1;
+  display: flex;
+  padding: 10px 20px;
+  flex-direction: column;
+}
+
+.vis_editor__split-filter-row {
+  display: flex;
+  flex-grow: 1;
+  margin-bottom: 10px;
+  align-items: center;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.vis_editor__split-filter-item {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.vis_editor__split-filter-color {
+  margin-right: 10px;
+}
+
+.vis_editor__annotations-color,
+.vis_editor__annotations-controls {
+  flex-shrink: 0;
+}
+
+.vis_editor__annotations-row {
+  display: flex;
+  padding: 10px;
+  background-color: @lineColor;
+  margin-bottom: 2px;
+}
+
+.vis_editor__annotations-missing {
+  padding: 30px 10px;
+  font-size: 16px;
+  p { font-size: 16px; }
+  text-align: center;
+}
+
+.vis_editor__annotations-content {
+  margin: 0 10px;
+  flex-grow: 1;
+  .vis_editor__row {
+    margin-bottom: 10px;
+  }
+  .vis_editor__row-item {
+    flex-grow: 1;
+    margin-left: 10px;
+    &:first-child {
+      margin-left: 0;
+    }
+    .vis_editor__label {
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.vis_editor__icon_select-option {
+  margin: 0 5px;
+}
+.vis_editor__icon_select-value {
+  margin: 0 5px 0 0;
+}
diff --git a/src/core_plugins/metrics/public/less/error.less b/src/core_plugins/metrics/public/less/error.less
new file mode 100644
index 0000000000000..d8bc20c726e13
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/error.less
@@ -0,0 +1,34 @@
+.metrics_error {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  background-color: #FFD9D9;
+  color: #C00;
+  justify-content: center;
+  padding: 20px
+}
+
+.merics_error__title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.metrics_error__additional {
+  margin-top: 10px;
+  padding: 0 20px;
+}
+
+.metrics_error__reason {
+  text-align: center;
+}
+
+.metrics_error__stack {
+  margin-top: 10px;
+  color: #FFF;
+  border: 10px solid #FFF;
+  background-color: #000;
+  font-family: "Courier New", Courier, monospace;
+  white-space: pre;
+  padding: 10px;
+}
diff --git a/src/core_plugins/metrics/public/less/kbn_tabs.less b/src/core_plugins/metrics/public/less/kbn_tabs.less
new file mode 100644
index 0000000000000..444d49a9d1eba
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/kbn_tabs.less
@@ -0,0 +1,29 @@
+.kbnTabs {
+  display: flex;
+}
+
+.kbnTabs__tab {
+  margin: 0px 10px;
+  padding: 5px 0px;
+  color: @grayDark;
+  font-size: 18px;
+}
+
+.kbnTabs__tab-active {
+  .kbnTabs__tab;
+  color: @grayDarker;
+  border-bottom: 2px solid @grayDarker;
+}
+
+.kbnTabs__tab:hover {
+  .kbnTabs__tab-active;
+}
+
+.kbnTabs.sm {
+  .kbnTabs__tab-active,
+  .kbnTabs__tab {
+    font-size: 14px;
+    padding: 2px 0;
+  }
+}
+
diff --git a/src/core_plugins/metrics/public/less/main.less b/src/core_plugins/metrics/public/less/main.less
new file mode 100644
index 0000000000000..5726030e334e1
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/main.less
@@ -0,0 +1,40 @@
+@black: black;
+@grayDarkest: #222;
+@grayDarker: #333;
+@grayDark: #666;
+@gray: #999;
+@grayLight: #CCC;
+@grayLighter: #DDD;
+@grayLightest: #EEE;
+@white: white;
+
+@background: #FFF;
+@navBarBackground: #DDD;
+@lineColor: #EEE;
+@textColor: #999;
+@disabledColor: #CCC;
+@valueColor: #666;
+@topNavColor: #E4E4E4;
+@pageColor: #F6F6F6;
+
+@kibanaGray: #95a5a6;
+@esBlue: #6eadc1;
+@esRed: #d76051;
+@esYellow: #fbce47;
+@esGreen: #80c383;
+@esPink: #e8488b;
+@esPurple: #9980b2;
+
+@esAltGreen: #8ac336;
+@esCyan: #59c6c5;
+
+@import './misc.less';
+@import './editor.less';
+@import './kbn_tabs.less';
+@import './color_rules.less';
+@import './markdown.less';
+@import './sortable.less';
+@import './color_picker.less';
+@import './error.less';
+
+
diff --git a/src/core_plugins/metrics/public/less/markdown.less b/src/core_plugins/metrics/public/less/markdown.less
new file mode 100644
index 0000000000000..b995f2a177477
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/markdown.less
@@ -0,0 +1,60 @@
+.thorMarkdown {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  position: relative;
+}
+
+.thorMarkdown__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  @import './type.less';
+  color: rgba(0,0,0,1);
+  pre, code, tt {
+    background-color: rgba(0,0,0,0.1);
+    color: red;
+    code {
+      color: rgba(0,0,0,1);
+      background-color: transparent;
+    }
+    border: none;
+  }
+  &.middle {
+    justify-content: center;
+  }
+  &.bottom {
+    justify-content: flex-end;
+  }
+  &.scrolling {
+    overflow: auto;
+  }
+}
+
+.thorMarkdown.reversed {
+  .thorMarkdown__content {
+    .table > thead > tr > th {
+      color: rgba(255,255,255,0.5);
+      border-bottom: 2px solid rgba(255,255,255,0.2);
+    }
+    .table > tbody > tr > td {
+      border-top: 1px solid rgba(255,255,255,0.2);
+    }
+    color: rgba(255,255,255,1);
+    pre, code, tt {
+      background-color: rgba(255,255,255,0.2);
+      color: #ffa5a8;
+      code {
+        color: rgba(255,255,255,1);
+        background-color: transparent;
+      }
+      border: none;
+    }
+  }
+}
diff --git a/src/core_plugins/metrics/public/less/misc.less b/src/core_plugins/metrics/public/less/misc.less
new file mode 100644
index 0000000000000..03928de21b65b
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/misc.less
@@ -0,0 +1,104 @@
+.thor__input {
+  padding: 7px 10px;
+  border-radius: 4px;
+  border: 1px solid @grayLighter;
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 2px @grayLight;
+  }
+}
+
+.thor__yes_no {
+  label {
+    font-weight: normal;
+    margin-right: 10px;
+    input { margin-right: 5px; }
+  }
+}
+
+.thor__button {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  background-color: transparent;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin: 0 0 0 10px;
+  &.sm {
+    padding: 2px 6px;
+    font-size: 0.8em;
+    margin-left: 5px;
+  }
+  &.md {
+    padding: 3px 7px;
+    font-size: 0.9em;
+    margin-left: 5px;
+  }
+}
+
+.create-buttons(@name; @color) {
+  .thor__button-outlined-@{name} {
+    .thor__button;
+    border-color: @color;
+    color: @color !important;
+    &:hover {
+      border-color: darken(@color, 10%);
+      color: darken(@color, 10%) !important;
+    }
+  }
+  .thor__button-solid-@{name} {
+    .thor__button;
+    background-color: @color;
+    color: @white !important;
+    &:hover {
+      background-color: darken(@color, 10%);
+      color: @white !important;
+    }
+  }
+}
+
+
+.create-buttons(gray, @kibanaGray);
+.create-buttons(default, @esBlue);
+.create-buttons(primary, @esGreen);
+.create-buttons(danger, @esRed);
+
+.pui-tooltip { font-size: 12px !important; }
+
+.add_delete__buttons {
+  > * {
+    margin-left: 5px;
+  }
+  .disabled {
+    color: @gray;
+    border-color: @gray;
+  }
+}
+
+.dashboard__visualization {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  padding: 10px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.dashboard__visualization-title {
+  color: rgba(0,0,0,0.6);
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 16px;
+  margin-bottom: 10px;
+  flex: 0 0 auto;
+  &.reversed {
+    color: rgba(255,255,255,0.8);
+  }
+}
diff --git a/src/core_plugins/metrics/public/less/sortable.less b/src/core_plugins/metrics/public/less/sortable.less
new file mode 100644
index 0000000000000..b1b043ca0207f
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/sortable.less
@@ -0,0 +1,38 @@
+.ui-sortable {
+  display: block;
+  position: relative;
+  overflow: visible;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.ui-sortable:before,
+.ui-sortable:after{
+  content: " ";
+  display: table;
+}
+
+.ui-sortable:after{
+  clear: both;
+}
+
+.ui-sortable .ui-sortable-item {
+}
+
+.ui-sortable .ui-sortable-item.ui-sortable-dragging {
+  position: absolute;
+  z-index: 1688;
+}
+
+.ui-sortable .ui-sortable-placeholder {
+  display: none;
+}
+
+.ui-sortable .ui-sortable-placeholder.visible {
+  display: block;
+  opacity: 0.5;
+  z-index: -1;
+}
+
+
diff --git a/src/core_plugins/metrics/public/less/type.less b/src/core_plugins/metrics/public/less/type.less
new file mode 100644
index 0000000000000..0dc3da0a3e429
--- /dev/null
+++ b/src/core_plugins/metrics/public/less/type.less
@@ -0,0 +1,94 @@
+pre, code, tt {
+  border-radius: 0;
+	font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
+}
+h1 { font-size: 30px; }
+h2 { font-size: 26px; }
+h3 { font-size: 22px; }
+h4 { font-size: 18px; }
+h5 { font-size: 16px; }
+h6 { font-size: 16px; }
+
+h1, h2, h3, h4, h5, h6, b, strong {
+	margin:0 0 15px 0;
+	font-weight: bold;
+}
+em, i, dfn {
+	font-style: italic;
+}
+dfn {
+	font-weight:bold;
+}
+p, code, pre, kbd {
+	margin:0 0 15px 0;
+}
+blockquote {
+	margin:0 15px 15px 15px;
+}
+cite {
+	font-style: italic;
+}
+li ul, li ol {
+	margin:0 15px;
+}
+ul, ol {
+	margin:0 15px 15px 15px;
+}
+ul {
+	list-style-type:disc;
+}
+ol {
+	list-style-type:decimal;
+}
+ol ol {
+	list-style: upper-alpha;
+}
+ol ol ol {
+	list-style: lower-roman;
+}
+ol ol ol ol {
+	list-style: lower-alpha;
+}
+dl {
+	margin:0 0 15px 0;
+}
+dl dt {
+	font-weight:bold;
+}
+dd {
+	margin-left:1.5em;
+}
+table {
+	margin-bottom:1.4em;
+	width:100%;
+}
+th {
+	font-weight:bold;
+}
+th, td, caption {
+	padding:4px 15px 4px 5px;
+}
+tfoot {
+	font-style:italic;
+}
+sup, sub {
+	line-height:0;
+}
+abbr, acronym {
+	border-bottom: 1px dotted;
+}
+address {
+	margin:0 0 15px;
+	font-style:italic;
+}
+del {
+	text-decoration: line-through;
+}
+pre {
+	margin: 15px 0;
+	white-space: pre;
+}
+img {
+	max-width: 100%;
+}
+
diff --git a/src/core_plugins/metrics/public/lib/__tests__/add_scope.js b/src/core_plugins/metrics/public/lib/__tests__/add_scope.js
new file mode 100644
index 0000000000000..fb5b413567007
--- /dev/null
+++ b/src/core_plugins/metrics/public/lib/__tests__/add_scope.js
@@ -0,0 +1,58 @@
+// import React from 'react';
+// import { expect } from 'chai';
+// import { shallow } from 'enzyme';
+// import sinon from 'sinon';
+// import addScope from '../add_scope';
+
+// const Component = React.createClass({
+//   render() {
+//     return (<div/>);
+//   }
+// });
+
+// describe('addScope()', () => {
+
+//   let unsubStub;
+//   let watchCollectionStub;
+//   let $scope;
+
+//   beforeEach(() => {
+//     unsubStub = sinon.stub();
+//     watchCollectionStub = sinon.stub().returns(unsubStub);
+//     $scope = {
+//       $watchCollection: watchCollectionStub,
+//       testOne: 1,
+//       testTwo: 2
+//     };
+//   });
+
+//   it('adds $scope variables as props to wrapped component', () => {
+//     const WrappedComponent = addScope(Component, $scope, ['testOne', 'testTwo']);
+//     const wrapper = shallow(<WrappedComponent/>);
+//     expect(wrapper.state('testOne')).to.equal(1);
+//     expect(wrapper.state('testTwo')).to.equal(2);
+//   });
+
+//   it('calls $scope.$watchCollection on each scoped item', () => {
+//     const WrappedComponent = addScope(Component, $scope, ['testOne', 'testTwo']);
+//     const wrapper = shallow(<WrappedComponent/>);
+//     expect(watchCollectionStub.calledTwice).to.equal(true);
+//     expect(watchCollectionStub.firstCall.args[0]).to.equal('testOne');
+//     expect(watchCollectionStub.secondCall.args[0]).to.equal('testTwo');
+//   });
+
+//   it('unsubscribes from watches', () => {
+//     const WrappedComponent = addScope(Component, $scope, ['testOne', 'testTwo']);
+//     const wrapper = shallow(<WrappedComponent/>);
+//     wrapper.unmount();
+//     expect(unsubStub.calledTwice).to.equal(true);
+//   });
+
+//   it('updates state when watch is called', () => {
+//     const WrappedComponent = addScope(Component, $scope, ['testOne']);
+//     const wrapper = shallow(<WrappedComponent/>);
+//     watchCollectionStub.firstCall.args[1].call(null, 3);
+//     expect(wrapper.state('testOne')).to.equal(3);
+//   });
+
+// });
diff --git a/src/core_plugins/metrics/public/lib/__tests__/create_brush_handler.js b/src/core_plugins/metrics/public/lib/__tests__/create_brush_handler.js
new file mode 100644
index 0000000000000..d57f05e4bbf7f
--- /dev/null
+++ b/src/core_plugins/metrics/public/lib/__tests__/create_brush_handler.js
@@ -0,0 +1,33 @@
+import createBrushHandler from '../create_brush_handler';
+import sinon from 'sinon';
+import moment from 'moment';
+import { expect } from 'chai';
+
+describe('createBrushHandler', () => {
+
+  let evalAsyncStub;
+  let $scope;
+  let timefilter;
+  let fn;
+  let range;
+
+  beforeEach(() => {
+    evalAsyncStub = sinon.stub().yields();
+    $scope = { $evalAsync: evalAsyncStub };
+    timefilter = { time: {} };
+    fn = createBrushHandler($scope, timefilter);
+    range = { xaxis: { from: '2017-01-01T00:00:00Z', to: '2017-01-01T00:10:00Z' } };
+    fn(range);
+  });
+
+  it('returns brushHandler() that calls $scope.$evalAsync()', () => {
+    expect(evalAsyncStub.calledOnce).to.equal(true);
+  });
+
+  it('returns brushHandler() that updates timefilter', () => {
+    expect(timefilter.time.from).to.equal(moment(range.xaxis.from).toISOString());
+    expect(timefilter.time.to).to.equal(moment(range.xaxis.to).toISOString());
+    expect(timefilter.time.mode).to.equal('absolute');
+  });
+
+});
diff --git a/src/core_plugins/metrics/public/lib/add_scope.js b/src/core_plugins/metrics/public/lib/add_scope.js
new file mode 100644
index 0000000000000..047501f8fba91
--- /dev/null
+++ b/src/core_plugins/metrics/public/lib/add_scope.js
@@ -0,0 +1,33 @@
+import React from 'react';
+export default function addScope(WrappedComponent, $scope, addToState = []) {
+  return React.createClass({
+
+    getInitialState() {
+      const state = {};
+      addToState.forEach(key => {
+        state[key] = $scope[key];
+      });
+      return state;
+    },
+
+    componentWillMount() {
+      this.unsubs = addToState.map(key => {
+        return $scope.$watchCollection(key, newValue => {
+          const newState = {};
+          newState[key] = newValue;
+          this.setState(newState);
+        });
+      });
+    },
+
+    componentWillUnmount() {
+      this.unsubs.forEach(fn => fn());
+    },
+
+    render() {
+      return (
+        <WrappedComponent {...this.state} {...this.props}/>
+      );
+    }
+  });
+}
diff --git a/src/core_plugins/metrics/public/lib/create_brush_handler.js b/src/core_plugins/metrics/public/lib/create_brush_handler.js
new file mode 100644
index 0000000000000..8b6b5bf315231
--- /dev/null
+++ b/src/core_plugins/metrics/public/lib/create_brush_handler.js
@@ -0,0 +1,8 @@
+import moment from 'moment';
+export default ($scope, timefilter) => ranges => {
+  $scope.$evalAsync(() => {
+    timefilter.time.from = moment(ranges.xaxis.from).toISOString();
+    timefilter.time.to = moment(ranges.xaxis.to).toISOString();
+    timefilter.time.mode = 'absolute';
+  });
+};
diff --git a/src/core_plugins/metrics/public/lib/create_new_panel.js b/src/core_plugins/metrics/public/lib/create_new_panel.js
new file mode 100644
index 0000000000000..181e63b9eee43
--- /dev/null
+++ b/src/core_plugins/metrics/public/lib/create_new_panel.js
@@ -0,0 +1,18 @@
+import newSeriesFn from '../components/lib/new_series_fn';
+import uuid from 'node-uuid';
+export default () => {
+  const id = uuid.v1();
+  return {
+    id,
+    type: 'timeseries',
+    series: [
+      newSeriesFn()
+    ],
+    time_field: '@timestamp',
+    index_pattern: '*',
+    interval: 'auto',
+    axis_position: 'left',
+    axis_formatter: 'number',
+    show_legend: 1
+  };
+};
diff --git a/src/core_plugins/metrics/public/lib/fetch.js b/src/core_plugins/metrics/public/lib/fetch.js
new file mode 100644
index 0000000000000..bfc9e60570a0e
--- /dev/null
+++ b/src/core_plugins/metrics/public/lib/fetch.js
@@ -0,0 +1,32 @@
+export default (
+  timefilter,
+  Private,
+  Notifier,
+  $http
+) => {
+  const dashboardContext = Private(require('plugins/timelion/services/dashboard_context'));
+  const notify = new Notifier({ location: 'Metrics' });
+  return $scope => () => {
+    const panel = $scope.model;
+    if (panel && panel.id) {
+      const params = {
+        timerange: timefilter.getBounds(),
+        filters: [dashboardContext()],
+        panels: [panel]
+      };
+
+      return $http.post('../api/metrics/vis/data', params)
+        .success(resp => {
+          $scope.visData = resp;
+        })
+        .error(resp => {
+          $scope.visData = {};
+          const err = new Error(resp.message);
+          err.stack = resp.stack;
+          notify.error(err);
+        });
+    }
+    return Promise.resolve();
+  };
+};
+
diff --git a/src/core_plugins/metrics/public/lib/fetch_fields.js b/src/core_plugins/metrics/public/lib/fetch_fields.js
new file mode 100644
index 0000000000000..8f0949ed34a7f
--- /dev/null
+++ b/src/core_plugins/metrics/public/lib/fetch_fields.js
@@ -0,0 +1,25 @@
+export default (
+  Notifier,
+  $http
+) => {
+  const notify = new Notifier({ location: 'Metrics' });
+  return $scope => (indexPatterns = ['*']) => {
+    if (!Array.isArray(indexPatterns)) indexPatterns = [indexPatterns];
+    return Promise.all(indexPatterns.map(pattern => {
+      return $http.get(`../api/metrics/fields?index=${pattern}`)
+        .success(resp => {
+          if (!$scope.fields) $scope.fields = {};
+          if (resp.length && pattern) {
+            $scope.fields[pattern] = resp;
+          }
+        })
+        .error(resp => {
+          $scope.visData = {};
+          const err = new Error(resp.message);
+          err.stack = resp.stack;
+          notify.error(err);
+        });
+    }));
+  };
+};
+
diff --git a/src/core_plugins/metrics/public/services/__tests__/executor_provider.js b/src/core_plugins/metrics/public/services/__tests__/executor_provider.js
new file mode 100644
index 0000000000000..62ad9125544a9
--- /dev/null
+++ b/src/core_plugins/metrics/public/services/__tests__/executor_provider.js
@@ -0,0 +1,102 @@
+import { expect } from 'chai';
+import sinon from 'sinon';
+import executorProvider from '../executor_provider';
+import EventEmitter from 'events';
+import Promise from 'bluebird';
+
+describe('$executor service', () => {
+
+  let executor;
+  let timefilter;
+  let $timeout;
+  let execute;
+  let onSpy;
+  let offSpy;
+
+  beforeEach(() => {
+
+    $timeout = sinon.spy(setTimeout);
+    $timeout.cancel = (id) => clearTimeout(id);
+
+    timefilter = new EventEmitter();
+    onSpy = sinon.spy((...args) => timefilter.addListener(...args));
+    offSpy = sinon.spy((...args) => timefilter.removeListener(...args));
+
+    timefilter.on = onSpy;
+    timefilter.off = offSpy;
+
+    timefilter.refreshInterval = {
+      pause: false,
+      value: 0
+    };
+    executor = executorProvider(Promise, $timeout, timefilter);
+  });
+
+  afterEach(() => executor.destroy());
+
+  it('should register listener for fetch upon start', () => {
+    executor.start();
+    expect(onSpy.calledTwice).to.equal(true);
+    expect(onSpy.firstCall.args[0]).to.equal('fetch');
+    expect(onSpy.firstCall.args[1].name).to.equal('reFetch');
+  });
+
+  it('should register listener for update upon start', () => {
+    executor.start();
+    expect(onSpy.calledTwice).to.equal(true);
+    expect(onSpy.secondCall.args[0]).to.equal('update');
+    expect(onSpy.secondCall.args[1].name).to.equal('killIfPaused');
+  });
+
+  it('should not call $timeout if the timefilter is not paused and set to zero', () => {
+    executor.start();
+    expect($timeout.callCount).to.equal(0);
+  });
+
+  it('should call $timeout if the timefilter is not paused and set to 1000ms', () => {
+    timefilter.refreshInterval.value = 1000;
+    executor.start();
+    expect($timeout.callCount).to.equal(1);
+  });
+
+  it('should execute function if ingorePause is passed (interval set to 1000ms)', (done) => {
+    timefilter.refreshInterval.value = 1000;
+    executor.register({ execute: () => done() });
+    executor.start({ ignorePaused: true });
+  });
+
+  it('should execute function if timefilter is not paused and interval set to 1000ms', (done) => {
+    timefilter.refreshInterval.value = 1000;
+    executor.register({ execute: () => done() });
+    executor.start();
+  });
+
+  it('should execute function multiple times', (done) => {
+    let calls = 0;
+    timefilter.refreshInterval.value = 10;
+    executor.register({ execute: () => {
+      if (calls++ > 1) done();
+      return Promise.resolve();
+    } });
+    executor.start();
+  });
+
+  it('should call handleResponse', (done) => {
+    timefilter.refreshInterval.value = 10;
+    executor.register({
+      execute: () => Promise.resolve(),
+      handleResponse: () => done()
+    });
+    executor.start();
+  });
+
+  it('should call handleError', (done) => {
+    timefilter.refreshInterval.value = 10;
+    executor.register({
+      execute: () => Promise.reject(),
+      handleError: () => done()
+    });
+    executor.start();
+  });
+
+});
diff --git a/src/core_plugins/metrics/public/services/executor.js b/src/core_plugins/metrics/public/services/executor.js
new file mode 100644
index 0000000000000..98b5e06586e6e
--- /dev/null
+++ b/src/core_plugins/metrics/public/services/executor.js
@@ -0,0 +1,4 @@
+import uiModules from 'ui/modules';
+import executorProvider from './executor_provider';
+const uiModule = uiModules.get('kibana/metrics_vis/executor', []);
+uiModule.service('metricsExecutor', executorProvider);
diff --git a/src/core_plugins/metrics/public/services/executor_provider.js b/src/core_plugins/metrics/public/services/executor_provider.js
new file mode 100644
index 0000000000000..b59dc33e98b94
--- /dev/null
+++ b/src/core_plugins/metrics/public/services/executor_provider.js
@@ -0,0 +1,110 @@
+import _ from 'lodash';
+export default function executorProvider(Promise, $timeout, timefilter) {
+
+  const queue = [];
+  let executionTimer;
+  let ignorePaused = false;
+
+  /**
+   * Resets the timer to start again
+   * @returns {void}
+   */
+  function reset() {
+    cancel();
+    start();
+  }
+
+  function killTimer() {
+    if (executionTimer) $timeout.cancel(executionTimer);
+  }
+
+  /**
+   * Cancels the execution timer
+   * @returns {void}
+   */
+  function cancel() {
+    killTimer();
+    timefilter.off('update', killIfPaused);
+    timefilter.off('fetch', reFetch);
+  }
+
+  /**
+   * Registers a service with the executor
+   * @param {object} service The service to register
+   * @returns {void}
+   */
+  function register(service) {
+    queue.push(service);
+  }
+
+  /**
+   * Stops the executor and empties the service queue
+   * @returns {void}
+   */
+  function destroy() {
+    cancel();
+    ignorePaused = false;
+    queue.splice(0, queue.length);
+  }
+
+  /**
+   * Runs the queue (all at once)
+   * @returns {Promise} a promise of all the services
+   */
+  function run() {
+    const noop = () => Promise.resolve();
+    return Promise.all(queue.map((service) => {
+      return service.execute()
+        .then(service.handleResponse || noop)
+        .catch(service.handleError || noop);
+    }))
+    .finally(reset);
+  }
+
+  function reFetch(_changes) {
+    cancel();
+    run();
+  }
+
+  function killIfPaused() {
+    if (timefilter.refreshInterval.pause) {
+      killTimer();
+    }
+  }
+
+  /**
+   * Starts the executor service if the timefilter is not paused
+   * @returns {void}
+   */
+  function start() {
+    timefilter.on('fetch', reFetch);
+    timefilter.on('update', killIfPaused);
+    if ((ignorePaused || timefilter.refreshInterval.pause === false) && timefilter.refreshInterval.value > 0) {
+      executionTimer = $timeout(run, timefilter.refreshInterval.value);
+    }
+  }
+
+  /**
+   * Expose the methods
+   */
+  return {
+    register,
+    start(options = {}) {
+      options = _.defaults(options, {
+        ignorePaused: false,
+        now: false
+      });
+      if (options.now) {
+        return run();
+      }
+      if (options.ignorePaused) {
+        ignorePaused = options.ignorePaused;
+      }
+      start();
+    },
+    run,
+    destroy,
+    reset,
+    cancel
+  };
+}
diff --git a/src/core_plugins/metrics/public/visualizations/components/annotation.js b/src/core_plugins/metrics/public/visualizations/components/annotation.js
new file mode 100644
index 0000000000000..c1af84500cc9e
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/annotation.js
@@ -0,0 +1,73 @@
+import React, { Component, PropTypes } from 'react';
+import moment from 'moment';
+import reactcss from 'reactcss';
+class Annotation extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showTooltip: false
+    };
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+  }
+
+  renderTooltip() {
+    if (!this.state.showTooltip) return null;
+    const [ timestamp, messageSource ] = this.props.series;
+    const reversed = this.props.reversed ? '-reversed' : '';
+    const messages = messageSource.map((message, i) => {
+      return (
+        <div key={`${message}-${i}`}
+          className="annotation__message">{ message }</div>
+      );
+    });
+    return (
+      <div className="annotation__tooltip">
+        <div className={`annotation__tooltip-body${reversed}`}>
+          <div className={`annotation__timestamp${reversed}`}>{ moment(timestamp).format('lll') }</div>
+          { messages }
+        </div>
+        <div className={`annotation__caret${reversed}`}></div>
+      </div>
+    );
+  }
+
+  handleMouseOver() {
+    this.setState({ showTooltip: true });
+  }
+
+  handleMouseOut() {
+    this.setState({ showTooltip: false });
+  }
+
+  render() {
+    const { color, plot, icon, series } = this.props;
+    const offset = plot.pointOffset({ x: series[0], y: 0 });
+    const style = { left: offset.left - 6, bottom: 0, top: 5 };
+    const tooltip = this.renderTooltip();
+    return(
+      <div className="annotation" style={style}>
+        <div className="annotation__line" style={{ width: 2, backgroundColor: color }}></div>
+        <div
+          onMouseOver={this.handleMouseOver}
+          onMouseOut={this.handleMouseOut}
+          className="annotation__icon">
+          <i className={`fa ${icon}`} style={{ color }}></i>
+          { tooltip }
+        </div>
+      </div>
+    );
+  }
+
+}
+
+Annotation.propTypes = {
+  series: PropTypes.array,
+  icon: PropTypes.string,
+  color: PropTypes.string,
+  plot: PropTypes.object,
+  reversed: PropTypes.bool
+};
+
+export default Annotation;
diff --git a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
new file mode 100644
index 0000000000000..fd139a908ea59
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
@@ -0,0 +1,261 @@
+import React, { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
+import _ from 'lodash';
+import $ from '../lib/flot';
+import eventBus from '../lib/events';
+import ResizeAware from 'simianhacker-react-resize-aware';
+import calculateBarWidth from '../lib/calculate_bar_width';
+import colors from '../lib/colors';
+
+class FlotChart extends Component {
+
+  shouldComponentUpdate(props, state) {
+    if (!this.plot) return true;
+    if (props.reversed !== this.props.reversed) {
+      return true;
+    }
+    if (props.yaxes && this.props.yaxes) {
+      // We need to rerender if the axis change
+      const valuesChanged = props.yaxes.some((axis, i) => {
+        if (this.props.yaxes[i]) {
+          return axis.position !== this.props.yaxes[i].position ||
+          axis.max !== this.props.yaxes[i].max ||
+          axis.min !== this.props.yaxes[i].min;
+        }
+      });
+      if (props.yaxes.length !== this.props.yaxes.length || valuesChanged) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  shutdownChart() {
+    if (!this.plot) return;
+    $(this.target).unbind('plothover', this.props.plothover);
+    if (this.props.onMouseOver) $(this.target).on('plothover', this.handleMouseOver);
+    if (this.props.onMouseLeave) $(this.target).on('mouseleave', this.handleMouseLeave);
+    if (this.props.onBrush) $(this.target).off('plotselected', this.brushChart);
+    this.plot.shutdown();
+    if (this.props.crosshair) {
+      $(this.target).off('plothover', this.handlePlotover);
+      eventBus.off('thorPlotover', this.handleThorPlotover);
+      eventBus.off('thorPlotleave', this.handleThorPlotleave);
+    }
+    findDOMNode(this.resize).removeEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    this.shutdownChart();
+  }
+
+  filterByShow(show) {
+    if (show) {
+      return (metric) => {
+        return show.some(id => _.startsWith(id, metric.id));
+      };
+    }
+    return (metric) => true;
+  }
+
+  componentWillReceiveProps(newProps) {
+    if (this.plot) {
+      const { series, markings } = newProps;
+      const options = this.plot.getOptions();
+      _.set(options, 'series.bars.barWidth', calculateBarWidth(series));
+      this.plot.setData(this.calculateData(series, newProps.show));
+      this.plot.setupGrid();
+      this.plot.draw();
+      if (!_.isEqual(this.props.series, series)) this.handleDraw(this.plot);
+    } else {
+      this.renderChart();
+    }
+  }
+
+  componentDidMount() {
+    this.renderChart();
+  }
+
+  componentDidUpdate() {
+    this.shutdownChart();
+    this.renderChart();
+  }
+
+  calculateData(data, show) {
+    const series = [];
+    return _(data)
+      .filter(this.filterByShow(show))
+      .map((set) => {
+        if (_.isPlainObject(set)) {
+          return set;
+        }
+        return {
+          color: '#990000',
+          data: set
+        };
+      }).reverse().value();
+  }
+
+  handleDraw(plot, canvasContext) {
+    if (this.props.onDraw) this.props.onDraw(plot);
+  }
+
+  getOptions() {
+    const yaxes = this.props.yaxes || [{}];
+
+    const lineColor = this.props.reversed ? colors.lineColorReversed : colors.lineColor;
+    const textColor = this.props.reversed ? colors.textColorReversed : colors.textColor;
+    const valueColor = this.props.reversed ? colors.valueColorReversed : colors.valueColor;
+
+    const opts = {
+      legend: { show: false },
+      yaxes: yaxes,
+      yaxis: {
+        color: lineColor,
+        font: { color: textColor },
+        tickFormatter: this.props.tickFormatter
+      },
+      xaxis: {
+        color: lineColor,
+        timezone: 'browser',
+        mode: 'time',
+        font: { color: textColor }
+      },
+      series: {
+        shadowSize: 0
+      },
+      grid: {
+        margin: 0,
+        borderWidth: 1,
+        borderColor: lineColor,
+        hoverable: true,
+        mouseActiveRadius: 200,
+      }
+    };
+
+    if (this.props.crosshair) {
+      _.set(opts, 'crosshair', {
+        mode: 'x',
+        color: this.props.reversed ? '#FFF' : '#000',
+        lineWidth: 1
+      });
+    }
+
+    if (this.props.onBrush) {
+      _.set(opts, 'selection', { mode: 'x', color: textColor });
+    }
+    _.set(opts, 'series.bars.barWidth', calculateBarWidth(this.props.series));
+    return _.assign(opts, this.props.options);
+  }
+
+  renderChart() {
+    const resize = findDOMNode(this.resize);
+
+    if (resize.clientWidth > 0 && resize.clientHeight > 0) {
+      const { series } = this.props;
+      const parent = $(this.target.parentElement);
+      const data = this.calculateData(series, this.props.show);
+
+      this.plot = $.plot(this.target, data, this.getOptions());
+      this.handleDraw(this.plot);
+
+      this.handleResize = (e) => {
+        const resize = findDOMNode(this.resize);
+        if (resize && resize.clientHeight > 0 && resize.clientHeight > 0) {
+          if (!this.plot) return;
+          this.plot.resize();
+          this.plot.setupGrid();
+          this.plot.draw();
+          this.handleDraw(this.plot);
+        }
+      };
+
+      _.defer(() => this.handleResize());
+      findDOMNode(this.resize).addEventListener('resize', this.handleResize);
+
+
+      this.handleMouseOver = (...args) => {
+        if (this.props.onMouseOver) this.props.onMouseOver(...args, this.plot);
+      };
+
+      this.handleMouseLeave = (...args) => {
+        if (this.props.onMouseLeave) this.props.onMouseLeave(...args, this.plot);
+      };
+
+      $(this.target).on('plothover', this.handleMouseOver);
+      $(this.target).on('mouseleave', this.handleMouseLeave);
+
+      if (this.props.crosshair) {
+
+
+        this.handleThorPlotover = (e, pos, item, originalPlot) => {
+          if (this.plot !== originalPlot) {
+            this.plot.setCrosshair({ x: _.get(pos, 'x') });
+            this.props.plothover(e, pos, item);
+          }
+        };
+
+        this.handlePlotover = (e, pos, item) => eventBus.trigger('thorPlotover', [pos, item, this.plot]);
+        this.handlePlotleave = (e) => eventBus.trigger('thorPlotleave');
+        this.handleThorPlotleave = (e) =>  {
+          this.plot.clearCrosshair();
+          if (this.props.plothover) this.props.plothover(e);
+        };
+
+        $(this.target).on('plothover', this.handlePlotover);
+        $(this.target).on('mouseleave', this.handlePlotleave);
+        eventBus.on('thorPlotover', this.handleThorPlotover);
+        eventBus.on('thorPlotleave', this.handleThorPlotleave);
+      }
+
+      if (_.isFunction(this.props.plothover)) {
+        $(this.target).bind('plothover', this.props.plothover);
+      }
+
+      $(this.target).on('mouseleave', (e) => {
+        eventBus.trigger('thorPlotleave');
+      });
+
+      if (_.isFunction(this.props.onBrush)) {
+        this.brushChart = (e, ranges) => {
+          this.props.onBrush(ranges);
+          this.plot.clearSelection();
+        };
+
+        $(this.target).on('plotselected', this.brushChart);
+      }
+    }
+  }
+
+  render() {
+    const style = {
+      position: 'relative',
+      display: 'flex',
+      rowDirection: 'column',
+      flex: '1 0 auto',
+    };
+    return (
+      <ResizeAware ref={(el) => this.resize = el} style={style}>
+        <div ref={(el) => this.target = el} style={style}/>
+      </ResizeAware>);
+  }
+
+}
+
+FlotChart.propTypes = {
+  crosshair: PropTypes.bool,
+  onBrush: PropTypes.func,
+  onPlotCreate: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  options: PropTypes.object,
+  plothover: PropTypes.func,
+  reversed: PropTypes.bool,
+  series: PropTypes.array,
+  show: PropTypes.array,
+  tickFormatter: PropTypes.func,
+  yaxes: PropTypes.array,
+};
+
+export default FlotChart;
+
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge.js b/src/core_plugins/metrics/public/visualizations/components/gauge.js
new file mode 100644
index 0000000000000..eaf624aeec74b
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge.js
@@ -0,0 +1,199 @@
+import _ from 'lodash';
+import numeral from 'numeral';
+import React, { Component, PropTypes } from 'react';
+import $ from '../lib/flot';
+import getLastValue from '../lib/get_last_value';
+import getValueBy from '../lib/get_value_by';
+import ResizeAware from 'simianhacker-react-resize-aware';
+import GaugeVis from './gauge_vis';
+import { findDOMNode } from 'react-dom';
+import reactcss from 'reactcss';
+
+class Gauge extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      scale: 1,
+      top: 0,
+      left: 0,
+      translateX: 1,
+      translateY: 1
+    };
+
+    this.handleResize = this.handleResize.bind(this);
+  }
+
+  calculateCorrdinates() {
+    const inner = findDOMNode(this.inner);
+    const resize = findDOMNode(this.resize);
+    let scale = this.state.scale;
+
+    if (!inner || !resize) return;
+
+    // Let's start by scaling to the largest dimension
+    if (resize.clientWidth - resize.clientHeight < 0) {
+      scale = resize.clientWidth / inner.clientWidth;
+    } else {
+      scale = resize.clientHeight / inner.clientHeight;
+    }
+    let [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
+
+    // Now we need to check to see if it will still fit
+    if (newWidth > resize.clientWidth) {
+      scale = resize.clientWidth / inner.clientWidth;
+    }
+    if (newHeight > resize.clientHeight) {
+      scale = resize.clientHeight / inner.clientHeight;
+    }
+
+    // Calculate the final dimensions
+    [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
+
+    // Because scale is middle out we need to translate
+    // the new X,Y corrdinates
+    const translateX = (newWidth - inner.clientWidth) / 2;
+    const translateY = (newHeight - inner.clientHeight) / 2;
+
+    // Center up and down
+    const top = Math.floor((resize.clientHeight - newHeight) / 2);
+    const left = Math.floor((resize.clientWidth - newWidth) / 2);
+
+    return { scale, top, left, translateY, translateX };
+  }
+
+  componentDidMount() {
+    const resize = findDOMNode(this.resize);
+    if (!resize) return;
+    resize.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  }
+
+  componentWillUnmount() {
+    const resize = findDOMNode(this.resize);
+    if (!resize) return;
+    resize.removeEventListener('resize', this.handleResize);
+  }
+
+  // When the component updates it might need to be resized so we need to
+  // recalculate the corrdinates and only update if things changed a little. THis
+  // happens when the number is too wide or you add a new series.
+  componentDidUpdate() {
+    const newState = this.calculateCorrdinates();
+    if (newState && !_.isEqual(newState, this.state)) {
+      this.setState(newState);
+    }
+  }
+
+  calcDimensions(el, scale) {
+    const newWidth = Math.floor(el.clientWidth * scale);
+    const newHeight = Math.floor(el.clientHeight * scale);
+    return [newWidth, newHeight];
+  }
+
+  handleResize() {
+    // Bingo!
+    const newState = this.calculateCorrdinates();
+    newState && this.setState(newState);
+  }
+
+  render() {
+    const { metric, type } = this.props;
+    const { scale, translateX, translateY, top, left } = this.state;
+    const value = metric && getLastValue(metric.data, 5) || 0;
+    const max = metric && getValueBy('max', metric.data) || 1;
+    const formatter = (metric && (metric.tickFormatter || metric.formatter)) ||
+      this.props.tickFormatter || ((v) => v);
+    const title = metric && metric.label || '';
+    const styles = reactcss({
+      default: {
+        inner: {
+          top: this.state.top || 0,
+          left: this.state.left || 0,
+          transform: `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`
+        }
+      }
+    }, this.props);
+
+    const gaugeProps = {
+      reversed: this.props.reversed,
+      value,
+      gaugeLine: this.props.gaugeLine,
+      innerLine: this.props.innerLine,
+      innerColor: this.props.innerColor,
+      max: this.props.max || max,
+      color: metric && metric.color || '#8ac336',
+      type
+    };
+    const valueStyle = {};
+    if (this.props.valueColor) {
+      valueStyle.color = this.props.valueColor;
+    }
+
+    let metrics;
+    if (metric) {
+      if (type === 'half') {
+        metrics = (
+          <div
+            className="thorHalfGauge__metrics"
+            ref={(el) => this.inner = el}
+            style={styles.inner}>
+            <div
+              className="thorHalfGauge__label"
+              ref="title">{ title }</div>
+            <div
+              className="thorHalfGauge__value"
+              style={valueStyle}
+              ref="label">{ formatter(value) }</div>
+          </div>
+        );
+      } else {
+        metrics = (
+          <div
+            className="thorCircleGauge__metrics"
+            ref="inner"
+            style={styles.inner}>
+            <div
+              className="thorCircleGauge__value"
+              style={valueStyle}
+              ref="label">{ formatter(value) }</div>
+            <div
+              className="thorCircleGauge__label"
+              ref="title">{ title }</div>
+          </div>
+        );
+      }
+    }
+    let className = type === 'half' ? 'thorHalfGauge' : 'thorCircleGauge';
+    if (this.props.reversed) className = `reversed ${className}`;
+    return (
+      <div className={className}>
+        <ResizeAware className={`${className}__resize`} ref={(el) => this.resize = el}>
+          { metrics }
+          <GaugeVis {...gaugeProps}/>
+        </ResizeAware>
+      </div>
+    );
+  }
+
+}
+
+Gauge.defaultProps = {
+  type: 'half',
+  innerLine: 2,
+  gaugeLine: 10
+};
+
+Gauge.propTypes = {
+  gaugeLine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerLine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  metric: PropTypes.object,
+  reversed: PropTypes.bool,
+  type: PropTypes.oneOf(['half', 'circle']),
+  valueColor: PropTypes.string,
+};
+
+export default Gauge;
+
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
new file mode 100644
index 0000000000000..2ca2e8448a58a
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
@@ -0,0 +1,193 @@
+import React, { Component, PropTypes } from 'react';
+import $ from '../lib/flot';
+import ResizeAware from 'simianhacker-react-resize-aware';
+import _ from 'lodash';
+import { findDOMNode } from 'react-dom';
+import reactcss from 'reactcss';
+
+class GaugeVis extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      scale: 1,
+      top: 0,
+      left: 0,
+      translateX: 1,
+      translateY: 1
+    };
+    this.handleResize = this.handleResize.bind(this);
+  }
+
+  calculateCorrdinates() {
+    const inner = findDOMNode(this.inner);
+    const resize = findDOMNode(this.resize);
+    let scale = this.state.scale;
+
+    // Let's start by scaling to the largest dimension
+    if (resize.clientWidth - resize.clientHeight < 0) {
+      scale = resize.clientWidth / inner.clientWidth;
+    } else {
+      scale = resize.clientHeight / inner.clientHeight;
+    }
+    let [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
+
+    // Now we need to check to see if it will still fit
+    if (newWidth > resize.clientWidth) {
+      scale = resize.clientWidth / inner.clientWidth;
+    }
+    if (newHeight > resize.clientHeight) {
+      scale = resize.clientHeight / inner.clientHeight;
+    }
+
+    // Calculate the final dimensions
+    [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
+
+    // Because scale is middle out we need to translate
+    // the new X,Y corrdinates
+    const translateX = (newWidth - inner.clientWidth) / 2;
+    const translateY = (newHeight - inner.clientHeight) / 2;
+
+    // Center up and down
+    const top = Math.floor((resize.clientHeight - newHeight) / 2);
+    const left = Math.floor((resize.clientWidth - newWidth) / 2);
+
+    return { scale, top, left, translateY, translateX };
+  }
+
+  componentDidMount() {
+    const resize = findDOMNode(this.resize);
+    if (!resize) return;
+    resize.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  }
+
+  componentWillUnmount() {
+    const resize = findDOMNode(this.resize);
+    if (!resize) return;
+    resize.removeEventListener('resize', this.handleResize);
+  }
+
+  // When the component updates it might need to be resized so we need to
+  // recalculate the corrdinates and only update if things changed a little. THis
+  // happens when the number is too wide or you add a new series.
+  componentDidUpdate() {
+    const newState = this.calculateCorrdinates();
+    if (newState && !_.isEqual(newState, this.state)) {
+      this.setState(newState);
+    }
+  }
+
+  calcDimensions(el, scale) {
+    const newWidth = Math.floor(el.clientWidth * scale);
+    const newHeight = Math.floor(el.clientHeight * scale);
+    return [newWidth, newHeight];
+  }
+
+  handleResize() {
+    // Bingo!
+    const newState = this.calculateCorrdinates();
+    newState && this.setState(newState);
+  }
+
+  render() {
+    const { type, value, max, color, reversed } = this.props;
+    const { scale, translateX, translateY, top, left } = this.state;
+    const size = 2 * Math.PI * 50;
+    const sliceSize = type === 'half' ? 0.6 : 1;
+    const percent = value < max ? value / max : 1;
+    const styles = reactcss({
+      default: {
+        resize: {
+          position: 'relative',
+          display: 'flex',
+          rowDirection: 'column',
+          flex: '1 0 auto'
+        },
+        svg: {
+          position: 'absolute',
+          top: this.state.top,
+          left: this.state.left,
+          transform: `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`
+        }
+      }
+    }, this.props);
+
+    const props = {
+      circle: {
+        r: 50,
+        cx: 60,
+        cy: 60,
+        fill: 'rgba(0,0,0,0)',
+        stroke: color,
+        strokeWidth: this.props.gaugeLine,
+        strokeDasharray: `${(percent * sliceSize) * size} ${size}`,
+        transform: 'rotate(-90 60 60)',
+      },
+      circleBackground: {
+        r: 50,
+        cx: 60,
+        cy: 60,
+        fill: 'rgba(0,0,0,0)',
+        stroke: this.props.reversed ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)',
+        strokeDasharray: `${sliceSize * size} ${size}`,
+        strokeWidth: this.props.innerLine
+      }
+    };
+
+    if (type === 'half') {
+      styles.svg.transform = `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
+      props.circle.transform = 'rotate(-197.8 60 60)';
+      props.circleBackground.transform = 'rotate(162 60 60)';
+    }
+
+    if (this.props.innerColor) {
+      props.circleBackground.stroke = this.props.innerColor;
+    }
+
+    let svg;
+    if (type === 'half') {
+      svg = (
+        <svg width={120.72} height={78.72}>
+          <circle {...props.circleBackground} style={{ strokeWidth: this.props.innerLine }}/>
+          <circle {...props.circle} style={{ strokeWidth: this.props.gaugeLine }}/>
+        </svg>
+      );
+    } else {
+      svg = (
+        <svg width={120.72} height={120.72}>
+          <circle {...props.circleBackground}/>
+          <circle {...props.circle}/>
+        </svg>
+      );
+    }
+    return (
+      <ResizeAware ref={(el) => this.resize = el} style={styles.resize}>
+        <div style={styles.svg} ref={(el) => this.inner = el}>
+          {svg}
+        </div>
+      </ResizeAware>
+    );
+  }
+
+}
+
+GaugeVis.defaultProps = {
+  innerLine: 2,
+  gaugeLine: 10
+};
+
+GaugeVis.propTypes = {
+  color: PropTypes.string,
+  gaugeLine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerLine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  metric: PropTypes.object,
+  reversed: PropTypes.bool,
+  value: PropTypes.number,
+  type: PropTypes.oneOf(['half', 'circle'])
+};
+
+export default GaugeVis;
+
diff --git a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
new file mode 100644
index 0000000000000..4b6bc4a0dedb2
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
@@ -0,0 +1,36 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+import createLegendSeries from '../lib/create_legend_series';
+
+function HorizontalLegend(props) {
+  const rows = props.series.map(createLegendSeries(props));
+  const legendStyle = { };
+  let legendControlClass = 'fa fa-chevron-down';
+  if (!props.showLegend) {
+    legendStyle.display = 'none';
+    legendControlClass = 'fa fa-chevron-up';
+  }
+  return (
+    <div className="rhythm_chart__legend-horizontal">
+      <div className="rhythm_chart__legend-control">
+        <i className={legendControlClass} onClick={props.onClick}/>
+      </div>
+      <div className="rhythm_chart__legend-series" style={legendStyle}>
+        { rows }
+      </div>
+    </div>
+  );
+}
+
+HorizontalLegend.propTypes = {
+  legendPosition: PropTypes.string,
+  onClick: PropTypes.func,
+  onToggle: PropTypes.func,
+  series: PropTypes.array,
+  showLegend: PropTypes.bool,
+  seriesValues: PropTypes.object,
+  seriesFilter: PropTypes.array,
+  tickFormatter: PropTypes.func
+};
+
+export default HorizontalLegend;
diff --git a/src/core_plugins/metrics/public/visualizations/components/legend.js b/src/core_plugins/metrics/public/visualizations/components/legend.js
new file mode 100644
index 0000000000000..ea1a77d43169b
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/legend.js
@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+import VerticalLegend from './vertical_legend';
+import HorizontalLegend from './horizontal_legend';
+
+function Legend(props) {
+  if (props.legendPosition === 'bottom') {
+    return (<HorizontalLegend {...props}/>);
+  }
+  return (<VerticalLegend {...props}/>);
+}
+
+Legend.propTypes = {
+  legendPosition: PropTypes.string,
+  onClick: PropTypes.func,
+  onToggle: PropTypes.func,
+  series: PropTypes.array,
+  showLegend: PropTypes.bool,
+  seriesValues: PropTypes.object,
+  seriesFilter: PropTypes.array,
+  tickFormatter: PropTypes.func
+};
+
+export default Legend;
diff --git a/src/core_plugins/metrics/public/visualizations/components/metric.js b/src/core_plugins/metrics/public/visualizations/components/metric.js
new file mode 100644
index 0000000000000..6dd62aef397c1
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/metric.js
@@ -0,0 +1,186 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import { findDOMNode } from 'react-dom';
+import ResizeAware from 'simianhacker-react-resize-aware';
+import getLastValue from '../lib/get_last_value';
+import reactcss from 'reactcss';
+
+class Metric extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      scale: 1,
+      left: 0,
+      top: 0,
+      translateX: 1,
+      translateY: 1
+    };
+    this.handleResize = this.handleResize.bind(this);
+  }
+
+  componentDidMount() {
+    const resize = findDOMNode(this.resize);
+    if (!resize) return;
+    resize.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  }
+
+  componentWillUnmount() {
+    const resize = findDOMNode(this.resize);
+    if (!resize) return;
+    resize.removeEventListener('resize', this.handleResize);
+  }
+
+  calculateCorrdinates() {
+    const inner = findDOMNode(this.inner);
+    const resize = findDOMNode(this.resize);
+    let scale = this.state.scale;
+
+    if (!resize) return;
+
+    // Let's start by scaling to the largest dimension
+    if (resize.clientWidth - resize.clientHeight < 0) {
+      scale = resize.clientWidth / inner.clientWidth;
+    } else {
+      scale = resize.clientHeight / inner.clientHeight;
+    }
+    let [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
+
+    // Now we need to check to see if it will still fit
+    if (newWidth > resize.clientWidth) {
+      scale = resize.clientWidth / inner.clientWidth;
+    }
+    if (newHeight > resize.clientHeight) {
+      scale = resize.clientHeight / inner.clientHeight;
+    }
+
+    // Calculate the final dimensions
+    [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
+
+    // Because scale is middle out we need to translate
+    // the new X,Y corrdinates
+    const translateX = (newWidth - inner.clientWidth) / 2;
+    const translateY = (newHeight - inner.clientHeight) / 2;
+
+    // Center up and down
+    const top = Math.floor((resize.clientHeight - newHeight) / 2);
+    const left = Math.floor((resize.clientWidth - newWidth) / 2);
+
+    return { scale, top, left, translateY, translateX };
+  }
+
+  // When the component updates it might need to be resized so we need to
+  // recalculate the corrdinates and only update if things changed a little. THis
+  // happens when the number is too wide or you add a new series.
+  componentDidUpdate() {
+    const newState = this.calculateCorrdinates();
+    if (!_.isEqual(newState, this.state)) {
+      this.setState(newState);
+    }
+  }
+
+  calcDimensions(el, scale) {
+    const newWidth = Math.floor(el.clientWidth * scale);
+    const newHeight = Math.floor(el.clientHeight * scale);
+    return [newWidth, newHeight];
+  }
+
+  handleResize() {
+    // Bingo!
+    const newState = this.calculateCorrdinates();
+    this.setState(newState);
+  }
+
+  render() {
+    const { metric, secondary } = this.props;
+    const { scale, translateX, translateY, top, left } = this.state;
+    const primaryFormatter = metric && (metric.tickFormatter || metric.formatter) || (n => n);
+    const primaryValue = primaryFormatter(getLastValue(metric && metric.data || 0));
+    const styles = reactcss({
+      default: {
+        container: {},
+        inner: {
+          top: this.state.top || 0,
+          left: this.state.left || 0,
+          transform: `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`
+        },
+        primary_text: {
+          color: 'rgba(0,0,0,0.5)'
+        },
+        primary_value: {
+          color: '#000'
+        },
+        secondary_text: {
+          color: 'rgba(0,0,0,0.5)'
+        },
+        secondary_value: {
+          color: '#000'
+        }
+      },
+      reversed: {
+        primary_text: {
+          color: 'rgba(255,255,255,0.7)'
+        },
+        primary_value: {
+          color: '#FFF'
+        },
+        secondary_text: {
+          color: 'rgba(255,255,255,0.7)'
+        },
+        secondary_value: {
+          color: '#FFF'
+        }
+
+      }
+    }, this.props);
+
+    if (this.props.backgroundColor) styles.container.backgroundColor = this.props.backgroundColor;
+    if (metric && metric.color) styles.primary_value.color = metric.color;
+    let primaryLabel;
+    if (metric && metric.label) {
+      primaryLabel = (<div style={styles.primary_text} className="rhythm_metric__primary-label">{ metric.label }</div>);
+    }
+
+    let secondarySnippet;
+    if (secondary) {
+      const secondaryFormatter = secondary.formatter || (n => n);
+      const secondaryValue = secondaryFormatter(getLastValue(secondary.data));
+      if (secondary.color) styles.secondary_value.color = secondary.color;
+      let secondaryLabel;
+      if (secondary.label) {
+        secondaryLabel = (<div style={styles.secondary_text} className="rhythm_metric__secondary-label">{ secondary.label }</div>);
+      }
+      secondarySnippet = (
+        <div className="rhythm_metric__secondary">
+          { secondaryLabel }
+          <div style={styles.secondary_value} className="rhythm_metric__secondary-value">{ secondaryValue }</div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="rhythm_metric" style={styles.container}>
+        <ResizeAware ref={(el) => this.resize = el} className="rhythm_metric__resize">
+          <div ref={(el) => this.inner = el} className="rhythm_metric__inner" style={styles.inner}>
+            <div className="rhythm_metric__primary">
+              { primaryLabel }
+              <div style={styles.primary_value} className="rhythm_metric__primary-value">{ primaryValue }</div>
+            </div>
+            { secondarySnippet }
+          </div>
+        </ResizeAware>
+      </div>
+    );
+  }
+
+}
+
+Metric.propTypes = {
+  backgroundColor: PropTypes.string,
+  metric: PropTypes.object,
+  secondary: PropTypes.object,
+  reversed: PropTypes.bool
+};
+
+export default Metric;
diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
new file mode 100644
index 0000000000000..151c606c26829
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
@@ -0,0 +1,164 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import getLastValue from '../lib/get_last_value';
+import TimeseriesChart from './timeseries_chart';
+import Legend from './legend';
+import eventBus from '../lib/events';
+
+class Timeseries extends Component {
+
+  constructor(props) {
+    super(props);
+    const values = this.getLastValues(props);
+    this.state = {
+      showLegend: props.legend != null ? props.legend : true,
+      values: values || {},
+      show: _.keys(values) || [],
+      ignoreLegendUpdates: false,
+      ignoreVisabilityUpdates: false
+    };
+    this.toggleFilter = this.toggleFilter.bind(this);
+    this.handleHideClick = this.handleHideClick.bind(this);
+    this.plothover = this.plothover.bind(this);
+  }
+
+  filterLegend(id) {
+    if (!_.has(this.state.values, id)) return [];
+    const notAllShown = _.keys(this.state.values).length !== this.state.show.length;
+    const isCurrentlyShown = _.includes(this.state.show, id);
+    const show = [];
+    if (notAllShown && isCurrentlyShown) {
+      this.setState({ ignoreVisabilityUpdates: false, show: Object.keys(this.state.values) });
+    } else {
+      show.push(id);
+      this.setState({ ignoreVisabilityUpdates: true, show: [id] });
+    }
+    return show;
+  }
+
+  toggleFilter(event, id) {
+    const show = this.filterLegend(id);
+    if (_.isFunction(this.props.onFilter)) {
+      this.props.onFilter(show);
+    }
+    eventBus.trigger('toggleFilter', id, this);
+  }
+
+  getLastValues(props) {
+    const values = {};
+    props.series.forEach((row) => {
+      // we need a valid identifier
+      if (!row.id) row.id = row.label;
+      values[row.id] = getLastValue(row.data);
+    });
+    return values;
+  }
+
+  updateLegend(pos, item) {
+    const values = {};
+    if (pos) {
+      this.props.series.forEach((row) => {
+        if (row.data && _.isArray(row.data)) {
+          if (item && row.data[item.dataIndex] && row.data[item.dataIndex][0] === item.datapoint[0]) {
+            values[row.id] = row.data[item.dataIndex][1];
+          } else {
+            let closest;
+            for (let i = 0; i < row.data.length; i++) {
+              closest = i;
+              if (row.data[i] && pos.x < row.data[i][0]) break;
+            }
+            if (!row.data[closest]) return values[row.id] = null;
+            const [ time, value ] = row.data[closest];
+            values[row.id] = value != null && value || null;
+          }
+        }
+      });
+    } else {
+      _.assign(values, this.getLastValues(this.props));
+    }
+
+    this.setState({ values });
+  }
+
+  componentWillReceiveProps(props) {
+    if (props.legend !== this.props.legend) this.setState({ showLegend: props.legend });
+    if (!this.state.ignoreLegendUpdates) {
+      const values = this.getLastValues(props);
+      const currentKeys = _.keys(this.state.values);
+      const keys = _.keys(values);
+      const diff = _.difference(keys, currentKeys);
+      const nextState = { values: values };
+      if (diff.length && !this.state.ignoreVisabilityUpdates) {
+        nextState.show = keys;
+      }
+      this.setState(nextState);
+    }
+  }
+
+  plothover(event, pos, item) {
+    this.updateLegend(pos, item);
+  }
+
+  handleHideClick() {
+    this.setState({ showLegend: !this.state.showLegend });
+  }
+
+  render() {
+    let className = 'rhythm_chart';
+    if (this.props.reversed) {
+      className += ' reversed';
+    }
+    const style = {};
+    if (this.props.legendPosition === 'bottom') {
+      style.flexDirection = 'column';
+    }
+    return (
+      <div className={className}>
+        <div style={style} className="rhythm_chart__content">
+          <div className="rhythm_chart__visualization">
+            <TimeseriesChart
+              crosshair={this.props.crosshair}
+              onBrush={this.props.onBrush}
+              plothover={ this.plothover}
+              reversed={this.props.reversed}
+              series={this.props.series}
+              annotations={this.props.annotations}
+              show={ this.state.show }
+              tickFormatter={this.props.tickFormatter}
+              options={this.props.options}
+              yaxes={this.props.yaxes} />
+          </div>
+          <Legend
+            legendPosition={this.props.legendPosition}
+            onClick={this.handleHideClick}
+            onToggle={this.toggleFilter}
+            series={this.props.series}
+            showLegend={this.state.showLegend}
+            seriesValues={this.state.values}
+            seriesFilter={this.state.show}
+            tickFormatter={this.props.tickFormatter} />
+        </div>
+      </div>
+    );
+  }
+
+
+
+}
+
+Timeseries.defaultProps = {
+  legned: true
+};
+
+Timeseries.propTypes = {
+  legend: PropTypes.bool,
+  legendPosition: PropTypes.string,
+  onFilter: PropTypes.func,
+  series: PropTypes.array,
+  annotations: PropTypes.array,
+  reversed: PropTypes.bool,
+  options: PropTypes.object,
+  tickFormatter: PropTypes.func
+};
+
+export default Timeseries;
diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
new file mode 100644
index 0000000000000..da57120d88546
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
@@ -0,0 +1,239 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import moment from 'moment';
+import reactcss from 'reactcss';
+import FlotChart from './flot_chart';
+import Annotation from './annotation';
+
+class TimeseriesChart extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      annotations: [],
+      showTooltip: false,
+      mouseHoverTimer: false,
+    };
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.renderAnnotations = this.renderAnnotations.bind(this);
+    this.handleDraw = this.handleDraw.bind(this);
+  }
+
+  calculateLeftRight(item, plot) {
+    const el = this.container;
+    const offset = plot.offset();
+    const canvas = plot.getCanvas();
+    const point = plot.pointOffset({ x: item.datapoint[0], y: item.datapoint[1] });
+    const edge = (point.left + 10) / canvas.width;
+    let right;
+    let left;
+    if (edge > 0.5) {
+      right = canvas.width - point.left;
+      left = null;
+    } else {
+      right = null;
+      left = point.left;
+    }
+    return [left, right];
+  }
+
+  handleDraw(plot) {
+    if (!plot || !this.props.annotations) return;
+    const annotations = this.props.annotations.reduce((acc, anno) => {
+      return acc.concat(anno.series.map(series => {
+        return {
+          series,
+          plot,
+          key: `${anno.id}-${series[0]}`,
+          icon: anno.icon,
+          color: anno.color
+        };
+      }));
+    }, []);
+    this.setState({ annotations });
+  }
+
+  handleMouseOver(e, pos, item, plot) {
+
+    if (typeof this.state.mouseHoverTimer === 'number') {
+      window.clearTimeout(this.state.mouseHoverTimer);
+    }
+
+    if (item) {
+      const plotOffset = plot.getPlotOffset();
+      const point = plot.pointOffset({ x: item.datapoint[0], y: item.datapoint[1] });
+      const [left, right ] = this.calculateLeftRight(item, plot);
+      const top = point.top;
+      this.setState({
+        showTooltip: true,
+        item,
+        left,
+        right,
+        top: top + 10,
+        bottom: plotOffset.bottom
+      });
+    }
+  }
+
+  handleMouseLeave(e, plot) {
+    this.state.mouseHoverTimer = window.setTimeout(() => {
+      this.setState({ showTooltip: false });
+    }, 250);
+  }
+
+  renderAnnotations(annotation) {
+    return (
+      <Annotation
+        series={annotation.series}
+        plot={annotation.plot}
+        key={annotation.key}
+        icon={annotation.icon}
+        reversed={this.props.reversed}
+        color={annotation.color}/>
+    );
+  }
+
+  render() {
+    const { item, right, top, left } = this.state;
+    const { series } = this.props;
+    let tooltip;
+
+    const styles = reactcss({
+      showTooltip: {
+        tooltipContainer: {
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: top - 28,
+          left,
+          right,
+          zIndex: 100,
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 5px'
+        },
+        tooltip: {
+          backgroundColor: this.props.reversed ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.7)',
+          color: this.props.reversed ? 'black' : 'white',
+          fontSize: '12px',
+          padding: '4px 8px',
+          borderRadius: '4px'
+        },
+        rightCaret: {
+          display: right ? 'block' : 'none',
+          color: this.props.reversed ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.7)',
+        },
+        leftCaret: {
+          display: left ? 'block' : 'none',
+          color: this.props.reversed ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.7)',
+        },
+        date: {
+          color: this.props.reversed ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)',
+          fontSize: '12px',
+          lineHeight: '12px'
+        },
+        items: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        text: {
+          whiteSpace: 'nowrap',
+          fontSize: '12px',
+          lineHeight: '12px',
+          marginRight: 5
+        },
+        icon: {
+          marginRight: 5
+        },
+        value: {
+          fontSize: '12px',
+          flexShrink: 0,
+          lineHeight: '12px',
+          marginLeft: 5
+        }
+      },
+      hideTooltip: {
+        tooltipContainer: { display: 'none' },
+      }
+    }, {
+      showTooltip: this.state.showTooltip,
+      hideTooltip: !this.state.showTooltip,
+    });
+
+    if (item) {
+      const metric = series.find(r => r.id === item.series.id);
+      const formatter = metric && metric.tickFormatter || this.props.tickFormatter || ((v) => v);
+      const value = item.datapoint[2] ? item.datapoint[1] - item.datapoint[2] : item.datapoint[1];
+      const caretClassName = right ? 'fa fa-caret-right' : 'fa-caret-left';
+      tooltip = (
+        <div style={styles.tooltipContainer}>
+          <i className="fa fa-caret-left" style={styles.leftCaret}></i>
+          <div style={styles.tooltip}>
+            <div style={styles.items}>
+              <div style={styles.icon}>
+                <i className="fa fa-circle" style={{ color: item.series.color }}></i>
+              </div>
+              <div style={styles.text}>{ item.series.label }</div>
+              <div style={styles.value}>{ formatter(value) }</div>
+            </div>
+            <div style={styles.date}>{ moment(item.datapoint[0]).format('lll') }</div>
+          </div>
+          <i className="fa fa-caret-right" style={styles.rightCaret}></i>
+        </div>
+      );
+
+    }
+
+    const container = {
+      display: 'flex',
+      rowDirection: 'column',
+      flex: '1 0 auto',
+      position: 'relative'
+    };
+
+
+    const params = {
+      crosshair: this.props.crosshair,
+      onPlotCreate: this.handlePlotCreate,
+      onBrush: this.props.onBrush,
+      onMouseLeave: this.handleMouseLeave,
+      onMouseOver: this.handleMouseOver,
+      onDraw: this.handleDraw,
+      options: this.props.options,
+      plothover: this.props.plothover,
+      reversed: this.props.reversed,
+      series: this.props.series,
+      annotations: this.props.annotations,
+      show: this.props.show,
+      tickFormatter: this.props.tickFormatter,
+      yaxes: this.props.yaxes
+    };
+
+    const annotations = this.state.annotations.map(this.renderAnnotations);
+
+    return (
+      <div ref={(el) => this.container = el} style={container}>
+        { tooltip }
+        { annotations }
+        <FlotChart {...params}/>
+      </div>
+    );
+  }
+
+
+}
+
+TimeseriesChart.propTypes = {
+  crosshair: PropTypes.bool,
+  onBrush: PropTypes.func,
+  options: PropTypes.object,
+  plothover: PropTypes.func,
+  reversed: PropTypes.bool,
+  series: PropTypes.array,
+  annotations: PropTypes.array,
+  show: PropTypes.array,
+  tickFormatter: PropTypes.func,
+  yaxes: PropTypes.array,
+};
+
+export default TimeseriesChart;
diff --git a/src/core_plugins/metrics/public/visualizations/components/top_n.js b/src/core_plugins/metrics/public/visualizations/components/top_n.js
new file mode 100644
index 0000000000000..3acdeea192fb3
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/top_n.js
@@ -0,0 +1,82 @@
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import getLastValue from '../lib/get_last_value';
+
+class TopN extends Component {
+
+  handleClick(item) {
+    return (e) => {
+      if (this.props.onClick) {
+        this.props.onClick(item);
+      }
+    };
+  }
+
+  renderRow(maxValue) {
+    return item => {
+      const key = `${item.id || item.label}`;
+      const lastValue = getLastValue(item.data, item.data.length);
+      const formatter = item.tickFormatter || this.props.tickFormatter;
+      const value = formatter(lastValue);
+      const width = `${100 * (lastValue / maxValue)}%`;
+      const backgroundColor = item.color;
+      const style = {};
+      if (this.props.onClick) {
+        style.cursor = 'pointer';
+      }
+      return (
+        <tr key={key}
+          onClick={this.handleClick({ lastValue, ...item })}
+          style={style}>
+          <td width="1*" className="rhythm_top_n__label">{ item.label }</td>
+          <td width="100%" className="rhythm_top_n__bar">
+            <div className="rhythm_top_n__inner-bar"
+              style={{ width, backgroundColor }}/>
+          </td>
+          <td width="1*" className="rhythm_top_n__value">{ value }</td>
+        </tr>
+      );
+    };
+  }
+
+  render() {
+    if (!this.props.series) return (<div style={{ display: 'none' }}/>);
+    const maxValue = this.props.series.reduce((max, series) => {
+      const lastValue = getLastValue(series.data, series.data.length);
+      return lastValue > max ? lastValue : max;
+    }, 0);
+
+    const rows = _.sortBy(this.props.series, s => getLastValue(s.data, s.data.length))
+      .reverse()
+      .map(this.renderRow(maxValue));
+    let className = 'rhythm_top_n';
+    if (this.props.reversed) {
+      className += ' reversed';
+    }
+
+    return (
+      <div className={className}>
+        <table className="rhythm_top_n__table">
+          <tbody>
+            { rows }
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+}
+
+TopN.defaultProps = {
+  tickFormatter: n => n,
+  onClick: i => i
+};
+
+TopN.propTypes = {
+  tickFormatter: PropTypes.func,
+  onClick: PropTypes.func,
+  series: PropTypes.array,
+  reversed: PropTypes.bool
+};
+
+export default TopN;
diff --git a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
new file mode 100644
index 0000000000000..67329753b2712
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
@@ -0,0 +1,49 @@
+import React, { PropTypes } from 'react';
+import _ from 'lodash';
+import createLegendSeries from '../lib/create_legend_series';
+
+function VerticalLegend(props) {
+  const rows = props.series.map(createLegendSeries(props));
+  const seriesStyle = {};
+  const legendStyle = {};
+  const controlStyle = {};
+  let openClass = 'fa-chevron-left';
+  let closeClass = 'fa-chevron-right';
+  if (props.legendPosition === 'left') {
+    openClass = 'fa-chevron-right';
+    closeClass = 'fa-chevron-left';
+    legendStyle.order = '-1';
+    controlStyle.order = '2';
+  }
+  let legendControlClass = `fa ${closeClass}`;
+  legendStyle.width = 200;
+  if (!props.showLegend) {
+    legendStyle.width = 12;
+    seriesStyle.display = 'none';
+    legendControlClass = `fa ${openClass}`;
+  }
+  return (
+    <div className="rhythm_chart__legend" style={legendStyle}>
+      <div className="rhythm_chart__legend-control" style={controlStyle}>
+        <i className={legendControlClass} onClick={props.onClick}/>
+      </div>
+      <div className="rhythm_chart__legend-series" style={seriesStyle}>
+        { rows }
+      </div>
+    </div>
+  );
+
+}
+
+VerticalLegend.propTypes = {
+  legendPosition: PropTypes.string,
+  onClick: PropTypes.func,
+  onToggle: PropTypes.func,
+  series: PropTypes.array,
+  showLegend: PropTypes.bool,
+  seriesValues: PropTypes.object,
+  seriesFilter: PropTypes.array,
+  tickFormatter: PropTypes.func
+};
+
+export default VerticalLegend;
diff --git a/src/core_plugins/metrics/public/visualizations/index.js b/src/core_plugins/metrics/public/visualizations/index.js
new file mode 100644
index 0000000000000..91e2c16e12d74
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/index.js
@@ -0,0 +1,20 @@
+import getLastValue from './lib/get_last_value';
+import flot from './lib/flot';
+import events from './lib/events';
+
+import Timeseries from './components/timeseries';
+import Metric from './components/metric';
+import Gauge from './components/gauge';
+import TopN from './components/top_n';
+
+export default {
+  // visualizations
+  TopN,
+  Timeseries,
+  Metric,
+  Gauge,
+  // utilities
+  getLastValue,
+  flot,
+  events,
+};
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/bar.less b/src/core_plugins/metrics/public/visualizations/less/includes/bar.less
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/chart.less b/src/core_plugins/metrics/public/visualizations/less/includes/chart.less
new file mode 100644
index 0000000000000..c80436d9c6048
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/less/includes/chart.less
@@ -0,0 +1,179 @@
+.rhythm_chart {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+
+.rhythm_chart__title {
+  color: @textColor;
+  margin: 0 0 10px;
+}
+
+.rhythm_chart__content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex: 1 0 auto;
+}
+
+.rhythm_chart__visualization {
+  cursor: crosshair;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  position: relative;
+  & > div {
+    min-width: 1px;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.rhythm_chart__legend-control {
+  padding: 6px 2px 0 0;
+  color: @textColor;
+  font-size: 12px;
+}
+
+.rhythm_chart__legend-series {
+  flex-grow: 1;
+}
+
+.rhythm_chart__legend {
+  display: flex;
+  font-size: 11px;
+  width: 200px;
+  padding: 5px 0;
+  overflow: auto;
+}
+
+.rhythm_chart__legend_item {
+  cursor: pointer;
+  &.disabled {
+    opacity: 0.5;
+  }
+  padding: 5px;
+  border-bottom: 1px solid @lineColor;
+  &:first-child {
+    border-top: 1px solid @lineColor;
+  }
+  display: flex;
+  max-width: 170px;
+}
+
+.rhythm_chart__legend_label {
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  span {
+    color: @textColor;
+    margin-left: 5px;
+  }
+}
+
+.rhythm_chart__legend_value {
+  color: @valueColor;
+  margin-left: 3px;
+}
+
+.rhythm_chart.reversed {
+  .rhythm_chart__title { color: @textColorReversed; }
+  .rhythm_chart__legend-control { color: @textColorReversed; }
+  .rhythm_chart__legend_item {
+    border-bottom: 1px solid @lineColorReversed;
+    &:first-child { border-top: 1px solid @lineColorReversed; }
+  }
+  .rhythm_chart__legend_label { span { color: @textColorReversed; } }
+  .rhythm_chart__legend_value { color: @valueColorReversed; }
+}
+
+.rhythm_chart__legend-horizontal,
+.rhythm_chart.reversed .rhythm_chart__legend-horizontal {
+  width: auto;
+  display: flex;
+  .rhythm_chart__legend-control {
+    padding: 5px 5px 0 0;
+  }
+  .rhythm_chart__legend-series {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .rhythm_chart__legend_label {
+    flex: 0 1 auto;
+  }
+  .rhythm_chart__legend_item {
+    max-width: inherit;
+    font-size: 12px;
+    display: flex;
+    margin-right: 10px;
+    border-bottom: none;
+    &:first-child { border-top: none; }
+  }
+}
+
+.annotation {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  z-index: 90;
+  align-items: center;
+}
+.annotation__line {
+  flex: 1 0 auto;
+}
+.annotation__icon {
+  position: relative;
+  flex: 0 0 auto;
+  width: 12px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.annotation__tooltip {
+  position: absolute;
+  bottom: 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.annotation__message,
+.annotation__timestamp {
+  font-size: 12px;
+}
+.annotation__caret {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid rgba(0,0,0,0.7);
+}
+.annotation__caret-reversed {
+  .annotation__caret;
+  border-top: none;
+  border-bottom: 5px solid rgba(0,0,0,0.7);
+}
+.annotation__tooltip-body {
+  border-radius: 4px;
+  padding: 4px;
+  white-space: nowrap;
+  color: white;
+  background-color: rgba(0,0,0,0.7);
+}
+.annotation__tooltip-body-reversed {
+  .annotation__tooltip-body;
+  color: black;
+  background-color: rgba(255,255,255,0.7);
+}
+.annotation__timestamp {
+  color: rgba(255,255,255,0.7);
+
+}
+.annotation__timestamp-reversed {
+  color: rgba(0,0,0,0.7);
+}
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/colors.less b/src/core_plugins/metrics/public/visualizations/less/includes/colors.less
new file mode 100644
index 0000000000000..ebd1b4bf547a4
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/less/includes/colors.less
@@ -0,0 +1,32 @@
+@black: black;
+@grayDarkest: #222;
+@grayDarker: #333;
+@grayDark: #666;
+@gray: #999;
+@grayLight: #CCC;
+@grayLighter: #DDD;
+@grayLightest: #EEE;
+@white: white;
+
+@background: @white;
+@navBarBackground: @grayLighter;
+@inputBorder: @grayLighter;
+@lineColor: rgba(0,0,0,0.2);
+@lineColorReversed: rgba(255,255,255,0.4);
+@textColor: rgba(0,0,0,0.4);
+@textColorReversed: rgba(255,255,255,0.6);
+@disabledColor: @grayLight;
+@valueColor: rgba(0,0,0,0.7);
+@valueColorReversed: rgba(255,255,255,0.8);
+
+@esBlue: #6eadc1;
+@esRed: #d76051;
+@esYellow: #fbce47;
+@esGreen: #80c383;
+@esPink: #e8488b;
+@esPurple: #9980b2;
+@esAltGreen: #8ac336;
+@esCyan: #59c6c5;
+
+
+
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/gauge.less b/src/core_plugins/metrics/public/visualizations/less/includes/gauge.less
new file mode 100644
index 0000000000000..7b714d3860163
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/less/includes/gauge.less
@@ -0,0 +1,113 @@
+.thorCircleGauge {
+  font-size: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  circle {
+    opacity: 1;
+    stroke-opacity: 1;
+    &:hover {
+      opacity: 1;
+      stroke-opacity: 1;
+    }
+  }
+}
+
+.thorCircleGauge__metrics {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  text-align: center;
+  display: flex;
+  padding: 10px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.thorCircleGauge__label {
+  font-size: 8px;
+  line-height: 1;
+  text-align: center;
+  color: rgba(0,0,0,0.4);
+  padding: 0 8px 4px;
+}
+.thorCircleGauge__value {
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  color: @black;
+}
+
+.thorCircleGauge__resize {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+
+.thorCircleGauge.reversed {
+  .thorCircleGauge__label {
+    color: rgba(255,255,255,0.6);
+  }
+  .thorCircleGauge__value {
+    color: @white;
+  }
+}
+
+.thorHalfGauge {
+  font-size: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  circle {
+    opacity: 1;
+    stroke-opacity: 1;
+    &:hover {
+      opacity: 1;
+      stroke-opacity: 1;
+    }
+  }
+}
+
+.thorHalfGauge__metrics {
+  position: absolute;
+  width: 100px;
+  height: 70px;
+  text-align: center;
+  display: flex;
+  padding: 0px 11px 10px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.thorHalfGauge__label {
+  font-size: 8px;
+  line-height: 1;
+  text-align: center;
+  color: rgba(0,0,0,0.4);
+  padding: 0 8px 4px;
+}
+.thorHalfGauge__value {
+  font-size: 13px;
+  line-height: 1;
+  text-align: center;
+  color: @black;
+}
+
+.thorHalfGauge__resize {
+  position: relative;
+  display: flex;
+  rowDirection: column;
+  flex: 1 0 auto;
+}
+
+.thorHalfGauge.reversed {
+  .thorHalfGauge__label {
+    color: rgba(255,255,255,0.6);
+  }
+  .thorHalfGauge__value {
+    color: @white;
+  }
+}
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/metric.less b/src/core_plugins/metrics/public/visualizations/less/includes/metric.less
new file mode 100644
index 0000000000000..7fce968416bdd
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/less/includes/metric.less
@@ -0,0 +1,61 @@
+.rhythm_metric {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+}
+
+.rhythm_metric__resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  display: flex;
+}
+
+.rhythm_metric__primary {
+}
+
+.rhythm_metric__primary-label {
+  text-align: center;
+  color: @textColor;
+  font-size: 0.5em;
+  margin-bottom: 0.25em;
+  line-height: 1em;
+}
+
+.rhythm_metric__primary-value {
+  text-align: center;
+  color: @valueColor;
+  font-size: 1em;
+  font-weight: bold;
+  line-height: 1em;
+}
+
+.rhythm_metric__secondary {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.05em;
+}
+
+.rhythm_metric__secondary-label {
+  font-size: 0.35em;
+  margin-right: 0.3em;
+  color: @textColor;
+  line-height: 1em;
+}
+
+.rhythm_metric__secondary-value {
+  font-size: 0.35em;
+  color: @valueColor;
+  line-height: 1em;
+}
+
+.rhythm_metric__inner {
+  position: absolute;
+  padding: 0.25em 0.5em 0.5em;
+}
+
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/top_n.less b/src/core_plugins/metrics/public/visualizations/less/includes/top_n.less
new file mode 100644
index 0000000000000..c206c85439217
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/less/includes/top_n.less
@@ -0,0 +1,55 @@
+.rhythm_top_n {
+  position: relative;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+
+  tr:hover { td { background-color: rgba(0,0,0,0.1) } }
+}
+
+.rhythm_top_n__labels,
+.rhythm_top_n__values {
+  // flex: 0 0 auto;
+  text-align: right;
+}
+.rhythm_top_n__bars {
+  // flex: 1 0 auto;
+}
+
+.rhythm_top_n__label {
+  // margin: 4px 10px 4px 0;
+  color: @textColor;
+  white-space: nowrap;
+  text-align: right;
+  line-height: 0;
+  padding: 4px 0;
+  vertical-align: middle;
+  // height: 18px;
+}
+
+.rhythm_top_n__value {
+  // margin: 4px 0 4px 10px;
+  color: @valueColor;
+  text-align: right;
+  line-height: 0;
+  padding: 4px 4px 4px 0;
+  vertical-align: middle;
+  // height: 18px;
+}
+
+.rhythm_top_n__bar {
+  // height: 16px;
+  // margin: 4px 0;
+  padding: 4px 10px;
+  vertical-align: middle;
+}
+
+.rhythm_top_n__inner-bar {
+  min-height: 16px;
+}
+
+.rhythm_top_n.reversed {
+  tr:hover { td { background-color: rgba(255,255,255,0.1) } }
+  .rhythm_top_n__label { color: @textColorReversed; }
+  .rhythm_top_n__value { color: @valueColorReversed; }
+}
diff --git a/src/core_plugins/metrics/public/visualizations/less/main.less b/src/core_plugins/metrics/public/visualizations/less/main.less
new file mode 100644
index 0000000000000..b04b21908d8fc
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/less/main.less
@@ -0,0 +1,5 @@
+@import './includes/colors.less';
+@import './includes/chart.less';
+@import './includes/metric.less';
+@import './includes/top_n.less';
+@import './includes/gauge.less';
diff --git a/src/core_plugins/metrics/public/visualizations/lib/__tests__/calcualte_bar_width.js b/src/core_plugins/metrics/public/visualizations/lib/__tests__/calcualte_bar_width.js
new file mode 100644
index 0000000000000..91762bba2b9fe
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/__tests__/calcualte_bar_width.js
@@ -0,0 +1,18 @@
+import { expect } from 'chai';
+import calculateBarWidth from '../calculate_bar_width';
+
+describe('calculateBarWidth(series, divisor, multipier)', () => {
+
+  it('returns default bar width', () => {
+    const series = [{ data: [[100, 100], [200, 100]] }];
+    expect(calculateBarWidth(series)).to.equal(70);
+  });
+
+  it('returns custom bar width', () => {
+    const series = [{ data: [[100, 100], [200, 100]] }];
+    expect(calculateBarWidth(series, 2)).to.equal(200);
+  });
+
+});
+
+
diff --git a/src/core_plugins/metrics/public/visualizations/lib/__tests__/get_last_value.js b/src/core_plugins/metrics/public/visualizations/lib/__tests__/get_last_value.js
new file mode 100644
index 0000000000000..1c70f45f62b2e
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/__tests__/get_last_value.js
@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import getLastValue from '../get_last_value';
+
+describe('getLastValue(data)', () => {
+
+  it('returns zero if data is not array', () => {
+    expect(getLastValue('foo')).to.equal(0);
+  });
+
+  it('returns the last value', () => {
+    const data = [[1,1]];
+    expect(getLastValue(data)).to.equal(1);
+  });
+
+  it('returns the second to last value if the last value is null (default)', () => {
+    const data = [[1,4], [2, null]];
+    expect(getLastValue(data)).to.equal(4);
+  });
+
+  it('returns the zero if second to last is null (default)', () => {
+    const data = [[1, null], [2, null]];
+    expect(getLastValue(data)).to.equal(0);
+  });
+
+  it('returns the N to last value if the last N-1 values are null (default)', () => {
+    const data = [[1,4], [2, null], [3, null]];
+    expect(getLastValue(data, 3)).to.equal(4);
+  });
+
+
+});
+
diff --git a/src/core_plugins/metrics/public/visualizations/lib/__tests__/get_value_by.js b/src/core_plugins/metrics/public/visualizations/lib/__tests__/get_value_by.js
new file mode 100644
index 0000000000000..ac43a53ea3a98
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/__tests__/get_value_by.js
@@ -0,0 +1,23 @@
+import getValueBy from '../get_value_by';
+import { expect } from 'chai';
+
+describe('getValueBy(fn, data)', () => {
+  it('returns max for getValueBy(\'max\', data) ', () => {
+    const data = [
+      [0, 5],
+      [1, 3],
+      [2, 4],
+      [3, 6],
+      [4, 5],
+    ];
+    expect(getValueBy('max', data)).to.equal(6);
+  });
+  it('returns 0 if data is not array', () => {
+    const data = '1';
+    expect(getValueBy('max', data)).to.equal(0);
+  });
+  it('returns value if data is number', () => {
+    const data = 1;
+    expect(getValueBy('max', data)).to.equal(1);
+  });
+});
diff --git a/src/core_plugins/metrics/public/visualizations/lib/calculate_bar_width.js b/src/core_plugins/metrics/public/visualizations/lib/calculate_bar_width.js
new file mode 100644
index 0000000000000..0290049d6e342
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/calculate_bar_width.js
@@ -0,0 +1,12 @@
+import _ from 'lodash';
+// bar sizes are measured in milliseconds so this assumes that the different
+// between timestamps is in milliseconds. A normal bar size is 70% which gives
+// enough spacing for the bar.
+export default (series, multipier = 0.7) => {
+  const first = _.first(series);
+  try {
+    return ((first.data[1][0] - first.data[0][0])) * multipier;
+  } catch (e) {
+    return 1000; // 1000 ms
+  }
+};
diff --git a/src/core_plugins/metrics/public/visualizations/lib/colors.js b/src/core_plugins/metrics/public/visualizations/lib/colors.js
new file mode 100644
index 0000000000000..028af4b7e85a5
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/colors.js
@@ -0,0 +1,8 @@
+export default {
+  lineColor: 'rgba(0,0,0,0.2)',
+  lineColorReversed: 'rgba(255,255,255,0.4)',
+  textColor: 'rgba(0,0,0,0.4)',
+  textColorReversed: 'rgba(255,255,255,0.6)',
+  valueColor: 'rgba(0,0,0,0.7)',
+  valueColorReversed: 'rgba(255,255,255,0.8)'
+};
diff --git a/src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js b/src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js
new file mode 100644
index 0000000000000..84c58340578f7
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import _ from 'lodash';
+export default props => (row, i) => {
+
+  function tickFormatter(value) {
+    if (_.isFunction(props.tickFormatter)) return props.tickFormatter(value);
+    return value;
+  }
+
+  const formatter = row.tickFormatter || tickFormatter;
+  const value = formatter(props.seriesValues[row.id]);
+  const classes = ['rhythm_chart__legend_item'];
+  const key = row.id;
+  if (!_.includes(props.seriesFilter, row.id)) classes.push('disabled');
+  if (!row.label || row.legend === false) return (<div key={ key } style={{ display: 'none' }}/>);
+  return (
+    <div
+      className={ classes.join(' ') }
+      onClick={ event => props.onToggle(event, row.id) }
+      key={ key }>
+      <div className="rhythm_chart__legend_label">
+        <i className="fa fa-circle" style={{ color: row.color }}></i>
+        <span>{ row.label }</span>
+      </div>
+      <div className="rhythm_chart__legend_value">{ value }</div>
+    </div>
+  );
+};
diff --git a/src/core_plugins/metrics/public/visualizations/lib/events.js b/src/core_plugins/metrics/public/visualizations/lib/events.js
new file mode 100644
index 0000000000000..35c193bcccf61
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/events.js
@@ -0,0 +1,3 @@
+import $ from 'jquery';
+export default $({});
+
diff --git a/src/core_plugins/metrics/public/visualizations/lib/flot.js b/src/core_plugins/metrics/public/visualizations/lib/flot.js
new file mode 100644
index 0000000000000..2cdef0fbdef03
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/flot.js
@@ -0,0 +1,13 @@
+const $ = require('jquery');
+if (window) window.jQuery = $;
+require('flot-charts/jquery.flot');
+require('flot-charts/jquery.flot.time');
+require('flot-charts/jquery.flot.canvas');
+require('flot-charts/jquery.flot.symbol');
+require('flot-charts/jquery.flot.crosshair');
+require('flot-charts/jquery.flot.selection');
+require('flot-charts/jquery.flot.pie');
+require('flot-charts/jquery.flot.stack');
+require('flot-charts/jquery.flot.threshold');
+require('flot-charts/jquery.flot.fillbetween');
+module.exports = $;
diff --git a/src/core_plugins/metrics/public/visualizations/lib/get_last_value.js b/src/core_plugins/metrics/public/visualizations/lib/get_last_value.js
new file mode 100644
index 0000000000000..0003fef705ba7
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/get_last_value.js
@@ -0,0 +1,20 @@
+import _ from 'lodash';
+export default (data, lookback = 2) => {
+  if (_.isNumber(data)) return data;
+  if (!Array.isArray(data)) return 0;
+  // First try the last value
+  const last = data[data.length - 1];
+  const lastValue = Array.isArray(last) && last[1];
+  if (lastValue) return lastValue;
+
+  // If the last value is zero or null because of a partial bucket or
+  // some kind of timeshift weirdness we will show the second to last.
+  let lookbackCounter = 1;
+  let value;
+  while (lookback > lookbackCounter && !value) {
+    const next = data[data.length - ++lookbackCounter];
+    value =  _.isArray(next) && next[1] || 0;
+  }
+  return value || 0;
+};
+
diff --git a/src/core_plugins/metrics/public/visualizations/lib/get_value_by.js b/src/core_plugins/metrics/public/visualizations/lib/get_value_by.js
new file mode 100644
index 0000000000000..a8a1de0ee668f
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/get_value_by.js
@@ -0,0 +1,7 @@
+import _ from 'lodash';
+export default (fn, data) => {
+  if (_.isNumber(data)) return data;
+  if (!Array.isArray(data)) return 0;
+  const values = data.map(v => v[1]);
+  return _[fn](values);
+};
diff --git a/src/core_plugins/metrics/server/lib/__tests__/get_fields.js b/src/core_plugins/metrics/server/lib/__tests__/get_fields.js
new file mode 100644
index 0000000000000..1877764f83b9e
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/__tests__/get_fields.js
@@ -0,0 +1,84 @@
+import { expect } from 'chai';
+import { getParams, handleResponse } from '../get_fields';
+
+describe('getFields', () => {
+
+  describe('getParams', () => {
+
+    it('returns a valid params object', () => {
+      const req = { query: { index: 'metricbeat-*' } };
+      expect(getParams(req)).to.eql({
+        index: 'metricbeat-*',
+        fields: ['*'],
+        ignoreUnavailable: false,
+        allowNoIndices: false,
+        includeDefaults: true
+      });
+    });
+
+  });
+
+  describe('handleResponse', () => {
+    it('returns a valid response', () => {
+      const resp = {
+        'foo': {
+          'mappings': {
+            'bar': {
+              '@timestamp': {
+                'full_name': '@timestamp',
+                'mapping': {
+                  '@timestamp': {
+                    'type': 'date'
+                  }
+                }
+              }
+            }
+          }
+        },
+        'twitter': {
+          'mappings': {
+            'tweet': {
+              'message': {
+                'full_name': 'message',
+                'mapping': {
+                  'message': {
+                    'type': 'text',
+                    'fields': {
+                      'keyword': {
+                        'type': 'keyword',
+                        'ignore_above': 256
+                      }
+                    }
+                  }
+                }
+              },
+              '@timestamp': {
+                'full_name': '@timestamp',
+                'mapping': {
+                  '@timestamp': {
+                    'type': 'date'
+                  }
+                }
+              },
+              'id.keyword': {
+                'full_name': 'id.keyword',
+                'mapping': {
+                  'keyword': {
+                    'type': 'keyword',
+                    'ignore_above': 256
+                  }
+                }
+              }
+            }
+          }
+        }
+      };
+      expect(handleResponse(resp)).to.eql([
+        { name: '@timestamp', type: 'date' },
+        { name: 'id.keyword', type: 'keyword' },
+        { name: 'message', type: 'text' }
+      ]);
+    });
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/get_fields.js b/src/core_plugins/metrics/server/lib/get_fields.js
new file mode 100644
index 0000000000000..8ffa3f1bd0940
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/get_fields.js
@@ -0,0 +1,40 @@
+import _ from 'lodash';
+
+export function getParams(req) {
+  const index = req.query.index || '*';
+  return {
+    index,
+    fields: ['*'],
+    ignoreUnavailable: false,
+    allowNoIndices: false,
+    includeDefaults: true
+  };
+}
+
+export function handleResponse(resp) {
+  return _.reduce(resp, (acc, index, key) => {
+    _.each(index.mappings, (type) => {
+      _.each(type, (field, fullName) => {
+        const name = _.last(fullName.split(/\./));
+        const enabled = _.get(field, `mapping.${name}.enabled`, true);
+        const fieldType = _.get(field, `mapping.${name}.type`);
+        if (enabled && fieldType) {
+          acc.push({
+            name: _.get(field, 'full_name', fullName),
+            type: fieldType
+          });
+        }
+      });
+    });
+    return _(acc).sortBy('name').uniq(row => row.name).value();
+  }, []);
+}
+
+function getFields(req) {
+  const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('data');
+  const params = getParams(req);
+  return callWithRequest(req, 'indices.getFieldMapping', params).then(handleResponse);
+}
+
+export default getFields;
+
diff --git a/src/core_plugins/metrics/server/lib/get_vis_data.js b/src/core_plugins/metrics/server/lib/get_vis_data.js
new file mode 100644
index 0000000000000..5f65e468a9c29
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/get_vis_data.js
@@ -0,0 +1,15 @@
+import _ from 'lodash';
+import getPanelData from './vis_data/get_panel_data';
+
+function getVisData(req) {
+  const promises = req.payload.panels.map(getPanelData(req));
+  return Promise.all(promises)
+    .then(res => {
+      return res.reduce((acc, data) => {
+        return _.assign(acc, data);
+      }, {});
+    });
+}
+
+export default getVisData;
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_processor_function.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_processor_function.js
new file mode 100644
index 0000000000000..c6d9cfa3c6825
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_processor_function.js
@@ -0,0 +1,47 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import buildProcessorFunction from '../build_processor_function';
+
+describe('buildProcessorFunction(chain, ...args)', () => {
+  const req = {};
+  const panel = {};
+  const series = {};
+
+  it('should call each processor', () => {
+    const first = sinon.spy((req, panel, series) => next => doc => next(doc));
+    const second = sinon.spy((req, panel, series) => next => doc => next(doc));
+    const fn = buildProcessorFunction([first, second], req, panel, series);
+    expect(first.calledOnce).to.equal(true);
+    expect(second.calledOnce).to.equal(true);
+  });
+
+  it('should chain each processor', () => {
+    const first = sinon.spy(next => doc => next(doc));
+    const second = sinon.spy(next => doc => next(doc));
+    const fn = buildProcessorFunction([
+      (req, panel, series) => first,
+      (req, panel, series) => second
+    ], req, panel, series);
+    expect(first.calledOnce).to.equal(true);
+    expect(second.calledOnce).to.equal(true);
+  });
+
+  it('should next of each processor', () => {
+    const first = sinon.spy();
+    const second = sinon.spy();
+    const fn = buildProcessorFunction([
+      (req, panel, series) => next => doc => {
+        first();
+        next(doc);
+      },
+      (req, panel, series) => next => doc => {
+        second();
+        next(doc);
+      }
+    ], req, panel, series);
+    fn({});
+    expect(first.calledOnce).to.equal(true);
+    expect(second.calledOnce).to.equal(true);
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_request_body.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_request_body.js
new file mode 100644
index 0000000000000..fa6cdb81477c2
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_request_body.js
@@ -0,0 +1,133 @@
+const body = JSON.parse(`
+{
+    "filters": [
+        {
+            "bool": {
+                "must": [
+                    {
+                        "query_string": {
+                            "analyze_wildcard": true,
+                            "query": "*"
+                        }
+                    }
+                ],
+                "must_not": []
+            }
+        }
+    ],
+    "panels": [
+        {
+            "axis_formatter": "number",
+            "axis_position": "left",
+            "id": "c9b5d2b0-e403-11e6-be91-6f7688e9fac7",
+            "index_pattern": "*",
+            "interval": "auto",
+            "series": [
+                {
+                    "axis_position": "right",
+                    "chart_type": "line",
+                    "color": "rgba(250,40,255,1)",
+                    "fill": 0,
+                    "formatter": "number",
+                    "id": "c9b5f9c0-e403-11e6-be91-6f7688e9fac7",
+                    "line_width": 1,
+                    "metrics": [
+                        {
+                            "id": "c9b5f9c1-e403-11e6-be91-6f7688e9fac7",
+                            "type": "count"
+                        }
+                    ],
+                    "point_size": 1,
+                    "seperate_axis": 0,
+                    "split_mode": "everything",
+                    "stacked": 0
+                }
+            ],
+            "show_legend": 1,
+            "time_field": "@timestamp",
+            "type": "timeseries"
+        }
+    ],
+    "timerange": {
+        "max": "2017-01-26T20:52:35.881Z",
+        "min": "2017-01-26T20:37:35.881Z"
+    }
+}
+`);
+
+import buildRequestBody from '../build_request_body';
+import { expect } from 'chai';
+
+describe('buildRequestBody(req)', () => {
+  it('returns a valid body', () => {
+    const panel = body.panels[0];
+    const series = panel.series[0];
+    const doc = buildRequestBody({ payload: body }, panel, series);
+    expect(doc).to.eql({
+      'size': 0,
+      'query': {
+        'bool': {
+          'must': [
+            {
+              'range': {
+                '@timestamp': {
+                  'gte': 1485463055881,
+                  'lte': 1485463945881,
+                  'format': 'epoch_millis'
+                }
+              }
+            },
+            {
+              'bool': {
+                'must': [
+                  {
+                    'query_string': {
+                      'analyze_wildcard': true,
+                      'query': '*'
+                    }
+                  }
+                ],
+                'must_not': []
+              }
+            }
+          ]
+        }
+      },
+      'aggs': {
+        'c9b5f9c0-e403-11e6-be91-6f7688e9fac7': {
+          'filter': {
+            'match_all': {}
+          },
+          'aggs': {
+            'timeseries': {
+              'date_histogram': {
+                'field': '@timestamp',
+                'interval': '10s',
+                'min_doc_count': 0,
+                'extended_bounds': {
+                  'min': 1485463055881,
+                  'max': 1485463945881
+                }
+              },
+              'aggs': {
+                'c9b5f9c1-e403-11e6-be91-6f7688e9fac7': {
+                  'bucket_script': {
+                    'buckets_path': {
+                      'count': '_count'
+                    },
+                    'script': {
+                      'inline': 'count * 1',
+                      'lang': 'expression'
+                    },
+                    'gap_policy': 'skip'
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/calculate_indices.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/calculate_indices.js
new file mode 100644
index 0000000000000..4b486c17cb706
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/calculate_indices.js
@@ -0,0 +1,56 @@
+import { expect } from 'chai';
+import { getParams, handleResponse } from '../calculate_indices';
+
+describe('calculateIndices', () => {
+
+  describe('getParams', () => {
+    const req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00.000Z',
+          max: '2017-01-03T23:59:59.000Z'
+        },
+      }
+    };
+
+    it('should return a valid param object', () => {
+      expect(getParams(req, 'metricbeat-*', '@timestamp')).to.eql({
+        index: 'metricbeat-*',
+        level: 'indices',
+        ignoreUnavailable: true,
+        body: {
+          fields: ['@timestamp'],
+          index_constraints: {
+            '@timestamp': {
+              max_value: { gte: '2017-01-01T00:00:00.000Z' },
+              min_value: { lte: '2017-01-03T23:59:59.000Z' }
+            }
+          }
+        }
+      });
+    });
+
+  });
+
+  describe('handleResponse', () => {
+    it('returns an array of indices', () => {
+      const resp = {
+        indices: {
+          'metricbeat-2017.01.01': {},
+          'metricbeat-2017.01.02': {},
+          'metricbeat-2017.01.03': {}
+        }
+      };
+      expect(handleResponse(resp)).to.eql([
+        'metricbeat-2017.01.01',
+        'metricbeat-2017.01.02',
+        'metricbeat-2017.01.03',
+      ]);
+    });
+
+    it('returns an empty array if none found', () => {
+      const resp = { indices: { } };
+      expect(handleResponse(resp)).to.have.length(0);
+    });
+  });
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/fixture.json b/src/core_plugins/metrics/server/lib/vis_data/__tests__/fixture.json
new file mode 100644
index 0000000000000..178704a36372d
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/fixture.json
@@ -0,0 +1,984 @@
+{
+    "_shards": {
+        "failed": 0,
+        "successful": 5,
+        "total": 5
+    },
+    "aggregations": {
+        "c9b5f9c0-e403-11e6-be91-6f7688e9fac7": {
+            "doc_count": 128145,
+            "timeseries": {
+                "buckets": [
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.057
+                        },
+                        "doc_count": 368,
+                        "key": 1485549090000,
+                        "key_as_string": "2017-01-27T20:31:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.07466666666666667
+                        },
+                        "doc_count": 1106,
+                        "key": 1485549120000,
+                        "key_as_string": "2017-01-27T20:32:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.08033333333333335
+                        },
+                        "doc_count": 1107,
+                        "key": 1485549150000,
+                        "key_as_string": "2017-01-27T20:32:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.066
+                        },
+                        "doc_count": 1109,
+                        "key": 1485549180000,
+                        "key_as_string": "2017-01-27T20:33:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.05366666666666667
+                        },
+                        "doc_count": 1093,
+                        "key": 1485549210000,
+                        "key_as_string": "2017-01-27T20:33:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04533333333333334
+                        },
+                        "doc_count": 1086,
+                        "key": 1485549240000,
+                        "key_as_string": "2017-01-27T20:34:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037333333333333336
+                        },
+                        "doc_count": 1086,
+                        "key": 1485549270000,
+                        "key_as_string": "2017-01-27T20:34:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1090,
+                        "key": 1485549300000,
+                        "key_as_string": "2017-01-27T20:35:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036000000000000004
+                        },
+                        "doc_count": 1085,
+                        "key": 1485549330000,
+                        "key_as_string": "2017-01-27T20:35:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1082,
+                        "key": 1485549360000,
+                        "key_as_string": "2017-01-27T20:36:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1080,
+                        "key": 1485549390000,
+                        "key_as_string": "2017-01-27T20:36:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037000000000000005
+                        },
+                        "doc_count": 1082,
+                        "key": 1485549420000,
+                        "key_as_string": "2017-01-27T20:37:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036000000000000004
+                        },
+                        "doc_count": 1079,
+                        "key": 1485549450000,
+                        "key_as_string": "2017-01-27T20:37:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03233333333333333
+                        },
+                        "doc_count": 1080,
+                        "key": 1485549480000,
+                        "key_as_string": "2017-01-27T20:38:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1080,
+                        "key": 1485549510000,
+                        "key_as_string": "2017-01-27T20:38:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1082,
+                        "key": 1485549540000,
+                        "key_as_string": "2017-01-27T20:39:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.042666666666666665
+                        },
+                        "doc_count": 1079,
+                        "key": 1485549570000,
+                        "key_as_string": "2017-01-27T20:39:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1077,
+                        "key": 1485549600000,
+                        "key_as_string": "2017-01-27T20:40:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03833333333333334
+                        },
+                        "doc_count": 1075,
+                        "key": 1485549630000,
+                        "key_as_string": "2017-01-27T20:40:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1076,
+                        "key": 1485549660000,
+                        "key_as_string": "2017-01-27T20:41:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1076,
+                        "key": 1485549690000,
+                        "key_as_string": "2017-01-27T20:41:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1074,
+                        "key": 1485549720000,
+                        "key_as_string": "2017-01-27T20:42:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1072,
+                        "key": 1485549750000,
+                        "key_as_string": "2017-01-27T20:42:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1067,
+                        "key": 1485549780000,
+                        "key_as_string": "2017-01-27T20:43:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036000000000000004
+                        },
+                        "doc_count": 1065,
+                        "key": 1485549810000,
+                        "key_as_string": "2017-01-27T20:43:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1065,
+                        "key": 1485549840000,
+                        "key_as_string": "2017-01-27T20:44:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036333333333333336
+                        },
+                        "doc_count": 1062,
+                        "key": 1485549870000,
+                        "key_as_string": "2017-01-27T20:44:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1063,
+                        "key": 1485549900000,
+                        "key_as_string": "2017-01-27T20:45:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1065,
+                        "key": 1485549930000,
+                        "key_as_string": "2017-01-27T20:45:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1065,
+                        "key": 1485549960000,
+                        "key_as_string": "2017-01-27T20:46:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1069,
+                        "key": 1485549990000,
+                        "key_as_string": "2017-01-27T20:46:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550020000,
+                        "key_as_string": "2017-01-27T20:47:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550050000,
+                        "key_as_string": "2017-01-27T20:47:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550080000,
+                        "key_as_string": "2017-01-27T20:48:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550110000,
+                        "key_as_string": "2017-01-27T20:48:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03133333333333333
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550140000,
+                        "key_as_string": "2017-01-27T20:49:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550170000,
+                        "key_as_string": "2017-01-27T20:49:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03133333333333333
+                        },
+                        "doc_count": 1073,
+                        "key": 1485550200000,
+                        "key_as_string": "2017-01-27T20:50:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1077,
+                        "key": 1485550230000,
+                        "key_as_string": "2017-01-27T20:50:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03166666666666667
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550260000,
+                        "key_as_string": "2017-01-27T20:51:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.031
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550290000,
+                        "key_as_string": "2017-01-27T20:51:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1072,
+                        "key": 1485550320000,
+                        "key_as_string": "2017-01-27T20:52:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1073,
+                        "key": 1485550350000,
+                        "key_as_string": "2017-01-27T20:52:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03466666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550380000,
+                        "key_as_string": "2017-01-27T20:53:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550410000,
+                        "key_as_string": "2017-01-27T20:53:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03166666666666667
+                        },
+                        "doc_count": 1069,
+                        "key": 1485550440000,
+                        "key_as_string": "2017-01-27T20:54:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1069,
+                        "key": 1485550470000,
+                        "key_as_string": "2017-01-27T20:54:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.032
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550500000,
+                        "key_as_string": "2017-01-27T20:55:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1067,
+                        "key": 1485550530000,
+                        "key_as_string": "2017-01-27T20:55:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03233333333333333
+                        },
+                        "doc_count": 1065,
+                        "key": 1485550560000,
+                        "key_as_string": "2017-01-27T20:56:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1069,
+                        "key": 1485550590000,
+                        "key_as_string": "2017-01-27T20:56:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03166666666666667
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550620000,
+                        "key_as_string": "2017-01-27T20:57:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550650000,
+                        "key_as_string": "2017-01-27T20:57:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550680000,
+                        "key_as_string": "2017-01-27T20:58:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550710000,
+                        "key_as_string": "2017-01-27T20:58:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550740000,
+                        "key_as_string": "2017-01-27T20:59:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550770000,
+                        "key_as_string": "2017-01-27T20:59:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550800000,
+                        "key_as_string": "2017-01-27T21:00:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.032
+                        },
+                        "doc_count": 1076,
+                        "key": 1485550830000,
+                        "key_as_string": "2017-01-27T21:00:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1078,
+                        "key": 1485550860000,
+                        "key_as_string": "2017-01-27T21:01:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1077,
+                        "key": 1485550890000,
+                        "key_as_string": "2017-01-27T21:01:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03466666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550920000,
+                        "key_as_string": "2017-01-27T21:02:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03466666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550950000,
+                        "key_as_string": "2017-01-27T21:02:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03566666666666667
+                        },
+                        "doc_count": 1073,
+                        "key": 1485550980000,
+                        "key_as_string": "2017-01-27T21:03:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485551010000,
+                        "key_as_string": "2017-01-27T21:03:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03466666666666667
+                        },
+                        "doc_count": 1069,
+                        "key": 1485551040000,
+                        "key_as_string": "2017-01-27T21:04:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03566666666666667
+                        },
+                        "doc_count": 1068,
+                        "key": 1485551070000,
+                        "key_as_string": "2017-01-27T21:04:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1075,
+                        "key": 1485551100000,
+                        "key_as_string": "2017-01-27T21:05:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1074,
+                        "key": 1485551130000,
+                        "key_as_string": "2017-01-27T21:05:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03133333333333333
+                        },
+                        "doc_count": 1073,
+                        "key": 1485551160000,
+                        "key_as_string": "2017-01-27T21:06:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485551190000,
+                        "key_as_string": "2017-01-27T21:06:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1075,
+                        "key": 1485551220000,
+                        "key_as_string": "2017-01-27T21:07:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03133333333333333
+                        },
+                        "doc_count": 1071,
+                        "key": 1485551250000,
+                        "key_as_string": "2017-01-27T21:07:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04733333333333334
+                        },
+                        "doc_count": 1081,
+                        "key": 1485551280000,
+                        "key_as_string": "2017-01-27T21:08:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.044333333333333336
+                        },
+                        "doc_count": 1078,
+                        "key": 1485551310000,
+                        "key_as_string": "2017-01-27T21:08:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037000000000000005
+                        },
+                        "doc_count": 1079,
+                        "key": 1485551340000,
+                        "key_as_string": "2017-01-27T21:09:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1077,
+                        "key": 1485551370000,
+                        "key_as_string": "2017-01-27T21:09:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03866666666666666
+                        },
+                        "doc_count": 1077,
+                        "key": 1485551400000,
+                        "key_as_string": "2017-01-27T21:10:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037666666666666675
+                        },
+                        "doc_count": 1075,
+                        "key": 1485551430000,
+                        "key_as_string": "2017-01-27T21:10:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.038000000000000006
+                        },
+                        "doc_count": 1078,
+                        "key": 1485551460000,
+                        "key_as_string": "2017-01-27T21:11:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037
+                        },
+                        "doc_count": 1074,
+                        "key": 1485551490000,
+                        "key_as_string": "2017-01-27T21:11:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036666666666666674
+                        },
+                        "doc_count": 1074,
+                        "key": 1485551520000,
+                        "key_as_string": "2017-01-27T21:12:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037333333333333336
+                        },
+                        "doc_count": 1076,
+                        "key": 1485551550000,
+                        "key_as_string": "2017-01-27T21:12:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03733333333333333
+                        },
+                        "doc_count": 1075,
+                        "key": 1485551580000,
+                        "key_as_string": "2017-01-27T21:13:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04533333333333334
+                        },
+                        "doc_count": 1077,
+                        "key": 1485551610000,
+                        "key_as_string": "2017-01-27T21:13:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.039
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551640000,
+                        "key_as_string": "2017-01-27T21:14:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.057666666666666665
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551670000,
+                        "key_as_string": "2017-01-27T21:14:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.045000000000000005
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551700000,
+                        "key_as_string": "2017-01-27T21:15:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037666666666666675
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551730000,
+                        "key_as_string": "2017-01-27T21:15:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551760000,
+                        "key_as_string": "2017-01-27T21:16:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.038
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551790000,
+                        "key_as_string": "2017-01-27T21:16:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551820000,
+                        "key_as_string": "2017-01-27T21:17:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04966666666666667
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551850000,
+                        "key_as_string": "2017-01-27T21:17:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551880000,
+                        "key_as_string": "2017-01-27T21:18:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551910000,
+                        "key_as_string": "2017-01-27T21:18:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03766666666666666
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551940000,
+                        "key_as_string": "2017-01-27T21:19:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1076,
+                        "key": 1485551970000,
+                        "key_as_string": "2017-01-27T21:19:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552000000,
+                        "key_as_string": "2017-01-27T21:20:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552030000,
+                        "key_as_string": "2017-01-27T21:20:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.029666666666666664
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552060000,
+                        "key_as_string": "2017-01-27T21:21:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.02766666666666667
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552090000,
+                        "key_as_string": "2017-01-27T21:21:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.028
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552120000,
+                        "key_as_string": "2017-01-27T21:22:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.030666666666666665
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552150000,
+                        "key_as_string": "2017-01-27T21:22:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03833333333333334
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552180000,
+                        "key_as_string": "2017-01-27T21:23:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04966666666666667
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552210000,
+                        "key_as_string": "2017-01-27T21:23:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.041
+                        },
+                        "doc_count": 1082,
+                        "key": 1485552240000,
+                        "key_as_string": "2017-01-27T21:24:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037333333333333336
+                        },
+                        "doc_count": 1087,
+                        "key": 1485552270000,
+                        "key_as_string": "2017-01-27T21:24:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.039
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552300000,
+                        "key_as_string": "2017-01-27T21:25:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03933333333333333
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552330000,
+                        "key_as_string": "2017-01-27T21:25:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037666666666666675
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552360000,
+                        "key_as_string": "2017-01-27T21:26:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04033333333333333
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552390000,
+                        "key_as_string": "2017-01-27T21:26:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03866666666666666
+                        },
+                        "doc_count": 1082,
+                        "key": 1485552420000,
+                        "key_as_string": "2017-01-27T21:27:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04033333333333334
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552450000,
+                        "key_as_string": "2017-01-27T21:27:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552480000,
+                        "key_as_string": "2017-01-27T21:28:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04033333333333333
+                        },
+                        "doc_count": 1084,
+                        "key": 1485552510000,
+                        "key_as_string": "2017-01-27T21:28:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552540000,
+                        "key_as_string": "2017-01-27T21:29:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03566666666666667
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552570000,
+                        "key_as_string": "2017-01-27T21:29:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04466666666666667
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552600000,
+                        "key_as_string": "2017-01-27T21:30:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03233333333333333
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552630000,
+                        "key_as_string": "2017-01-27T21:30:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.0505
+                        },
+                        "doc_count": 722,
+                        "key": 1485552660000,
+                        "key_as_string": "2017-01-27T21:31:00.000Z"
+                    }
+                ]
+            }
+        }
+    },
+    "hits": {
+        "hits": [],
+        "max_score": 0,
+        "total": 128145
+    },
+    "status": 200,
+    "timed_out": false,
+    "took": 28
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/fixtures/std_metric_fixture.json b/src/core_plugins/metrics/server/lib/vis_data/__tests__/fixtures/std_metric_fixture.json
new file mode 100644
index 0000000000000..d587e48b31881
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/fixtures/std_metric_fixture.json
@@ -0,0 +1,985 @@
+{
+    "_shards": {
+        "failed": 0,
+        "successful": 5,
+        "total": 5
+    },
+    "aggregations": {
+        "c9b5f9c0-e403-11e6-be91-6f7688e9fac7": {
+            "doc_count": 128145,
+            "timeseries": {
+                "buckets": [
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.057
+                        },
+                        "doc_count": 368,
+                        "key": 1485549090000,
+                        "key_as_string": "2017-01-27T20:31:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.07466666666666667
+                        },
+                        "doc_count": 1106,
+                        "key": 1485549120000,
+                        "key_as_string": "2017-01-27T20:32:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.08033333333333335
+                        },
+                        "doc_count": 1107,
+                        "key": 1485549150000,
+                        "key_as_string": "2017-01-27T20:32:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.066
+                        },
+                        "doc_count": 1109,
+                        "key": 1485549180000,
+                        "key_as_string": "2017-01-27T20:33:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.05366666666666667
+                        },
+                        "doc_count": 1093,
+                        "key": 1485549210000,
+                        "key_as_string": "2017-01-27T20:33:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04533333333333334
+                        },
+                        "doc_count": 1086,
+                        "key": 1485549240000,
+                        "key_as_string": "2017-01-27T20:34:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037333333333333336
+                        },
+                        "doc_count": 1086,
+                        "key": 1485549270000,
+                        "key_as_string": "2017-01-27T20:34:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1090,
+                        "key": 1485549300000,
+                        "key_as_string": "2017-01-27T20:35:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036000000000000004
+                        },
+                        "doc_count": 1085,
+                        "key": 1485549330000,
+                        "key_as_string": "2017-01-27T20:35:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1082,
+                        "key": 1485549360000,
+                        "key_as_string": "2017-01-27T20:36:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1080,
+                        "key": 1485549390000,
+                        "key_as_string": "2017-01-27T20:36:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037000000000000005
+                        },
+                        "doc_count": 1082,
+                        "key": 1485549420000,
+                        "key_as_string": "2017-01-27T20:37:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036000000000000004
+                        },
+                        "doc_count": 1079,
+                        "key": 1485549450000,
+                        "key_as_string": "2017-01-27T20:37:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03233333333333333
+                        },
+                        "doc_count": 1080,
+                        "key": 1485549480000,
+                        "key_as_string": "2017-01-27T20:38:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1080,
+                        "key": 1485549510000,
+                        "key_as_string": "2017-01-27T20:38:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1082,
+                        "key": 1485549540000,
+                        "key_as_string": "2017-01-27T20:39:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.042666666666666665
+                        },
+                        "doc_count": 1079,
+                        "key": 1485549570000,
+                        "key_as_string": "2017-01-27T20:39:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1077,
+                        "key": 1485549600000,
+                        "key_as_string": "2017-01-27T20:40:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03833333333333334
+                        },
+                        "doc_count": 1075,
+                        "key": 1485549630000,
+                        "key_as_string": "2017-01-27T20:40:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1076,
+                        "key": 1485549660000,
+                        "key_as_string": "2017-01-27T20:41:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1076,
+                        "key": 1485549690000,
+                        "key_as_string": "2017-01-27T20:41:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1074,
+                        "key": 1485549720000,
+                        "key_as_string": "2017-01-27T20:42:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1072,
+                        "key": 1485549750000,
+                        "key_as_string": "2017-01-27T20:42:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1067,
+                        "key": 1485549780000,
+                        "key_as_string": "2017-01-27T20:43:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036000000000000004
+                        },
+                        "doc_count": 1065,
+                        "key": 1485549810000,
+                        "key_as_string": "2017-01-27T20:43:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1065,
+                        "key": 1485549840000,
+                        "key_as_string": "2017-01-27T20:44:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036333333333333336
+                        },
+                        "doc_count": 1062,
+                        "key": 1485549870000,
+                        "key_as_string": "2017-01-27T20:44:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1063,
+                        "key": 1485549900000,
+                        "key_as_string": "2017-01-27T20:45:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1065,
+                        "key": 1485549930000,
+                        "key_as_string": "2017-01-27T20:45:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1065,
+                        "key": 1485549960000,
+                        "key_as_string": "2017-01-27T20:46:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1069,
+                        "key": 1485549990000,
+                        "key_as_string": "2017-01-27T20:46:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550020000,
+                        "key_as_string": "2017-01-27T20:47:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550050000,
+                        "key_as_string": "2017-01-27T20:47:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550080000,
+                        "key_as_string": "2017-01-27T20:48:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550110000,
+                        "key_as_string": "2017-01-27T20:48:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03133333333333333
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550140000,
+                        "key_as_string": "2017-01-27T20:49:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550170000,
+                        "key_as_string": "2017-01-27T20:49:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03133333333333333
+                        },
+                        "doc_count": 1073,
+                        "key": 1485550200000,
+                        "key_as_string": "2017-01-27T20:50:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1077,
+                        "key": 1485550230000,
+                        "key_as_string": "2017-01-27T20:50:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03166666666666667
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550260000,
+                        "key_as_string": "2017-01-27T20:51:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.031
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550290000,
+                        "key_as_string": "2017-01-27T20:51:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1072,
+                        "key": 1485550320000,
+                        "key_as_string": "2017-01-27T20:52:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.033
+                        },
+                        "doc_count": 1073,
+                        "key": 1485550350000,
+                        "key_as_string": "2017-01-27T20:52:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03466666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550380000,
+                        "key_as_string": "2017-01-27T20:53:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550410000,
+                        "key_as_string": "2017-01-27T20:53:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03166666666666667
+                        },
+                        "doc_count": 1069,
+                        "key": 1485550440000,
+                        "key_as_string": "2017-01-27T20:54:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1069,
+                        "key": 1485550470000,
+                        "key_as_string": "2017-01-27T20:54:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.032
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550500000,
+                        "key_as_string": "2017-01-27T20:55:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1067,
+                        "key": 1485550530000,
+                        "key_as_string": "2017-01-27T20:55:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03233333333333333
+                        },
+                        "doc_count": 1065,
+                        "key": 1485550560000,
+                        "key_as_string": "2017-01-27T20:56:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1069,
+                        "key": 1485550590000,
+                        "key_as_string": "2017-01-27T20:56:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03166666666666667
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550620000,
+                        "key_as_string": "2017-01-27T20:57:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550650000,
+                        "key_as_string": "2017-01-27T20:57:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1068,
+                        "key": 1485550680000,
+                        "key_as_string": "2017-01-27T20:58:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550710000,
+                        "key_as_string": "2017-01-27T20:58:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550740000,
+                        "key_as_string": "2017-01-27T20:59:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550770000,
+                        "key_as_string": "2017-01-27T20:59:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04
+                        },
+                        "doc_count": 1074,
+                        "key": 1485550800000,
+                        "key_as_string": "2017-01-27T21:00:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.032
+                        },
+                        "doc_count": 1076,
+                        "key": 1485550830000,
+                        "key_as_string": "2017-01-27T21:00:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1078,
+                        "key": 1485550860000,
+                        "key_as_string": "2017-01-27T21:01:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1077,
+                        "key": 1485550890000,
+                        "key_as_string": "2017-01-27T21:01:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03466666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550920000,
+                        "key_as_string": "2017-01-27T21:02:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03466666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485550950000,
+                        "key_as_string": "2017-01-27T21:02:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03566666666666667
+                        },
+                        "doc_count": 1073,
+                        "key": 1485550980000,
+                        "key_as_string": "2017-01-27T21:03:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485551010000,
+                        "key_as_string": "2017-01-27T21:03:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03466666666666667
+                        },
+                        "doc_count": 1069,
+                        "key": 1485551040000,
+                        "key_as_string": "2017-01-27T21:04:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03566666666666667
+                        },
+                        "doc_count": 1068,
+                        "key": 1485551070000,
+                        "key_as_string": "2017-01-27T21:04:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1075,
+                        "key": 1485551100000,
+                        "key_as_string": "2017-01-27T21:05:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1074,
+                        "key": 1485551130000,
+                        "key_as_string": "2017-01-27T21:05:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03133333333333333
+                        },
+                        "doc_count": 1073,
+                        "key": 1485551160000,
+                        "key_as_string": "2017-01-27T21:06:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1071,
+                        "key": 1485551190000,
+                        "key_as_string": "2017-01-27T21:06:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1075,
+                        "key": 1485551220000,
+                        "key_as_string": "2017-01-27T21:07:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03133333333333333
+                        },
+                        "doc_count": 1071,
+                        "key": 1485551250000,
+                        "key_as_string": "2017-01-27T21:07:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04733333333333334
+                        },
+                        "doc_count": 1081,
+                        "key": 1485551280000,
+                        "key_as_string": "2017-01-27T21:08:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.044333333333333336
+                        },
+                        "doc_count": 1078,
+                        "key": 1485551310000,
+                        "key_as_string": "2017-01-27T21:08:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037000000000000005
+                        },
+                        "doc_count": 1079,
+                        "key": 1485551340000,
+                        "key_as_string": "2017-01-27T21:09:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1077,
+                        "key": 1485551370000,
+                        "key_as_string": "2017-01-27T21:09:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03866666666666666
+                        },
+                        "doc_count": 1077,
+                        "key": 1485551400000,
+                        "key_as_string": "2017-01-27T21:10:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037666666666666675
+                        },
+                        "doc_count": 1075,
+                        "key": 1485551430000,
+                        "key_as_string": "2017-01-27T21:10:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.038000000000000006
+                        },
+                        "doc_count": 1078,
+                        "key": 1485551460000,
+                        "key_as_string": "2017-01-27T21:11:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037
+                        },
+                        "doc_count": 1074,
+                        "key": 1485551490000,
+                        "key_as_string": "2017-01-27T21:11:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.036666666666666674
+                        },
+                        "doc_count": 1074,
+                        "key": 1485551520000,
+                        "key_as_string": "2017-01-27T21:12:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037333333333333336
+                        },
+                        "doc_count": 1076,
+                        "key": 1485551550000,
+                        "key_as_string": "2017-01-27T21:12:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03733333333333333
+                        },
+                        "doc_count": 1075,
+                        "key": 1485551580000,
+                        "key_as_string": "2017-01-27T21:13:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04533333333333334
+                        },
+                        "doc_count": 1077,
+                        "key": 1485551610000,
+                        "key_as_string": "2017-01-27T21:13:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.039
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551640000,
+                        "key_as_string": "2017-01-27T21:14:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.057666666666666665
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551670000,
+                        "key_as_string": "2017-01-27T21:14:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.045000000000000005
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551700000,
+                        "key_as_string": "2017-01-27T21:15:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037666666666666675
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551730000,
+                        "key_as_string": "2017-01-27T21:15:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551760000,
+                        "key_as_string": "2017-01-27T21:16:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.038
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551790000,
+                        "key_as_string": "2017-01-27T21:16:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551820000,
+                        "key_as_string": "2017-01-27T21:17:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04966666666666667
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551850000,
+                        "key_as_string": "2017-01-27T21:17:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03266666666666667
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551880000,
+                        "key_as_string": "2017-01-27T21:18:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551910000,
+                        "key_as_string": "2017-01-27T21:18:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03766666666666666
+                        },
+                        "doc_count": 1080,
+                        "key": 1485551940000,
+                        "key_as_string": "2017-01-27T21:19:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034
+                        },
+                        "doc_count": 1076,
+                        "key": 1485551970000,
+                        "key_as_string": "2017-01-27T21:19:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.034333333333333334
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552000000,
+                        "key_as_string": "2017-01-27T21:20:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03366666666666667
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552030000,
+                        "key_as_string": "2017-01-27T21:20:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.029666666666666664
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552060000,
+                        "key_as_string": "2017-01-27T21:21:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.02766666666666667
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552090000,
+                        "key_as_string": "2017-01-27T21:21:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.028
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552120000,
+                        "key_as_string": "2017-01-27T21:22:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.030666666666666665
+                        },
+                        "doc_count": 1077,
+                        "key": 1485552150000,
+                        "key_as_string": "2017-01-27T21:22:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03833333333333334
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552180000,
+                        "key_as_string": "2017-01-27T21:23:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04966666666666667
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552210000,
+                        "key_as_string": "2017-01-27T21:23:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.041
+                        },
+                        "doc_count": 1082,
+                        "key": 1485552240000,
+                        "key_as_string": "2017-01-27T21:24:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037333333333333336
+                        },
+                        "doc_count": 1087,
+                        "key": 1485552270000,
+                        "key_as_string": "2017-01-27T21:24:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.039
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552300000,
+                        "key_as_string": "2017-01-27T21:25:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03933333333333333
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552330000,
+                        "key_as_string": "2017-01-27T21:25:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.037666666666666675
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552360000,
+                        "key_as_string": "2017-01-27T21:26:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04033333333333333
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552390000,
+                        "key_as_string": "2017-01-27T21:26:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03866666666666666
+                        },
+                        "doc_count": 1082,
+                        "key": 1485552420000,
+                        "key_as_string": "2017-01-27T21:27:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04033333333333334
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552450000,
+                        "key_as_string": "2017-01-27T21:27:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552480000,
+                        "key_as_string": "2017-01-27T21:28:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04033333333333333
+                        },
+                        "doc_count": 1084,
+                        "key": 1485552510000,
+                        "key_as_string": "2017-01-27T21:28:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03333333333333333
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552540000,
+                        "key_as_string": "2017-01-27T21:29:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03566666666666667
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552570000,
+                        "key_as_string": "2017-01-27T21:29:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.04466666666666667
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552600000,
+                        "key_as_string": "2017-01-27T21:30:00.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.03233333333333333
+                        },
+                        "doc_count": 1083,
+                        "key": 1485552630000,
+                        "key_as_string": "2017-01-27T21:30:30.000Z"
+                    },
+                    {
+                        "c9b5f9c1-e403-11e6-be91-6f7688e9fac7": {
+                            "value": 0.0505
+                        },
+                        "doc_count": 722,
+                        "key": 1485552660000,
+                        "key_as_string": "2017-01-27T21:31:00.000Z"
+                    }
+                ]
+            }
+        }
+    },
+    "hits": {
+        "hits": [],
+        "max_score": 0,
+        "total": 128145
+    },
+    "status": 200,
+    "timed_out": false,
+    "took": 28
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/get_interval_and_timefield.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/get_interval_and_timefield.js
new file mode 100644
index 0000000000000..5ac5d5ac88853
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/get_interval_and_timefield.js
@@ -0,0 +1,25 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import getIntervalAndTimefield from '../get_interval_and_timefield';
+
+describe('getIntervalAndTimefield(panel, series)', () => {
+
+  it('returns the panel interval and timefield', () => {
+    const panel = { time_field: '@timestamp', interval: 'auto' };
+    const series = {};
+    expect(getIntervalAndTimefield(panel, series)).to.eql({
+      timeField: '@timestamp',
+      interval: 'auto'
+    });
+  });
+
+  it('returns the series interval and timefield', () => {
+    const panel = { time_field: '@timestamp', interval: 'auto' };
+    const series = { override_index_pattern: true, series_interval: '1m', series_time_field: 'time' };
+    expect(getIntervalAndTimefield(panel, series)).to.eql({
+      timeField: 'time',
+      interval: '1m'
+    });
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/bucket_transform.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/bucket_transform.js
new file mode 100644
index 0000000000000..82305fd41491e
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/bucket_transform.js
@@ -0,0 +1,354 @@
+import { expect } from 'chai';
+import bucketTransform from '../../helpers/bucket_transform';
+
+describe('bucketTransform', () => {
+
+  describe('count', () => {
+    it ('returns count agg', () => {
+      const metric = { id: 'test', type: 'count' };
+      const fn = bucketTransform.count;
+      expect(fn(metric)).to.eql({
+        bucket_script: {
+          buckets_path: { count: '_count' },
+          script: { inline: 'count * 1', lang: 'expression' },
+          gap_policy: 'skip'
+        }
+      });
+    });
+  });
+
+  describe('std metric', () => {
+    ['avg', 'max', 'min', 'sum', 'cardinality', 'value_count'].forEach(type => {
+      it (`returns ${type} agg`, () => {
+        const metric = { id: 'test', type: type, field: 'cpu.pct' };
+        const fn = bucketTransform[type];
+        const result = {};
+        result[type] = { field: 'cpu.pct' };
+        expect(fn(metric)).to.eql(result);
+      });
+    });
+
+    it('throws error if type is missing', () => {
+      const run = () => bucketTransform.avg({ id: 'test', field: 'cpu.pct' });
+      expect(run).to.throw(Error, 'Metric missing type');
+    });
+
+    it('throws error if field is missing', () => {
+      const run = () => bucketTransform.avg({ id: 'test', type: 'avg' });
+      expect(run).to.throw(Error, 'Metric missing field');
+    });
+  });
+
+  describe('extended stats', () => {
+    ['std_deviation', 'variance', 'sum_of_squares'].forEach(type => {
+      it (`returns ${type} agg`, () => {
+        const fn = bucketTransform[type];
+        const metric = { id: 'test', type: type, field: 'cpu.pct' };
+        expect(fn(metric)).to.eql({ extended_stats: { field: 'cpu.pct' } });
+      });
+    });
+
+    it('returns std_deviation agg with sigma', () => {
+      const fn = bucketTransform.std_deviation;
+      const metric = { id: 'test', type: 'std_deviation', field: 'cpu.pct', sigma: 2 };
+      expect(fn(metric)).to.eql({ extended_stats: { field: 'cpu.pct', sigma: 2 } });
+    });
+
+    it('throws error if type is missing', () => {
+      const run = () => bucketTransform.std_deviation({ id: 'test', field: 'cpu.pct' });
+      expect(run).to.throw(Error, 'Metric missing type');
+    });
+
+    it('throws error if field is missing', () => {
+      const run = () => bucketTransform.std_deviation({ id: 'test', type: 'avg' });
+      expect(run).to.throw(Error, 'Metric missing field');
+    });
+  });
+
+  describe('percentiles', () => {
+    it('returns percentiles agg', () => {
+      const metric = {
+        id: 'test',
+        type: 'percentile',
+        field: 'cpu.pct',
+        percentiles: [
+          { value: 50, mode: 'line' },
+          { value: 10, mode: 'band', percentile: 90 }
+        ]
+      };
+      const fn = bucketTransform.percentile;
+      expect(fn(metric)).to.eql({
+        percentiles: {
+          field: 'cpu.pct',
+          percents: [
+            50,
+            10,
+            90
+          ]
+        }
+      });
+
+    });
+
+    it('throws error if type is missing', () => {
+      const run = () => bucketTransform.percentile({ id: 'test', field: 'cpu.pct', percentiles: [{ value: 50, mode: 'line' }] });
+      expect(run).to.throw(Error, 'Metric missing type');
+    });
+
+    it('throws error if field is missing', () => {
+      const run = () => bucketTransform.percentile({ id: 'test', type: 'avg', percentiles: [{ value: 50, mode: 'line' }] });
+      expect(run).to.throw(Error, 'Metric missing field');
+    });
+
+    it('throws error if percentiles is missing', () => {
+      const run = () => bucketTransform.percentile({ id: 'test', type: 'avg', field: 'cpu.pct' });
+      expect(run).to.throw(Error, 'Metric missing percentiles');
+    });
+  });
+
+  describe('derivative', () => {
+    it('returns derivative agg with defaults', () => {
+      const metric = {
+        id: '2',
+        type: 'derivative',
+        field: '1',
+      };
+      const metrics = [{ id: '1', type: 'max', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.derivative;
+      expect(fn(metric, metrics, '10s')).is.eql({
+        derivative: {
+          buckets_path: '1',
+          gap_policy: 'skip',
+          unit: '10s'
+        }
+      });
+    });
+
+    it('returns derivative agg with unit', () => {
+      const metric = {
+        id: '2',
+        type: 'derivative',
+        field: '1',
+        unit: '1s'
+      };
+      const metrics = [{ id: '1', type: 'max', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.derivative;
+      expect(fn(metric, metrics, '10s')).is.eql({
+        derivative: {
+          buckets_path: '1',
+          gap_policy: 'skip',
+          unit: '1s'
+        }
+      });
+    });
+
+    it('returns derivative agg with gap_policy', () => {
+      const metric = {
+        id: '2',
+        type: 'derivative',
+        field: '1',
+        gap_policy: 'zero_fill'
+      };
+      const metrics = [{ id: '1', type: 'max', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.derivative;
+      expect(fn(metric, metrics, '10s')).is.eql({
+        derivative: {
+          buckets_path: '1',
+          gap_policy: 'zero_fill',
+          unit: '10s'
+        }
+      });
+    });
+
+    it('throws error if type is missing', () => {
+      const run = () => bucketTransform.derivative({ id: 'test', field: 'cpu.pct' });
+      expect(run).to.throw(Error, 'Metric missing type');
+    });
+
+    it('throws error if field is missing', () => {
+      const run = () => bucketTransform.derivative({ id: 'test', type: 'derivative' });
+      expect(run).to.throw(Error, 'Metric missing field');
+    });
+  });
+
+  describe('serial_diff', () => {
+    it('returns serial_diff agg with defaults', () => {
+      const metric = {
+        id: '2',
+        type: 'serial_diff',
+        field: '1',
+      };
+      const metrics = [{ id: '1', type: 'max', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.serial_diff;
+      expect(fn(metric, metrics)).is.eql({
+        serial_diff: {
+          buckets_path: '1',
+          gap_policy: 'skip',
+          lag: 1
+        }
+      });
+    });
+
+    it('returns serial_diff agg with lag', () => {
+      const metric = {
+        id: '2',
+        type: 'serial_diff',
+        field: '1',
+        lag: 10
+      };
+      const metrics = [{ id: '1', type: 'max', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.serial_diff;
+      expect(fn(metric, metrics)).is.eql({
+        serial_diff: {
+          buckets_path: '1',
+          gap_policy: 'skip',
+          lag: 10
+        }
+      });
+    });
+
+    it('returns serial_diff agg with gap_policy', () => {
+      const metric = {
+        id: '2',
+        type: 'serial_diff',
+        field: '1',
+        gap_policy: 'zero_fill'
+      };
+      const metrics = [{ id: '1', type: 'max', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.serial_diff;
+      expect(fn(metric, metrics)).is.eql({
+        serial_diff: {
+          buckets_path: '1',
+          gap_policy: 'zero_fill',
+          lag: 1
+        }
+      });
+    });
+
+    it('throws error if type is missing', () => {
+      const run = () => bucketTransform.serial_diff({ id: 'test', field: 'cpu.pct' });
+      expect(run).to.throw(Error, 'Metric missing type');
+    });
+
+    it('throws error if field is missing', () => {
+      const run = () => bucketTransform.serial_diff({ id: 'test', type: 'serial_diff' });
+      expect(run).to.throw(Error, 'Metric missing field');
+    });
+  });
+
+  describe('cumulative_sum', () => {
+    it('returns cumulative_sum agg', () => {
+      const metric = { id: '2', type: 'cumulative_sum', field: '1' };
+      const metrics = [{ id: '1', type: 'sum', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.cumulative_sum;
+      expect(fn(metric, metrics, '10s')).is.eql({
+        cumulative_sum: { buckets_path: '1' }
+      });
+    });
+
+    it('throws error if type is missing', () => {
+      const run = () => bucketTransform.cumulative_sum({ id: 'test', field: 'cpu.pct' });
+      expect(run).to.throw(Error, 'Metric missing type');
+    });
+
+    it('throws error if field is missing', () => {
+      const run = () => bucketTransform.cumulative_sum({ id: 'test', type: 'cumulative_sum' });
+      expect(run).to.throw(Error, 'Metric missing field');
+    });
+  });
+
+  describe('moving_average', () => {
+    it('returns moving_average agg with defaults', () => {
+      const metric = { id: '2', type: 'moving_average', field: '1' };
+      const metrics = [{ id: '1', type: 'avg', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.moving_average;
+      expect(fn(metric, metrics, '10s')).is.eql({
+        moving_avg: {
+          buckets_path: '1',
+          model: 'simple',
+          gap_policy: 'skip'
+        }
+      });
+    });
+
+    it('returns moving_average agg with options', () => {
+      const metric = {
+        id: '2',
+        type: 'moving_average',
+        field: '1',
+        model: 'holt_winters',
+        window: 10,
+        minimize: 1,
+        settings: 'alpha=0.9 beta=0.5'
+      };
+      const metrics = [{ id: '1', type: 'avg', field: 'cpu.pct' }, metric];
+      const fn = bucketTransform.moving_average;
+      expect(fn(metric, metrics, '10s')).is.eql({
+        moving_avg: {
+          buckets_path: '1',
+          model: 'holt_winters',
+          gap_policy: 'skip',
+          window: 10,
+          minimize: true,
+          settings: {
+            alpha: 0.9,
+            beta: 0.5
+          }
+        }
+      });
+    });
+
+    it('throws error if type is missing', () => {
+      const run = () => bucketTransform.moving_average({ id: 'test', field: 'cpu.pct' });
+      expect(run).to.throw(Error, 'Metric missing type');
+    });
+
+    it('throws error if field is missing', () => {
+      const run = () => bucketTransform.moving_average({ id: 'test', type: 'moving_average' });
+      expect(run).to.throw(Error, 'Metric missing field');
+    });
+  });
+
+  describe('calculation', () => {
+    it('returns calculation(bucket_script)', () => {
+      const metric = {
+        id: '2',
+        type: 'calculation',
+        script: 'params.idle != null ? 1 - params.idle : 0',
+        variables: [{ name: 'idle', field: '1' }]
+      };
+      const metrics = [{ id: '1', type: 'avg', field: 'cpu.idle.pct' }, metric];
+      const fn = bucketTransform.calculation;
+      expect(fn(metric, metrics, '10s')).is.eql({
+        bucket_script: {
+          buckets_path: {
+            idle: '1'
+          },
+          gap_policy: 'skip',
+          script: {
+            inline: 'params.idle != null ? 1 - params.idle : 0',
+            lang: 'painless'
+          }
+        }
+      });
+    });
+
+    it('throws error if variables is missing', () => {
+      const run = () => bucketTransform.calculation({
+        id: 'test',
+        type: 'calculation',
+        script: 'params.idle != null ? 1 - params.idle : null'
+      });
+      expect(run).to.throw(Error, 'Metric missing variables');
+    });
+
+    it('throws error if script is missing', () => {
+      const run = () => bucketTransform.calculation({
+        id: 'test',
+        type: 'calculation',
+        variables: [{ field: '1', name: 'idle' }]
+      });
+      expect(run).to.throw(Error, 'Metric missing script');
+    });
+  });
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_agg_value.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_agg_value.js
new file mode 100644
index 0000000000000..589ab1453ea22
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_agg_value.js
@@ -0,0 +1,79 @@
+import { expect } from 'chai';
+import getAggValue from '../../helpers/get_agg_value';
+
+function testAgg(row, metric, expected) {
+  let name = metric.type;
+  if (metric.mode) name += `(${metric.mode})`;
+  if (metric.percent) name += `(${metric.percent})`;
+  it(`it should return ${name}`, () => {
+    const value = getAggValue(row, metric);
+    expect(value).to.eql(expected);
+  });
+}
+
+describe('getAggValue', () => {
+
+  describe('extended_stats', () => {
+    const row = {
+      'test': {
+        'count': 9,
+        'min': 72,
+        'max': 99,
+        'avg': 86,
+        'sum': 774,
+        'sum_of_squares': 67028,
+        'variance': 51.55555555555556,
+        'std_deviation': 7.180219742846005,
+        'std_deviation_bounds': {
+          'upper': 100.36043948569201,
+          'lower': 71.63956051430799
+        }
+      }
+    };
+    testAgg(row, { id: 'test', type: 'std_deviation' }, 7.180219742846005);
+    testAgg(row, { id: 'test', type: 'variance' }, 51.55555555555556);
+    testAgg(row, { id: 'test', type: 'sum_of_squares' }, 67028);
+    testAgg(row, { id: 'test', type: 'std_deviation', mode: 'upper' }, 100.36043948569201);
+    testAgg(row, { id: 'test', type: 'std_deviation', mode: 'lower' }, 71.63956051430799);
+  });
+
+  describe('percentile', () => {
+    const row = {
+      'test': {
+        'values': {
+          '1.0': 15,
+          '5.0': 20,
+          '25.0': 23,
+          '50.0': 25,
+          '75.0': 29,
+          '95.0': 60,
+          '99.0': 150
+        }
+      }
+    };
+    testAgg(row, { id: 'test', type: 'percentile', percent: '50' }, 25);
+    testAgg(row, { id: 'test', type: 'percentile', percent: '1.0' }, 15);
+  });
+
+  const basicWithDerv = {
+    'key_as_string': '2015/02/01 00:00:00',
+    'key': 1422748800000,
+    'doc_count': 2,
+    'test': {
+      'value': 60.0
+    },
+    'test_deriv': {
+      'value': -490.0,
+      'normalized_value': -15.806451612903226
+    }
+  };
+
+  describe('derivative', () => {
+    testAgg(basicWithDerv, { id: 'test_deriv', type: 'derivative' }, -15.806451612903226);
+  });
+
+  describe('basic metric', () => {
+    testAgg(basicWithDerv, { id: 'test', type: 'avg' }, 60.0);
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_bucket_size.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_bucket_size.js
new file mode 100644
index 0000000000000..c22c744b1b213
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_bucket_size.js
@@ -0,0 +1,38 @@
+import { expect } from 'chai';
+import getBucketSize from '../../helpers/get_bucket_size';
+
+describe('getBucketSize', () => {
+  const req = {
+    payload: {
+      timerange: {
+        min: '2017-01-01T00:00:00.000Z',
+        max: '2017-01-01T01:00:00.000Z',
+      }
+    }
+  };
+
+  it('returns auto calulated buckets', () => {
+    const result = getBucketSize(req, 'auto');
+    expect(result).to.have.property('bucketSize', 30);
+    expect(result).to.have.property('intervalString', '30s');
+  });
+
+  it('returns overriden buckets (1s)', () => {
+    const result = getBucketSize(req, '1s');
+    expect(result).to.have.property('bucketSize', 1);
+    expect(result).to.have.property('intervalString', '1s');
+  });
+
+  it('returns overriden buckets (10m)', () => {
+    const result = getBucketSize(req, '10m');
+    expect(result).to.have.property('bucketSize', 600);
+    expect(result).to.have.property('intervalString', '10m');
+  });
+
+  it('returns overriden buckets (1d)', () => {
+    const result = getBucketSize(req, '1d');
+    expect(result).to.have.property('bucketSize', 86400);
+    expect(result).to.have.property('intervalString', '1d');
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_buckets_path.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_buckets_path.js
new file mode 100644
index 0000000000000..fb9104e0e20d1
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_buckets_path.js
@@ -0,0 +1,56 @@
+import { expect } from 'chai';
+import getBucketsPath from '../../helpers/get_buckets_path';
+
+describe('getBucketsPath', () => {
+
+  const metrics = [
+    { id: 1, type: 'derivative' },
+    { id: 2, type: 'percentile', percent: '50' },
+    { id: 3, type: 'percentile', percent: '20.0' },
+    { id: 4, type: 'std_deviation', mode: 'raw' },
+    { id: 5, type: 'std_deviation', mode: 'upper' },
+    { id: 6, type: 'std_deviation', mode: 'lower' },
+    { id: 7, type: 'sum_of_squares' },
+    { id: 8, type: 'variance' },
+    { id: 9, type: 'max' }
+  ];
+
+  it('return path for derivative', () => {
+    expect(getBucketsPath(1, metrics)).to.equal('1[normalized_value]');
+  });
+
+  it('return path for percentile(50)', () => {
+    expect(getBucketsPath(2, metrics)).to.equal('2[50.0]');
+  });
+
+  it('return path for percentile(20.0)', () => {
+    expect(getBucketsPath(3, metrics)).to.equal('3[20.0]');
+  });
+
+  it('return path for std_deviation(raw)', () => {
+    expect(getBucketsPath(4, metrics)).to.equal('4[std_deviation]');
+  });
+
+  it('return path for std_deviation(upper)', () => {
+    expect(getBucketsPath(5, metrics)).to.equal('5[std_upper]');
+  });
+
+  it('return path for std_deviation(lower)', () => {
+    expect(getBucketsPath(6, metrics)).to.equal('6[std_lower]');
+  });
+
+  it('return path for sum_of_squares', () => {
+    expect(getBucketsPath(7, metrics)).to.equal('7[sum_of_squares]');
+  });
+
+  it('return path for variance', () => {
+    expect(getBucketsPath(8, metrics)).to.equal('8[variance]');
+  });
+
+  it('return path for basic metric', () => {
+    expect(getBucketsPath(9, metrics)).to.equal('9');
+  });
+
+
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_default_decoration.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_default_decoration.js
new file mode 100644
index 0000000000000..8976e55e099b6
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_default_decoration.js
@@ -0,0 +1,95 @@
+import { expect } from 'chai';
+import getDefaultDecoration from '../../helpers/get_default_decoration';
+
+describe('getDefaultDecoration', () => {
+
+  describe('lines', () => {
+    it('return decoration for lines', () => {
+      const series = {
+        point_size: 10,
+        chart_type: 'line',
+        line_width: 10,
+        fill: 1
+      };
+      const result = getDefaultDecoration(series);
+      expect(result.lines)
+        .to.have.property('show', true);
+      expect(result.lines)
+        .to.have.property('fill', 1);
+      expect(result.lines)
+        .to.have.property('lineWidth', 10);
+      expect(result.points)
+        .to.have.property('show', true);
+      expect(result.points)
+        .to.have.property('radius', 1);
+      expect(result.points)
+        .to.have.property('lineWidth', 10);
+      expect(result.bars)
+        .to.have.property('show', false);
+      expect(result.bars)
+        .to.have.property('fill', 1);
+      expect(result.bars)
+        .to.have.property('lineWidth', 10);
+    });
+
+    it('return decoration for lines without points', () => {
+      const series = {
+        chart_type: 'line',
+        line_width: 10,
+        fill: 1
+      };
+      const result = getDefaultDecoration(series);
+      expect(result.points)
+        .to.have.property('show', true);
+      expect(result.points)
+        .to.have.property('lineWidth', 10);
+    });
+
+    it('return decoration for lines with points set to zero (off)', () => {
+      const series = {
+        chart_type: 'line',
+        line_width: 10,
+        fill: 1,
+        point_size: 0
+      };
+      const result = getDefaultDecoration(series);
+      expect(result.points)
+        .to.have.property('show', false);
+    });
+
+    it('return decoration for lines (off)', () => {
+      const series = {
+        chart_type: 'line',
+        line_width: 0,
+      };
+      const result = getDefaultDecoration(series);
+      expect(result.lines)
+        .to.have.property('show', false);
+    });
+  });
+
+  describe('bars', () => {
+
+    it('return decoration for bars', () => {
+      const series = {
+        chart_type: 'bar',
+        line_width: 10,
+        fill: 1
+      };
+      const result = getDefaultDecoration(series);
+      expect(result.lines)
+        .to.have.property('show', false);
+      expect(result.points)
+        .to.have.property('show', false);
+      expect(result.bars)
+        .to.have.property('show', true);
+      expect(result.bars)
+        .to.have.property('fill', 1);
+      expect(result.bars)
+        .to.have.property('lineWidth', 10);
+    });
+
+  });
+
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_last_metric.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_last_metric.js
new file mode 100644
index 0000000000000..d60dcdb8895c7
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_last_metric.js
@@ -0,0 +1,23 @@
+import { expect } from 'chai';
+import getLastMetric from '../../helpers/get_last_metric';
+
+describe('getLastMetric(series)', () => {
+  it('returns the last metric', () => {
+    const series = {
+      metrics: [
+        { id: 1, type: 'avg' },
+        { id: 2, type: 'moving_average' }
+      ]
+    };
+    expect(getLastMetric(series)).to.eql({ id: 2, type: 'moving_average' });
+  });
+  it('returns the last metric that not a series_agg', () => {
+    const series = {
+      metrics: [
+        { id: 1, type: 'avg' },
+        { id: 2, type: 'series_agg' }
+      ]
+    };
+    expect(getLastMetric(series)).to.eql({ id: 1, type: 'avg' });
+  });
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_sibling_agg_value.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_sibling_agg_value.js
new file mode 100644
index 0000000000000..1e98b15b03467
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_sibling_agg_value.js
@@ -0,0 +1,36 @@
+import { expect } from 'chai';
+import getSiblingAggValue from '../../helpers/get_sibling_agg_value';
+
+describe('getSiblingAggValue', () => {
+  const row = {
+    test: {
+      max: 3,
+      std_deviation: 1.5,
+      std_deviation_bounds: {
+        upper: 2,
+        lower: 1
+      }
+    }
+  };
+
+  it('returns the value for std_deviation_bounds.upper', () => {
+    const metric = { id: 'test', type: 'std_deviation_bucket', mode: 'upper' };
+    expect(getSiblingAggValue(row, metric)).to.equal(2);
+  });
+
+  it('returns the value for std_deviation_bounds.lower', () => {
+    const metric = { id: 'test', type: 'std_deviation_bucket', mode: 'lower' };
+    expect(getSiblingAggValue(row, metric)).to.equal(1);
+  });
+
+  it('returns the value for std_deviation', () => {
+    const metric = { id: 'test', type: 'std_deviation_bucket', mode: 'raw' };
+    expect(getSiblingAggValue(row, metric)).to.equal(1.5);
+  });
+
+  it('returns the value for basic (max)', () => {
+    const metric = { id: 'test', type: 'max_bucket' };
+    expect(getSiblingAggValue(row, metric)).to.equal(3);
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_splits.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_splits.js
new file mode 100644
index 0000000000000..024469d5442f1
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_splits.js
@@ -0,0 +1,130 @@
+import { expect } from 'chai';
+import getSplits from '../../helpers/get_splits';
+
+describe('getSplits(resp, series)', () => {
+
+  it('should return a splits for everything/filter group bys', () => {
+    const resp = {
+      aggregations: {
+        SERIES: {
+          timeseries: { buckets: [] },
+          SIBAGG: { value: 1 }
+        }
+      }
+    };
+    const series = {
+      id: 'SERIES',
+      color: '#F00',
+      split_mode: 'everything',
+      metrics: [
+        { id: 'AVG', type: 'avg', field: 'cpu' },
+        { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' }
+      ]
+    };
+    expect(getSplits(resp, series)).to.eql([
+      {
+        id: 'SERIES',
+        label: 'Overall Average of Average of cpu',
+        color: '#FF0000',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 1 }
+      }
+    ]);
+  });
+
+  it('should return a splits for terms group bys', () => {
+    const resp = {
+      aggregations: {
+        SERIES: {
+          buckets: [
+            {
+              key: 'example-01',
+              timeseries: { buckets: [] },
+              SIBAGG: { value: 1 }
+            },
+            {
+              key: 'example-02',
+              timeseries: { buckets: [] },
+              SIBAGG: { value: 2 }
+            }
+          ]
+        }
+      }
+    };
+    const series = {
+      id: 'SERIES',
+      color: '#F00',
+      split_mode: 'terms',
+      terms_field: 'beat.hostname',
+      terms_size: 10,
+      metrics: [
+        { id: 'AVG', type: 'avg', field: 'cpu' },
+        { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' }
+      ]
+    };
+    expect(getSplits(resp, series)).to.eql([
+      {
+        id: 'SERIES:example-01',
+        key: 'example-01',
+        label: 'example-01',
+        color: '#FF0000',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 1 }
+      },
+      {
+        id: 'SERIES:example-02',
+        key: 'example-02',
+        label: 'example-02',
+        color: '#930000',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 2 }
+      }
+    ]);
+  });
+
+  it('should return a splits for filters group bys', () => {
+    const resp = {
+      aggregations: {
+        SERIES: {
+          buckets: {
+            'filter-1': {
+              timeseries: { buckets: [] },
+            },
+            'filter-2': {
+              timeseries: { buckets: [] },
+            }
+          }
+        }
+      }
+    };
+    const series = {
+      id: 'SERIES',
+      color: '#F00',
+      split_mode: 'filters',
+      split_filters: [
+        { id: 'filter-1', color: '#F00', filter: 'status_code:[* TO 200]', label: '200s' },
+        { id: 'filter-2', color: '#0F0', filter: 'status_code:[300 TO *]', label: '300s' }
+      ],
+      metrics: [
+        { id: 'COUNT', type: 'count' },
+      ]
+    };
+    expect(getSplits(resp, series)).to.eql([
+      {
+        id: 'SERIES:filter-1',
+        key: 'filter-1',
+        label: '200s',
+        color: '#F00',
+        timeseries: { buckets: [] },
+      },
+      {
+        id: 'SERIES:filter-2',
+        key: 'filter-2',
+        label: '300s',
+        color: '#0F0',
+        timeseries: { buckets: [] },
+      }
+    ]);
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_timerange.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_timerange.js
new file mode 100644
index 0000000000000..81c62fa245f11
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/get_timerange.js
@@ -0,0 +1,24 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import getTimerange from '../../helpers/get_timerange';
+import moment from 'moment';
+
+describe('getTimerange(req)', () => {
+  it('should return a moment object for to and from', () => {
+    const req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+    const { from, to } = getTimerange(req);
+    expect(moment.isMoment(from)).to.equal(true);
+    expect(moment.isMoment(to)).to.equal(true);
+    expect(moment.utc('2017-01-01T00:00:00Z')
+      .isSame(from)).to.equal(true);
+    expect(moment.utc('2017-01-01T01:00:00Z')
+      .isSame(to)).to.equal(true);
+  });
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/map_bucket.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/map_bucket.js
new file mode 100644
index 0000000000000..bdffbe7fd1398
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/map_bucket.js
@@ -0,0 +1,37 @@
+import mapBucket from '../../helpers/map_bucket';
+import { expect } from 'chai';
+
+describe('mapBucket(metric)', () => {
+  it('returns bucket key and value for basic metric', () => {
+    const metric = { id: 'AVG', type: 'avg' };
+    const bucket = {
+      key: 1234,
+      AVG: { value: 1 }
+    };
+    expect(mapBucket(metric)(bucket)).to.eql([1234, 1]);
+  });
+  it('returns bucket key and value for std_deviation', () => {
+    const metric = { id: 'STDDEV', type: 'std_deviation' };
+    const bucket = {
+      key: 1234,
+      STDDEV: { std_deviation: 1 }
+    };
+    expect(mapBucket(metric)(bucket)).to.eql([1234, 1]);
+  });
+  it('returns bucket key and value for percentiles', () => {
+    const metric = { id: 'PCT', type: 'percentile', percent: 50 };
+    const bucket = {
+      key: 1234,
+      PCT: { values: { '50.0': 1 } }
+    };
+    expect(mapBucket(metric)(bucket)).to.eql([1234, 1]);
+  });
+  it('returns bucket key and value for derivative', () => {
+    const metric = { id: 'DERV', type: 'derivative', field: 'io', unit: '1s' };
+    const bucket = {
+      key: 1234,
+      DERV: { value: 100, normalized_value: 1 }
+    };
+    expect(mapBucket(metric)(bucket)).to.eql([1234, 1]);
+  });
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/parse_settings.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/parse_settings.js
new file mode 100644
index 0000000000000..ce62a61a9e063
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/helpers/parse_settings.js
@@ -0,0 +1,51 @@
+import { expect } from 'chai';
+import parseSettings from '../../helpers/parse_settings';
+
+describe('parseSettings', () => {
+  it('returns the true for "true"', () => {
+    const settings = 'pad=true';
+    expect(parseSettings(settings)).to.eql({
+      pad: true,
+    });
+  });
+
+  it('returns the false for "false"', () => {
+    const settings = 'pad=false';
+    expect(parseSettings(settings)).to.eql({
+      pad: false,
+    });
+  });
+
+  it('returns the true for "true"', () => {
+    const settings = 'pad=true';
+    expect(parseSettings(settings)).to.eql({
+      pad: true,
+    });
+  });
+
+  it('returns the true for 1', () => {
+    const settings = 'pad=1';
+    expect(parseSettings(settings)).to.eql({
+      pad: true,
+    });
+  });
+
+  it('returns the false for 0', () => {
+    const settings = 'pad=0';
+    expect(parseSettings(settings)).to.eql({
+      pad: false,
+    });
+  });
+
+  it('returns the settings as an object', () => {
+    const settings = 'alpha=0.9 beta=0.4 gamma=0.2 period=5 pad=false type=add';
+    expect(parseSettings(settings)).to.eql({
+      alpha: 0.9,
+      beta: 0.4,
+      gamma: 0.2,
+      period: 5,
+      pad: false,
+      type: 'add'
+    });
+  });
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/offset_time.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/offset_time.js
new file mode 100644
index 0000000000000..d34415d0f83cd
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/offset_time.js
@@ -0,0 +1,44 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import moment from 'moment';
+import offsetTime from '../offset_time';
+
+describe('offsetTime(req, by)', () => {
+  it('should return a moment object for to and from', () => {
+    const req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+    const { from, to } = offsetTime(req, '');
+    expect(moment.isMoment(from)).to.equal(true);
+    expect(moment.isMoment(to)).to.equal(true);
+    expect(moment.utc('2017-01-01T00:00:00Z')
+      .isSame(from)).to.equal(true);
+    expect(moment.utc('2017-01-01T01:00:00Z')
+      .isSame(to)).to.equal(true);
+  });
+
+  it('should return a moment object for to and from offset by 1 hour', () => {
+    const req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+    const { from, to } = offsetTime(req, '1h');
+    expect(moment.isMoment(from)).to.equal(true);
+    expect(moment.isMoment(to)).to.equal(true);
+    expect(moment.utc('2017-01-01T00:00:00Z').subtract(1, 'h')
+      .isSame(from)).to.equal(true);
+    expect(moment.utc('2017-01-01T01:00:00Z').subtract(1, 'h')
+      .isSame(to)).to.equal(true);
+  });
+
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/build_annotation_request.js b/src/core_plugins/metrics/server/lib/vis_data/build_annotation_request.js
new file mode 100644
index 0000000000000..0f263339077c0
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/build_annotation_request.js
@@ -0,0 +1,8 @@
+import buildProcessorFunction from './build_processor_function';
+import processors from './request_processors/annotations';
+
+export default function buildAnnotationRequest(req, panel, annotation) {
+  const processor = buildProcessorFunction(processors, req, panel, annotation);
+  const doc = processor({});
+  return doc;
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/build_processor_function.js b/src/core_plugins/metrics/server/lib/vis_data/build_processor_function.js
new file mode 100644
index 0000000000000..bb07145f8c7d6
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/build_processor_function.js
@@ -0,0 +1,5 @@
+export default function buildProcessorFunction(chain, ...args) {
+  return chain.reduceRight((next, fn) => {
+    return fn(...args)(next);
+  }, doc => doc);
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/build_request_body.js b/src/core_plugins/metrics/server/lib/vis_data/build_request_body.js
new file mode 100644
index 0000000000000..c64734b505d43
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/build_request_body.js
@@ -0,0 +1,10 @@
+import buildProcessorFunction from './build_processor_function';
+import processors from './request_processors/series';
+
+function buildRequestBody(req, panel, series) {
+  const processor = buildProcessorFunction(processors, req, panel, series);
+  const doc = processor({});
+  return doc;
+}
+
+export default buildRequestBody;
diff --git a/src/core_plugins/metrics/server/lib/vis_data/calculate_indices.js b/src/core_plugins/metrics/server/lib/vis_data/calculate_indices.js
new file mode 100644
index 0000000000000..bb9852a7d99b8
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/calculate_indices.js
@@ -0,0 +1,46 @@
+import _ from 'lodash';
+import offsetTime from './offset_time';
+
+function getParams(req, indexPattern, timeField, offsetBy) {
+
+  const { from, to } = offsetTime(req, offsetBy);
+
+  const indexConstraints = {};
+  indexConstraints[timeField] = {
+    max_value: { gte: from.toISOString() },
+    min_value: { lte: to.toISOString() }
+  };
+
+  return {
+    index: indexPattern,
+    level: 'indices',
+    ignoreUnavailable: true,
+    body: {
+      fields: [timeField],
+      index_constraints: indexConstraints
+    }
+  };
+
+}
+
+function handleResponse(resp) {
+  const indices = _.map(resp.indices, (_info, index) => index);
+  if (indices.length === 0) {
+    // there are no relevant indices for the given timeframe in the data
+    return [];
+  }
+  return indices;
+}
+
+function calculateIndices(req, indexPattern = '*', timeField = '@timestamp', offsetBy) {
+  const { server } = req;
+  const { callWithRequest } = server.plugins.elasticsearch.getCluster('data');
+  const params = getParams(req, indexPattern, timeField, offsetBy);
+  return callWithRequest(req, 'fieldStats', params)
+    .then(handleResponse);
+}
+
+
+calculateIndices.handleResponse = handleResponse;
+calculateIndices.getParams = getParams;
+export default calculateIndices;
diff --git a/src/core_plugins/metrics/server/lib/vis_data/get_annotations.js b/src/core_plugins/metrics/server/lib/vis_data/get_annotations.js
new file mode 100644
index 0000000000000..f578e6eee9060
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/get_annotations.js
@@ -0,0 +1,59 @@
+import calculateIndices from './calculate_indices';
+import buildAnnotationRequest from './build_annotation_request';
+import handleAnnotationResponse from './handle_annotation_response';
+
+function validAnnotation(annotation) {
+  return annotation.index_pattern &&
+    annotation.time_field &&
+    annotation.fields &&
+    annotation.icon &&
+    annotation.template;
+}
+
+export default (req, panel) => {
+  const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('data');
+  return Promise.all(panel.annotations
+    .filter(validAnnotation)
+    .map(annotation => {
+
+      const indexPattern = annotation.index_pattern;
+      const timeField = annotation.time_field;
+
+      return calculateIndices(req, indexPattern, timeField).then(indices => {
+        const bodies = [];
+
+        if (!indices.length) throw new Error('missing-indices');
+        bodies.push({
+          index: indices,
+          ignore: [404],
+          timeout: '90s',
+          requestTimeout: 90000,
+          ignoreUnavailable: true,
+        });
+
+        bodies.push(buildAnnotationRequest(req, panel, annotation));
+        return bodies;
+      });
+    }))
+    .then(bodies => {
+      if (!bodies.length) return { responses: [] };
+      return callWithRequest(req, 'msearch', {
+        body: bodies.reduce((acc, item) => acc.concat(item), [])
+      });
+    })
+    .then(resp => {
+      const results = {};
+      panel.annotations
+        .filter(validAnnotation)
+        .forEach((annotation, index) => {
+          const data = resp.responses[index];
+          results[annotation.id] = handleAnnotationResponse(data, annotation);
+        });
+      return results;
+    })
+    .catch(error => {
+      if (error.message === 'missing-indices') return {};
+      throw error;
+    });
+};
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/get_interval_and_timefield.js b/src/core_plugins/metrics/server/lib/vis_data/get_interval_and_timefield.js
new file mode 100644
index 0000000000000..52ebf91997bef
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/get_interval_and_timefield.js
@@ -0,0 +1,5 @@
+export default function getIntervalAndTimefield(panel, series) {
+  const timeField = series.override_index_pattern && series.series_time_field || panel.time_field;
+  const interval = series.override_index_pattern && series.series_interval || panel.interval;
+  return { timeField, interval };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/get_panel_data.js b/src/core_plugins/metrics/server/lib/vis_data/get_panel_data.js
new file mode 100644
index 0000000000000..59a8351ece768
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/get_panel_data.js
@@ -0,0 +1,34 @@
+import getRequestParams from './get_request_params';
+import handleResponseBody from './handle_response_body';
+import handleErrorResponse from './handle_error_response';
+import getAnnotations from './get_annotations';
+export default function getPanelData(req) {
+  const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('data');
+  return panel => {
+
+    return Promise.all(panel.series.map(series => getRequestParams(req, panel, series)))
+      .then((bodies) => {
+        const params = {
+          body: bodies.reduce((acc, items) => acc.concat(items), [])
+        };
+        return callWithRequest(req, 'msearch', params);
+      })
+      .then(resp => {
+        const series = resp.responses.map(handleResponseBody(panel));
+        return {
+          [panel.id]: {
+            id: panel.id,
+            series: series.reduce((acc, series) => acc.concat(series), [])
+          }
+        };
+      })
+      .then(resp => {
+        if (!panel.annotations) return resp;
+        return getAnnotations(req, panel).then(annotations => {
+          resp[panel.id].annotations = annotations;
+          return resp;
+        });
+      })
+      .catch(handleErrorResponse(panel));
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/get_request_params.js b/src/core_plugins/metrics/server/lib/vis_data/get_request_params.js
new file mode 100644
index 0000000000000..1a51b395e76c7
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/get_request_params.js
@@ -0,0 +1,23 @@
+import calculateIndices from './calculate_indices';
+import buildRequestBody from './build_request_body';
+import getIntervalAndTimefield from './get_interval_and_timefield';
+
+export default (req, panel, series) => {
+  const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
+  const { timeField, interval } = getIntervalAndTimefield(panel, series);
+
+  return calculateIndices(req, indexPattern, timeField, series.offset_time).then(indices => {
+    const bodies = [];
+
+    bodies.push({
+      index: indices,
+      ignore: [404],
+      timeout: '90s',
+      requestTimeout: 90000,
+      ignoreUnavailable: true,
+    });
+
+    bodies.push(buildRequestBody(req, panel, series));
+    return bodies;
+  });
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/handle_annotation_response.js b/src/core_plugins/metrics/server/lib/vis_data/handle_annotation_response.js
new file mode 100644
index 0000000000000..c5c92519a310f
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/handle_annotation_response.js
@@ -0,0 +1,11 @@
+import _ from 'lodash';
+export default function handleAnnotationResponse(resp, annotation) {
+  return _.get(resp, `aggregations.${annotation.id}.buckets`, [])
+    .filter(bucket => bucket.hits.hits.total)
+    .map((bucket) => {
+      return {
+        key: bucket.key,
+        docs: bucket.hits.hits.hits.map(doc => doc._source)
+      };
+    });
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/handle_error_response.js b/src/core_plugins/metrics/server/lib/vis_data/handle_error_response.js
new file mode 100644
index 0000000000000..d37cd7592df5d
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/handle_error_response.js
@@ -0,0 +1,17 @@
+export default panel => error => {
+  console.log(error);
+  const result = {};
+  let errorResponse;
+  try {
+    errorResponse = JSON.parse(error.response);
+  } catch (e) {
+    errorResponse = error.response;
+  }
+  result[panel.id] = {
+    id: panel.id,
+    statusCode: error.statusCode,
+    error: errorResponse || error,
+    series: []
+  };
+  return result;
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/handle_response_body.js b/src/core_plugins/metrics/server/lib/vis_data/handle_response_body.js
new file mode 100644
index 0000000000000..a2d531bed213d
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/handle_response_body.js
@@ -0,0 +1,18 @@
+import buildProcessorFunction from './build_processor_function';
+import processors from './response_processors/series';
+
+export default function handleResponseBody(panel) {
+  return resp => {
+    if (resp.error) {
+      const err = new Error(resp.error.type);
+      err.response = JSON.stringify(resp);
+      throw err;
+    }
+    const keys = Object.keys(resp.aggregations);
+    if (keys.length !== 1) throw Error('There should only be one series per request.');
+    const seriesId = keys[0];
+    const series = panel.series.find(s => s.id === seriesId);
+    const processor = buildProcessorFunction(processors, resp, panel, series);
+    return processor([]);
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/bucket_transform.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/bucket_transform.js
new file mode 100644
index 0000000000000..76ad7cda12f1f
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/bucket_transform.js
@@ -0,0 +1,173 @@
+import _ from 'lodash';
+import parseSettings from './parse_settings';
+import getBucketsPath from './get_buckets_path';
+function checkMetric(metric, fields) {
+  fields.forEach(field => {
+    if (!metric[field]) {
+      throw new Error(`Metric missing ${field}`);
+    }
+  });
+}
+
+function stdMetric(bucket) {
+  checkMetric(bucket, ['type', 'field']);
+  const body = {};
+  body[bucket.type] = {
+    field: bucket.field
+  };
+  return body;
+}
+
+function extendStats(bucket) {
+  checkMetric(bucket, ['type', 'field']);
+  const body = {
+    extended_stats: { field: bucket.field }
+  };
+  if (bucket.sigma) body.extended_stats.sigma = parseInt(bucket.sigma, 10);
+  return body;
+}
+
+function extendStatsBucket(bucket, metrics, bucketSize) {
+  const bucketsPath = 'timeseries > ' + getBucketsPath(bucket.field, metrics);
+  const body = { extended_stats_bucket: { buckets_path: bucketsPath } };
+  if (bucket.sigma) body.extended_stats_bucket.sigma = parseInt(bucket.sigma, 10);
+  return body;
+}
+
+export default {
+  count: (bucket) => {
+    return {
+      bucket_script: {
+        buckets_path: { count: '_count' },
+        script: {
+          inline: 'count * 1',
+          lang: 'expression'
+        },
+        gap_policy: 'skip'
+      }
+    };
+  },
+  avg: stdMetric,
+  max: stdMetric,
+  min: stdMetric,
+  sum: stdMetric,
+  cardinality: stdMetric,
+  value_count: stdMetric,
+  sum_of_squares: extendStats,
+  variance: extendStats,
+  std_deviation: extendStats,
+
+  percentile_rank: bucket => {
+    checkMetric(bucket, ['type', 'field', 'value']);
+    const body = {
+      percentile_ranks: {
+        field: bucket.field,
+        values: [bucket.value]
+      }
+    };
+    return body;
+  },
+
+  avg_bucket: extendStatsBucket,
+  max_bucket: extendStatsBucket,
+  min_bucket: extendStatsBucket,
+  sum_bucket: extendStatsBucket,
+  sum_of_squares_bucket: extendStatsBucket,
+  std_deviation_bucket: extendStatsBucket,
+  variance_bucket: extendStatsBucket,
+
+  percentile: (bucket) => {
+    checkMetric(bucket, ['type', 'field', 'percentiles']);
+    let percents = bucket.percentiles.filter(p => p.value != null).map(p => p.value);
+    if (bucket.percentiles.some(p => p.mode === 'band')) {
+      percents = percents.concat(bucket.percentiles
+        .filter(p => p.percentile)
+        .map(p => p.percentile));
+    }
+    const agg = {
+      percentiles: {
+        field: bucket.field,
+        percents
+      }
+    };
+    return agg;
+  },
+
+  derivative: (bucket, metrics, bucketSize) => {
+    checkMetric(bucket, ['type', 'field']);
+    const metric = _.find(metrics, { id: bucket.field });
+    const body = {
+      derivative: {
+        buckets_path: getBucketsPath(bucket.field, metrics),
+        gap_policy: 'skip', // seems sane
+        unit: bucketSize
+      }
+    };
+    if (bucket.gap_policy) body.derivative.gap_policy = bucket.gap_policy;
+    if (bucket.unit) body.derivative.unit = /^([\d]+)([shmdwMy]|ms)$/.test(bucket.unit) ? bucket.unit : bucketSize;
+    return body;
+  },
+
+  serial_diff: (bucket, metrics, bucketSize) => {
+    checkMetric(bucket, ['type', 'field']);
+    const metric = _.find(metrics, { id: bucket.field });
+    const body = {
+      serial_diff: {
+        buckets_path: getBucketsPath(bucket.field, metrics),
+        gap_policy: 'skip', // seems sane
+        lag: 1
+      }
+    };
+    if (bucket.gap_policy) body.serial_diff.gap_policy = bucket.gap_policy;
+    if (bucket.lag) body.serial_diff.lag = /^([\d]+)$/.test(bucket.lag) ? bucket.lag : 0;
+    return body;
+  },
+
+  cumulative_sum: (bucket, metrics) => {
+    checkMetric(bucket, ['type', 'field']);
+    const metric = _.find(metrics, { id: bucket.field });
+    return {
+      cumulative_sum: {
+        buckets_path: getBucketsPath(bucket.field, metrics)
+      }
+    };
+  },
+
+  moving_average: (bucket, metrics) => {
+    checkMetric(bucket, ['type', 'field']);
+    const metric = _.find(metrics, { id: bucket.field });
+    const body = {
+      moving_avg: {
+        buckets_path: getBucketsPath(bucket.field, metrics),
+        model: bucket.model || 'simple',
+        gap_policy: 'skip' // seems sane
+      }
+    };
+    if (bucket.gap_policy) body.moving_avg.gap_policy = bucket.gap_policy;
+    if (bucket.window) body.moving_avg.window = Number(bucket.window);
+    if (bucket.minimize) body.moving_avg.minimize = Boolean(bucket.minimize);
+    if (bucket.settings) body.moving_avg.settings = parseSettings(bucket.settings);
+    return body;
+  },
+
+  calculation: (bucket, metrics) => {
+    checkMetric(bucket, ['variables', 'script']);
+    const body = {
+      bucket_script: {
+        buckets_path: bucket.variables.reduce((acc, row) => {
+          const metric = _.find(metrics, { id: row.field });
+          acc[row.name] = getBucketsPath(row.field, metrics);
+          return acc;
+        }, {}),
+        script: {
+          inline: bucket.script,
+          lang: 'painless'
+        },
+        gap_policy: 'skip' // seems sane
+      }
+    };
+    if (bucket.gap_policy) body.bucket_script.gap_policy = bucket.gap_policy;
+    return body;
+  }
+};
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/calculate_auto.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/calculate_auto.js
new file mode 100644
index 0000000000000..db754f9c164c2
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/calculate_auto.js
@@ -0,0 +1,70 @@
+import moment from 'moment';
+const d = moment.duration;
+
+const roundingRules = [
+  [ d(500, 'ms'), d(100, 'ms') ],
+  [ d(5, 'second'), d(1, 'second') ],
+  [ d(7.5, 'second'), d(5, 'second') ],
+  [ d(15, 'second'), d(10, 'second') ],
+  [ d(45, 'second'), d(30, 'second') ],
+  [ d(3, 'minute'), d(1, 'minute') ],
+  [ d(9, 'minute'), d(5, 'minute') ],
+  [ d(20, 'minute'), d(10, 'minute') ],
+  [ d(45, 'minute'), d(30, 'minute') ],
+  [ d(2, 'hour'), d(1, 'hour') ],
+  [ d(6, 'hour'), d(3, 'hour') ],
+  [ d(24, 'hour'), d(12, 'hour') ],
+  [ d(1, 'week'), d(1, 'd') ],
+  [ d(3, 'week'), d(1, 'week') ],
+  [ d(1, 'year'), d(1, 'month') ],
+  [ Infinity, d(1, 'year') ]
+];
+
+const revRoundingRules = roundingRules.slice(0).reverse();
+
+function find(rules, check, last) {
+  function pick(buckets, duration) {
+    const target = duration / buckets;
+    let lastResp = null;
+
+    for (let i = 0; i < rules.length; i++) {
+      const rule = rules[i];
+      const resp = check(rule[0], rule[1], target);
+
+      if (resp == null) {
+        if (!last) continue;
+        if (lastResp) return lastResp;
+        break;
+      }
+
+      if (!last) return resp;
+      lastResp = resp;
+    }
+
+    // fallback to just a number of milliseconds, ensure ms is >= 1
+    const ms = Math.max(Math.floor(target), 1);
+    return moment.duration(ms, 'ms');
+  }
+
+  return (buckets, duration) => {
+    const interval = pick(buckets, duration);
+    if (interval) return moment.duration(interval._data);
+  };
+}
+
+module.exports = {
+  near: find(revRoundingRules, function near(bound, interval, target) {
+    if (bound > target) return interval;
+  }, true),
+
+  lessThan: find(revRoundingRules, function lessThan(_bound, interval, target) {
+    if (interval < target) return interval;
+  }),
+
+  atLeast: find(revRoundingRules, function atLeast(_bound, interval, target) {
+    if (interval <= target) return interval;
+  }),
+};
+
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/extended_stats_types.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/extended_stats_types.js
new file mode 100644
index 0000000000000..16847b677869a
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/extended_stats_types.js
@@ -0,0 +1,7 @@
+export default [
+  'std_deviation',
+  'variance',
+  'sum_of_squares'
+];
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_agg_value.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_agg_value.js
new file mode 100644
index 0000000000000..560d6e44d2a32
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_agg_value.js
@@ -0,0 +1,35 @@
+import _ from 'lodash';
+import extendStatsTypes from './extended_stats_types';
+export default (row, metric) => {
+  // Extended Stats
+  if (_.includes(extendStatsTypes, metric.type)) {
+    const isStdDeviation = /^std_deviation/.test(metric.type);
+    const modeIsBounds = ~['upper','lower'].indexOf(metric.mode);
+    if (isStdDeviation && modeIsBounds) {
+      return _.get(row, `${metric.id}.std_deviation_bounds.${metric.mode}`);
+    }
+    return _.get(row, `${metric.id}.${metric.type}`);
+  }
+
+  // Percentiles
+  if (metric.type === 'percentile') {
+    let percentileKey = `${metric.percent}`;
+    if (!/\./.test(`${metric.percent}`)) {
+      percentileKey = `${metric.percent}.0`;
+    }
+    return row[metric.id].values[percentileKey];
+  }
+
+  if (metric.type === 'percentile_rank') {
+    const percentileRankKey = `${metric.value}`;
+    return row[metric.id] && row[metric.id].values[percentileRankKey];
+  }
+
+  // Derivatives
+  const normalizedValue = _.get(row, `${metric.id}.normalized_value`, null);
+
+  // Everything else
+  const value = _.get(row, `${metric.id}.value`, null);
+  return normalizedValue || value;
+
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_bucket_size.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_bucket_size.js
new file mode 100644
index 0000000000000..d5d19f6a10278
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_bucket_size.js
@@ -0,0 +1,19 @@
+import calculateAuto from './calculate_auto';
+import moment from 'moment';
+import unitToSeconds from './unit_to_seconds';
+export default (req, interval) => {
+  const from = moment.utc(req.payload.timerange.min);
+  const to = moment.utc(req.payload.timerange.max);
+  const duration = moment.duration(to.valueOf() - from.valueOf(), 'ms');
+  let bucketSize = calculateAuto.near(100, duration).asSeconds();
+  if (bucketSize < 1) bucketSize = 1; // don't go too small
+  let intervalString = `${bucketSize}s`;
+
+  const matches = interval && interval.match(/^([\d]+)([shmdwMy]|ms)$/);
+  if (matches) {
+    bucketSize = Number(matches[1]) * unitToSeconds(matches[2]);
+    intervalString = interval;
+  }
+
+  return { bucketSize, intervalString };
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_buckets_path.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_buckets_path.js
new file mode 100644
index 0000000000000..0430850a498ea
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_buckets_path.js
@@ -0,0 +1,31 @@
+import _ from 'lodash';
+export default (id, metrics) => {
+  const metric = _.find(metrics, { id });
+  let bucketsPath = String(id);
+
+  switch (metric.type) {
+    case 'derivative':
+      bucketsPath += '[normalized_value]';
+      break;
+    case 'percentile':
+      const percentileKey = /\./.test(`${metric.percent}`) ? `${metric.percent}` : `${metric.percent}.0`;
+      bucketsPath += `[${percentileKey}]`;
+      break;
+    case 'percentile_rank':
+      bucketsPath += `[${metric.value}]`;
+      break;
+    case 'std_deviation':
+    case 'variance':
+    case 'sum_of_squares':
+      if (/^std_deviation/.test(metric.type) && ~['upper','lower'].indexOf(metric.mode)) {
+        bucketsPath += `[std_${metric.mode}]`;
+      } else {
+        bucketsPath += `[${metric.type}]`;
+      }
+      break;
+  }
+
+
+  return bucketsPath;
+};
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_default_decoration.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_default_decoration.js
new file mode 100644
index 0000000000000..29735f444a5e6
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_default_decoration.js
@@ -0,0 +1,23 @@
+export default series => {
+  const pointSize = series.point_size != null ? Number(series.point_size) : Number(series.line_width);
+  const showPoints = series.chart_type === 'line' && pointSize !== 0;
+  return {
+    stack: series.stacked && series.stacked !== 'none' || false,
+    lines: {
+      show: series.chart_type === 'line' && series.line_width !== 0,
+      fill: Number(series.fill),
+      lineWidth: Number(series.line_width),
+      steps: series.steps || false
+    },
+    points: {
+      show: showPoints,
+      radius: 1,
+      lineWidth: showPoints ? pointSize : 5
+    },
+    bars: {
+      show: series.chart_type === 'bar',
+      fill: Number(series.fill),
+      lineWidth: Number(series.line_width)
+    }
+  };
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_last_metric.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_last_metric.js
new file mode 100644
index 0000000000000..ff88c6bad8a1b
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_last_metric.js
@@ -0,0 +1,6 @@
+import _ from 'lodash';
+export default function getLastMetric(series) {
+  return _.last(series.metrics.filter(s => s.type !== 'series_agg'));
+
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_sibling_agg_value.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_sibling_agg_value.js
new file mode 100644
index 0000000000000..e12d69fca5716
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_sibling_agg_value.js
@@ -0,0 +1,8 @@
+import _ from 'lodash';
+export default (row, metric) => {
+  let key = metric.type.replace(/_bucket$/, '');
+  if (key === 'std_deviation' && _.includes(['upper', 'lower'], metric.mode)) {
+    key = `std_deviation_bounds.${metric.mode}`;
+  }
+  return _.get(row, `${metric.id}.${key}`);
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_split_colors.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_split_colors.js
new file mode 100644
index 0000000000000..40d92ec56d710
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_split_colors.js
@@ -0,0 +1,24 @@
+import Color from 'color';
+export default function getSplitColors(inputColor, size = 10, style = 'gradient') {
+  const color = new Color(inputColor);
+  const colors = [];
+  let workingColor = Color.hsl(color.hsl().object());
+
+  if (style === 'rainbow') {
+    return [
+      '#68BC00', '#009CE0', '#B0BC00', '#16A5A5', '#D33115', '#E27300', '#FCC400','#7B64FF', '#FA28FF', '#333333', '#808080',
+      '#194D33', '#0062B1', '#808900', '#0C797D', '#9F0500', '#C45100', '#FB9E00','#653294', '#AB149E', '#0F1419', '#666666'
+    ];
+  } else {
+    colors.push(color.hex());
+    const rotateBy = (color.luminosity() / (size - 1));
+    for(let i = 0; i < (size - 1); i++) {
+      const hsl = workingColor.hsl().object();
+      hsl.l -= (rotateBy * 100);
+      workingColor = Color.hsl(hsl);
+      colors.push(workingColor.hex());
+    }
+  }
+
+  return colors;
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
new file mode 100644
index 0000000000000..25f3efc45a418
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
@@ -0,0 +1,53 @@
+import Color from 'color';
+import calculateLabel from '../../../../public/components/lib/calculate_label';
+import _ from 'lodash';
+import getLastMetric from './get_last_metric';
+import getSplitColors from './get_split_colors';
+export default function getSplits(resp, series) {
+  const metric = getLastMetric(series);
+  if (_.has(resp, `aggregations.${series.id}.buckets`)) {
+    const buckets = _.get(resp, `aggregations.${series.id}.buckets`);
+    if (_.isArray(buckets)) {
+      const size = buckets.length;
+      const colors = getSplitColors(series.color, size, series.split_color_mode);
+      return buckets.map(bucket => {
+        bucket.id = `${series.id}:${bucket.key}`;
+        bucket.label = bucket.key;
+        bucket.color = colors.shift();
+        return bucket;
+      });
+    }
+
+    if(series.split_mode === 'filters' && _.isPlainObject(buckets)) {
+      return series.split_filters.map(filter => {
+        const bucket = _.get(resp, `aggregations.${series.id}.buckets.${filter.id}`);
+        bucket.id = `${series.id}:${filter.id}`;
+        bucket.key = filter.id;
+        bucket.color = filter.color;
+        bucket.label = filter.label || filter.filter || '*';
+        return bucket;
+      });
+    }
+  }
+
+  const color = new Color(series.color);
+  const timeseries = _.get(resp, `aggregations.${series.id}.timeseries`);
+  const mergeObj = {
+    timeseries
+  };
+  series.metrics
+    .filter(m => /_bucket/.test(m.type))
+    .forEach(m => {
+      mergeObj[m.id] = _.get(resp, `aggregations.${series.id}.${m.id}`);
+    });
+  return [
+    {
+      id: series.id,
+      label: series.label || calculateLabel(metric, series.metrics),
+      color: color.hex(),
+      ...mergeObj
+    }
+  ];
+}
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_timerange.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_timerange.js
new file mode 100644
index 0000000000000..b35f3ecbec69b
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_timerange.js
@@ -0,0 +1,6 @@
+import moment from 'moment';
+export default function getTimerange(req) {
+  const from = moment.utc(req.payload.timerange.min);
+  const to = moment.utc(req.payload.timerange.max);
+  return { from, to };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/index.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/index.js
new file mode 100644
index 0000000000000..3e60224de501d
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/index.js
@@ -0,0 +1,27 @@
+import bucketTransform from './bucket_transform';
+import getAggValue from './get_agg_value';
+import getBucketSize from './get_bucket_size';
+import getBucketPath from './get_buckets_path';
+import getDefaultDecoration from './get_default_decoration';
+import getLastMetric from './get_last_metric';
+import getSiblingAggValue from './get_sibling_agg_value';
+import getSplits from './get_splits';
+import getTimerange from './get_timerange';
+import mapBucket from './map_bucket';
+import parseSettings from './parse_settings';
+import unitToSeconds from './unit_to_seconds';
+
+module.exports = {
+  bucketTransform,
+  getAggValue,
+  getBucketSize,
+  getBucketPath,
+  getDefaultDecoration,
+  getLastMetric,
+  getSiblingAggValue,
+  getSplits,
+  getTimerange,
+  mapBucket,
+  parseSettings,
+  unitToSeconds,
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/map_bucket.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/map_bucket.js
new file mode 100644
index 0000000000000..6fd7b6b2bdd01
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/map_bucket.js
@@ -0,0 +1,4 @@
+import getAggValue from './get_agg_value';
+export default function mapBucket(metric) {
+  return bucket => [ bucket.key, getAggValue(bucket, metric)];
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/parse_settings.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/parse_settings.js
new file mode 100644
index 0000000000000..cca30934f9faf
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/parse_settings.js
@@ -0,0 +1,29 @@
+const numericKeys = [
+  'alpha',
+  'beta',
+  'gamma',
+  'period'
+];
+const booleanKeys = [ 'pad' ];
+function castBasedOnKey(key, val) {
+  if (~numericKeys.indexOf(key)) return Number(val);
+  if (~booleanKeys.indexOf(key)) {
+    switch(val) {
+      case 'true':
+      case 1:
+      case '1':
+        return true;
+      default:
+        return false;
+    }
+  }
+  return val;
+}
+export default (settingsStr) => {
+  return settingsStr.split(/\s/).reduce((acc, value) => {
+    const [key, val] = value.split(/=/);
+    acc[key] = castBasedOnKey(key, val);
+    return acc;
+  }, {});
+};
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/unit_to_seconds.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/unit_to_seconds.js
new file mode 100644
index 0000000000000..580aad0bdd3fd
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/unit_to_seconds.js
@@ -0,0 +1,14 @@
+const units = {
+  ms: 0.001,
+  s: 1,
+  m: 60,
+  h: 3600,
+  d: 86400,
+  w: (86400) * 7, // Hum... might be wrong
+  M: (86400) * 30, // this too... 29,30,31?
+  y: (86400) * 356 // Leap year?
+};
+
+export default (unit) => {
+  return units[unit];
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/offset_time.js b/src/core_plugins/metrics/server/lib/vis_data/offset_time.js
new file mode 100644
index 0000000000000..6ec7618f3557e
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/offset_time.js
@@ -0,0 +1,12 @@
+import getTimerange from './helpers/get_timerange';
+export default function offsetTime(req, by) {
+  const { from, to } = getTimerange(req);
+  if (!/^([\d]+)([shmdwMy]|ms)$/.test(by)) return { from, to };
+  const matches = by.match(/^([\d]+)([shmdwMy]|ms)$/);
+  const offsetValue = Number(matches[1]);
+  const offsetUnit = matches[2];
+  return {
+    from: from.clone().subtract(offsetValue, offsetUnit),
+    to: to.clone().subtract(offsetValue, offsetUnit)
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/date_histogram.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/date_histogram.js
new file mode 100644
index 0000000000000..dba54333489ab
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/date_histogram.js
@@ -0,0 +1,22 @@
+import _ from 'lodash';
+import moment from 'moment';
+import getBucketSize from '../../helpers/get_bucket_size';
+import getTimerange from '../../helpers/get_timerange';
+export default function dateHistogram(req, panel, annotation) {
+  return next => doc => {
+    const timeField = annotation.time_field;
+    const { bucketSize, intervalString } = getBucketSize(req, 'auto');
+    const { from, to } = getTimerange(req);
+    _.set(doc, `aggs.${annotation.id}.date_histogram`, {
+      field: timeField,
+      interval: intervalString,
+      min_doc_count: 0,
+      extended_bounds: {
+        min: from.valueOf(),
+        max: to.valueOf() - (bucketSize * 1000)
+      }
+    });
+    return next(doc);
+  };
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/index.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/index.js
new file mode 100644
index 0000000000000..fa9656c1c02f8
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/index.js
@@ -0,0 +1,8 @@
+import query from './query';
+import dateHistogram from './date_histogram';
+import topHits from './top_hits';
+export default [
+  query,
+  dateHistogram,
+  topHits
+];
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/query.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/query.js
new file mode 100644
index 0000000000000..72b286dba05a7
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/query.js
@@ -0,0 +1,49 @@
+import _ from 'lodash';
+import moment from 'moment';
+import getBucketSize from '../../helpers/get_bucket_size';
+import getTimerange from '../../helpers/get_timerange';
+export default function query(req, panel, annotation) {
+  return next => doc => {
+    const timeField = annotation.time_field;
+    const { bucketSize, intervalString } = getBucketSize(req, 'auto');
+    const { from, to } = getTimerange(req);
+
+    doc.size = 0;
+    doc.query = {
+      bool: {
+        must: []
+      }
+    };
+
+    const timerange = {
+      range: {
+        [timeField]: {
+          gte: from.valueOf(),
+          lte: to.valueOf() - (bucketSize * 1000),
+          format: 'epoch_millis',
+        }
+      }
+    };
+    doc.query.bool.must.push(timerange);
+
+    if (annotation.query_string) {
+      doc.query.bool.must.push({
+        query_string: {
+          query: annotation.query_string,
+          analyze_wildcard: true
+        }
+      });
+    }
+
+    if (annotation.fields) {
+      const fields = annotation.fields.split(/[,\s]+/) || [];
+      fields.forEach(field => {
+        doc.query.bool.must.push({ exists: { field } });
+      });
+    }
+
+    return next(doc);
+
+  };
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/top_hits.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/top_hits.js
new file mode 100644
index 0000000000000..22cb779602965
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/top_hits.js
@@ -0,0 +1,22 @@
+import _ from 'lodash';
+export default function topHits(req, panel, annotation) {
+  return next => doc => {
+    const fields = annotation.fields && annotation.fields.split(/[,\s]+/) || [];
+    const timeField = annotation.time_field;
+    _.set(doc, `aggs.${annotation.id}.aggs.hits.top_hits`, {
+      sort: [
+        {
+          [timeField]: { order: 'desc' }
+        }
+      ],
+      _source: {
+        includes: [
+          ...fields,
+          timeField
+        ]
+      },
+      size: 5
+    });
+    return next(doc);
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/date_histogram.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/date_histogram.js
new file mode 100644
index 0000000000000..ccf38744f0458
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/date_histogram.js
@@ -0,0 +1,110 @@
+import dateHistogram from '../date_histogram';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('dateHistogram(req, panel, series)', () => {
+
+  let panel;
+  let series;
+  let req;
+  beforeEach(() => {
+    req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+    panel = {
+      index_pattern: '*',
+      time_field: '@timestamp',
+      interval: '10s'
+    };
+    series = { id: 'test' };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    dateHistogram(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('returns valid date histogram', () => {
+    const next = doc => doc;
+    const doc = dateHistogram(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          aggs: {
+            timeseries: {
+              date_histogram: {
+                field: '@timestamp',
+                interval: '10s',
+                min_doc_count: 0,
+                extended_bounds: {
+                  min: 1483228800000,
+                  max: 1483232390000
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+
+  it('returns valid date histogram (offset by 1h)', () => {
+    series.offset_time = '1h';
+    const next = doc => doc;
+    const doc = dateHistogram(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          aggs: {
+            timeseries: {
+              date_histogram: {
+                field: '@timestamp',
+                interval: '10s',
+                min_doc_count: 0,
+                extended_bounds: {
+                  min: 1483225200000,
+                  max: 1483228790000
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+
+  it('returns valid date histogram with overriden index pattern', () => {
+    series.override_index_pattern = 1;
+    series.series_index_pattern = '*';
+    series.series_time_field = 'timestamp';
+    series.series_interval = '20s';
+    const next = doc => doc;
+    const doc = dateHistogram(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          aggs: {
+            timeseries: {
+              date_histogram: {
+                field: 'timestamp',
+                interval: '20s',
+                min_doc_count: 0,
+                extended_bounds: {
+                  min: 1483228800000,
+                  max: 1483232380000
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/metric_buckets.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/metric_buckets.js
new file mode 100644
index 0000000000000..72f08ed4e5aa5
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/metric_buckets.js
@@ -0,0 +1,84 @@
+import metricBuckets from '../metric_buckets';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('metricBuckets(req, panel, series)', () => {
+
+  let panel;
+  let series;
+  let req;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      id: 'test',
+      split_mode: 'terms',
+      terms_size: 10,
+      terms_field: 'host',
+      metrics: [
+        {
+          id: 'metric-1',
+          type: 'max',
+          field: 'io'
+        },
+        {
+          id: 'metric-2',
+          type: 'derivative',
+          field: 'metric-1',
+          unit: '1s'
+        },
+        {
+          id: 'metric-3',
+          type: 'avg_bucket',
+          field: 'metric-2'
+        }
+      ]
+    };
+    req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    metricBuckets(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('returns metric aggs', () => {
+    const next = doc => doc;
+    const doc = metricBuckets(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          aggs: {
+            timeseries: {
+              aggs: {
+                'metric-1': {
+                  max: {
+                    field: 'io'
+                  }
+                },
+                'metric-2': {
+                  derivative: {
+                    buckets_path: 'metric-1',
+                    gap_policy: 'skip',
+                    unit: '1s'
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+
+  });
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/query.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/query.js
new file mode 100644
index 0000000000000..cb3e93a3c6446
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/query.js
@@ -0,0 +1,227 @@
+import query from '../query';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('query(req, panel, series)', () => {
+
+  let panel;
+  let series;
+  let req;
+  beforeEach(() => {
+    req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+    panel = {
+      index_pattern: '*',
+      time_field: 'timestamp',
+      interval: '10s'
+    };
+    series = { id: 'test' };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    query(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('returns doc with query for timerange', () => {
+    const next = doc => doc;
+    const doc = query(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      size: 0,
+      query: {
+        bool: {
+          must: [
+            {
+              range: {
+                timestamp: {
+                  gte: 1483228800000,
+                  lte: 1483232390000,
+                  format: 'epoch_millis'
+                }
+              }
+            }
+          ]
+        }
+      }
+    });
+  });
+
+  it('returns doc with query for timerange (offset by 1h)', () => {
+    series.offset_time = '1h';
+    const next = doc => doc;
+    const doc = query(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      size: 0,
+      query: {
+        bool: {
+          must: [
+            {
+              range: {
+                timestamp: {
+                  gte: 1483225200000,
+                  lte: 1483228790000,
+                  format: 'epoch_millis'
+                }
+              }
+            }
+          ]
+        }
+      }
+    });
+  });
+
+  it('returns doc with global query', () => {
+    req.payload.filters = [
+      {
+        bool: {
+          must: [
+            {
+              term: {
+                host: 'example'
+              }
+            }
+          ]
+        }
+      }
+    ];
+    const next = doc => doc;
+    const doc = query(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      size: 0,
+      query: {
+        bool: {
+          must: [
+            {
+              range: {
+                timestamp: {
+                  gte: 1483228800000,
+                  lte: 1483232390000,
+                  format: 'epoch_millis'
+                }
+              }
+            },
+            {
+              bool: {
+                must: [
+                  {
+                    term: {
+                      host: 'example'
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    });
+  });
+
+  it('returns doc with panel filter and global', () => {
+    req.payload.filters = [
+      {
+        bool: {
+          must: [
+            {
+              term: {
+                host: 'example'
+              }
+            }
+          ]
+        }
+      }
+    ];
+    panel.filter = 'host:web-server';
+    const next = doc => doc;
+    const doc = query(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      size: 0,
+      query: {
+        bool: {
+          must: [
+            {
+              range: {
+                timestamp: {
+                  gte: 1483228800000,
+                  lte: 1483232390000,
+                  format: 'epoch_millis'
+                }
+              }
+            },
+            {
+              bool: {
+                must: [
+                  {
+                    term: {
+                      host: 'example'
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              query_string: {
+                query: panel.filter,
+                analyze_wildcard: true
+              }
+            }
+          ]
+        }
+      }
+    });
+  });
+
+  it('returns doc with panel filter (ignoring globals)', () => {
+    req.payload.filters = [
+      {
+        bool: {
+          must: [
+            {
+              term: {
+                host: 'example'
+              }
+            }
+          ]
+        }
+      }
+    ];
+    panel.filter = 'host:web-server';
+    panel.ignore_global_filter = true;
+    const next = doc => doc;
+    const doc = query(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      size: 0,
+      query: {
+        bool: {
+          must: [
+            {
+              range: {
+                timestamp: {
+                  gte: 1483228800000,
+                  lte: 1483232390000,
+                  format: 'epoch_millis'
+                }
+              }
+            },
+            {
+              query_string: {
+                query: panel.filter,
+                analyze_wildcard: true
+              }
+            }
+          ]
+        }
+      }
+    });
+  });
+
+
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/sibling_buckets.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/sibling_buckets.js
new file mode 100644
index 0000000000000..c4a531e0e4074
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/sibling_buckets.js
@@ -0,0 +1,68 @@
+import siblingBuckets from '../sibling_buckets';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('siblingBuckets(req, panel, series)', () => {
+
+  let panel;
+  let series;
+  let req;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      id: 'test',
+      split_mode: 'terms',
+      terms_size: 10,
+      terms_field: 'host',
+      metrics: [
+        {
+          id: 'metric-1',
+          type: 'avg',
+          field: 'cpu'
+        },
+        {
+          id: 'metric-2',
+          type: 'avg_bucket',
+          field: 'metric-1'
+        }
+      ]
+    };
+    req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    siblingBuckets(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('returns sibling aggs', () => {
+    const next = doc => doc;
+    const doc = siblingBuckets(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          aggs: {
+            'metric-2': {
+              extended_stats_bucket: {
+                buckets_path: 'timeseries > metric-1'
+              }
+            }
+          }
+        }
+      }
+    });
+
+  });
+});
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_everything.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_everything.js
new file mode 100644
index 0000000000000..cc2ad67784f96
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_everything.js
@@ -0,0 +1,52 @@
+import splitByEverything from '../split_by_everything';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('splitByEverything(req, panel, series)', () => {
+
+  let panel;
+  let series;
+  let req;
+  beforeEach(() => {
+    panel = {};
+    series = { id: 'test', split_mode: 'everything' };
+    req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    splitByEverything(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('returns a valid filter with match_all', () => {
+    const next = doc => doc;
+    const doc = splitByEverything(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          filter: {
+            match_all: {}
+          }
+        }
+      }
+    });
+  });
+
+  it('calls next and does not add a filter', () => {
+    series.split_mode = 'terms';
+    series.terms_field = 'host';
+    const next = sinon.spy(doc => doc);
+    const doc = splitByEverything(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+    expect(doc).to.eql({});
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_filter.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_filter.js
new file mode 100644
index 0000000000000..fbabb0f9c26fd
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_filter.js
@@ -0,0 +1,55 @@
+import splitByFilter from '../split_by_filter';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('splitByFilter(req, panel, series)', () => {
+
+  let panel;
+  let series;
+  let req;
+  beforeEach(() => {
+    panel = {};
+    series = { id: 'test', split_mode: 'filter', filter: 'host:example-01' };
+    req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    splitByFilter(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('returns a valid filter with a query_string', () => {
+    const next = doc => doc;
+    const doc = splitByFilter(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          filter: {
+            query_string: {
+              query: 'host:example-01',
+              analyze_wildcard: true
+            }
+          }
+        }
+      }
+    });
+  });
+
+  it('calls next and does not add a filter', () => {
+    series.split_mode = 'terms';
+    const next = sinon.spy(doc => doc);
+    const doc = splitByFilter(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+    expect(doc).to.eql({});
+  });
+
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_filters.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_filters.js
new file mode 100644
index 0000000000000..dfa20e8facc16
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_filters.js
@@ -0,0 +1,88 @@
+import splitByFilters from '../split_by_filters';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('splitByFilters(req, panel, series)', () => {
+
+  let panel;
+  let series;
+  let req;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      id: 'test',
+      split_mode: 'filters',
+      split_filters: [
+        {
+          id: 'filter-1',
+          color: '#F00',
+          filter: 'status_code:[* TO 200]',
+          label: '200s'
+        },
+        {
+          id: 'filter-2',
+          color: '#0F0',
+          filter: 'status_code:[300 TO *]',
+          label: '300s'
+        }
+
+      ],
+      metrics: [{ id: 'avgmetric', type: 'avg', field: 'cpu' }]
+    };
+    req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    splitByFilters(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('returns a valid terms agg', () => {
+    const next = doc => doc;
+    const doc = splitByFilters(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          filters: {
+            filters: {
+              'filter-1': {
+                query_string: {
+                  query: 'status_code:[* TO 200]',
+                  analyze_wildcard: true
+                }
+              },
+              'filter-2': {
+                query_string: {
+                  query: 'status_code:[300 TO *]',
+                  analyze_wildcard: true
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+
+  it('calls next and does not add a terms agg', () => {
+    series.split_mode = 'everything';
+    const next = sinon.spy(doc => doc);
+    const doc = splitByFilters(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+    expect(doc).to.eql({});
+  });
+
+});
+
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_terms.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_terms.js
new file mode 100644
index 0000000000000..d057e2456f9ec
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/split_by_terms.js
@@ -0,0 +1,101 @@
+import splitByTerms from '../split_by_terms';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('splitByTerms(req, panel, series)', () => {
+
+  let panel;
+  let series;
+  let req;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      id: 'test',
+      split_mode: 'terms',
+      terms_size: 10,
+      terms_field: 'host',
+      metrics: [{ id: 'avgmetric', type: 'avg', field: 'cpu' }]
+    };
+    req = {
+      payload: {
+        timerange: {
+          min: '2017-01-01T00:00:00Z',
+          max: '2017-01-01T01:00:00Z'
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    splitByTerms(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('returns a valid terms agg', () => {
+    const next = doc => doc;
+    const doc = splitByTerms(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          terms: {
+            field: 'host',
+            size: 10
+          }
+        }
+      }
+    });
+  });
+
+  it('returns a valid terms agg with custom sort', () => {
+    series.terms_order_by = 'avgmetric';
+    const next = doc => doc;
+    const doc = splitByTerms(req, panel, series)(next)({});
+    expect(doc).to.eql({
+      aggs: {
+        test: {
+          terms: {
+            field: 'host',
+            size: 10,
+            order: {
+              'avgmetric-SORT > SORT': 'desc'
+            }
+          },
+          aggs: {
+            'avgmetric-SORT': {
+              aggs: {
+                SORT: {
+                  avg: {
+                    field: 'cpu'
+                  }
+                }
+              },
+              filter: {
+                range: {
+                  timestamp: {
+                    format: 'epoch_millis',
+                    gte: 1483232355000,
+                    lte: 1483232400000
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+
+  it('calls next and does not add a terms agg', () => {
+    series.split_mode = 'everything';
+    const next = sinon.spy(doc => doc);
+    const doc = splitByTerms(req, panel, series)(next)({});
+    expect(next.calledOnce).to.equal(true);
+    expect(doc).to.eql({});
+  });
+
+});
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/date_histogram.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/date_histogram.js
new file mode 100644
index 0000000000000..bf99dbeaf1687
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/date_histogram.js
@@ -0,0 +1,21 @@
+import _ from 'lodash';
+import getBucketSize from '../../helpers/get_bucket_size';
+import offsetTime from '../../offset_time';
+import getIntervalAndTimefield from '../../get_interval_and_timefield';
+export default function dateHistogram(req, panel, series) {
+  return next => doc => {
+    const { timeField, interval } = getIntervalAndTimefield(panel, series);
+    const { bucketSize, intervalString } = getBucketSize(req, interval);
+    const { from, to }  = offsetTime(req, series.offset_time);
+    _.set(doc, `aggs.${series.id}.aggs.timeseries.date_histogram`, {
+      field: timeField,
+      interval: intervalString,
+      min_doc_count: 0,
+      extended_bounds: {
+        min: from.valueOf(),
+        max: to.valueOf() - (bucketSize * 1000)
+      }
+    });
+    return next(doc);
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/filter_ratios.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/filter_ratios.js
new file mode 100644
index 0000000000000..f47a0ea97016c
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/filter_ratios.js
@@ -0,0 +1,45 @@
+/* eslint max-len:0 */
+const filter = metric => metric.type === 'filter_ratio';
+import bucketTransform from '../../helpers/bucket_transform';
+import _ from 'lodash';
+export default function ratios(req, panel, series) {
+  return next => doc => {
+    if (series.metrics.some(filter)) {
+      series.metrics.filter(filter).forEach(metric => {
+        _.set(doc, `aggs.${series.id}.aggs.timeseries.aggs.${metric.id}-numerator.filter`, {
+          query_string: { query: metric.numerator || '*', analyze_wildcard: true }
+        });
+        _.set(doc, `aggs.${series.id}.aggs.timeseries.aggs.${metric.id}-denominator.filter`, {
+          query_string: { query: metric.denominator || '*', analyze_wildcard: true }
+        });
+
+        let numeratorPath = `${metric.id}-numerator>_count`;
+        let denominatorPath =  `${metric.id}-denominator>_count`;
+
+        if (metric.metric_agg !== 'count' && bucketTransform[metric.metric_agg]) {
+          const aggBody = {
+            metric: bucketTransform[metric.metric_agg]({
+              type: metric.metric_agg,
+              field: metric.field
+            })
+          };
+          _.set(doc, `aggs.${series.id}.aggs.timeseries.aggs.${metric.id}-numerator.aggs`, aggBody);
+          _.set(doc, `aggs.${series.id}.aggs.timeseries.aggs.${metric.id}-denominator.aggs`, aggBody);
+          numeratorPath = `${metric.id}-numerator>metric`;
+          denominatorPath =  `${metric.id}-denominator>metric`;
+        }
+
+        _.set(doc, `aggs.${series.id}.aggs.timeseries.aggs.${metric.id}`, {
+          bucket_script: {
+            buckets_path: {
+              numerator: numeratorPath,
+              denominator: denominatorPath
+            },
+            script: 'params.numerator != null && params.denominator != null && params.denominator > 0 ? params.numerator / params.denominator : 0'
+          }
+        });
+      });
+    }
+    return doc;
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/index.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/index.js
new file mode 100644
index 0000000000000..a397978775ea9
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/index.js
@@ -0,0 +1,21 @@
+import query from './query';
+import splitByEverything from './split_by_everything';
+import splitByFilter from './split_by_filter';
+import splitByFilters from './split_by_filters';
+import splitByTerms from './split_by_terms';
+import dateHistogram from './date_histogram';
+import metricBuckets from './metric_buckets';
+import siblingBuckets from './sibling_buckets';
+import filterRatios from './filter_ratios';
+
+export default [
+  query,
+  splitByTerms,
+  splitByFilter,
+  splitByFilters,
+  splitByEverything,
+  dateHistogram,
+  metricBuckets,
+  siblingBuckets,
+  filterRatios
+];
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/metric_buckets.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/metric_buckets.js
new file mode 100644
index 0000000000000..6afc6dd11b9a3
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/metric_buckets.js
@@ -0,0 +1,24 @@
+import _ from 'lodash';
+import getBucketSize from '../../helpers/get_bucket_size';
+import bucketTransform from '../../helpers/bucket_transform';
+import getIntervalAndTimefield from '../../get_interval_and_timefield';
+export default function metricBuckets(req, panel, series) {
+  return next => doc => {
+    const { timeField, interval } = getIntervalAndTimefield(panel, series);
+    const { bucketSize, intervalString } = getBucketSize(req, interval);
+    series.metrics
+      .filter(row => !/_bucket$/.test(row.type) && !/^series/.test(row.type))
+      .forEach(metric => {
+        const fn = bucketTransform[metric.type];
+        if (fn) {
+          try {
+            const bucket = fn(metric, series.metrics, intervalString);
+            _.set(doc, `aggs.${series.id}.aggs.timeseries.aggs.${metric.id}`, bucket);
+          } catch (e) {
+            // meh
+          }
+        }
+      });
+    return next(doc);
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/query.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/query.js
new file mode 100644
index 0000000000000..89ae536ed8774
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/query.js
@@ -0,0 +1,48 @@
+import _ from 'lodash';
+import moment from 'moment';
+import getBucketSize from '../../helpers/get_bucket_size';
+import unitToSeconds from '../../helpers/unit_to_seconds';
+import offsetTime from '../../offset_time';
+import getIntervalAndTimefield from '../../get_interval_and_timefield';
+export default function query(req, panel, series) {
+  return next => doc => {
+    const { timeField, interval } = getIntervalAndTimefield(panel, series);
+    const { bucketSize, intervalString } = getBucketSize(req, interval);
+    const { from, to } = offsetTime(req, series.offset_time);
+
+    doc.size = 0;
+    doc.query = {
+      bool: {
+        must: []
+      }
+    };
+
+    const timerange = {
+      range: {
+        [timeField]: {
+          gte: from.valueOf(),
+          lte: to.valueOf() - (bucketSize * 1000),
+          format: 'epoch_millis',
+        }
+      }
+    };
+    doc.query.bool.must.push(timerange);
+
+    const globalFilters = req.payload.filters;
+    if (globalFilters && !panel.ignore_global_filter) {
+      doc.query.bool.must = doc.query.bool.must.concat(globalFilters);
+    }
+
+    if (panel.filter) {
+      doc.query.bool.must.push({
+        query_string: {
+          query: panel.filter,
+          analyze_wildcard: true
+        }
+      });
+    }
+
+    return next(doc);
+
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/sibling_buckets.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/sibling_buckets.js
new file mode 100644
index 0000000000000..d9082265486c8
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/sibling_buckets.js
@@ -0,0 +1,24 @@
+import _ from 'lodash';
+import getBucketSize from '../../helpers/get_bucket_size';
+import bucketTransform from '../../helpers/bucket_transform';
+import getIntervalAndTimefield from '../../get_interval_and_timefield';
+export default function siblingBuckets(req, panel, series) {
+  return next => doc => {
+    const { timeField, interval } = getIntervalAndTimefield(panel, series);
+    const { bucketSize, intervalString } = getBucketSize(req, interval);
+    series.metrics
+      .filter(row => /_bucket$/.test(row.type))
+      .forEach(metric => {
+        const fn = bucketTransform[metric.type];
+        if (fn) {
+          try {
+            const bucket = fn(metric, series.metrics, bucketSize);
+            _.set(doc, `aggs.${series.id}.aggs.${metric.id}`, bucket);
+          } catch (e) {
+            // meh
+          }
+        }
+      });
+    return next(doc);
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_everything.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_everything.js
new file mode 100644
index 0000000000000..a2bbe17901bef
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_everything.js
@@ -0,0 +1,12 @@
+import _ from 'lodash';
+export default function splitByEverything(req, panel, series) {
+  return next => doc => {
+    if (series.split_mode === 'everything' ||
+      (series.split_mode === 'terms' &&
+        !series.terms_field)) {
+      _.set(doc, `aggs.${series.id}.filter.match_all`, {});
+    }
+    return next(doc);
+  };
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_filter.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_filter.js
new file mode 100644
index 0000000000000..eeaf1f6c8d34a
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_filter.js
@@ -0,0 +1,9 @@
+import _ from 'lodash';
+export default function splitByFilter(req, panel, series) {
+  return next => doc => {
+    if (series.split_mode !== 'filter') return next(doc);
+    _.set(doc, `aggs.${series.id}.filter.query_string.query`, series.filter || '*');
+    _.set(doc, `aggs.${series.id}.filter.query_string.analyze_wildcard`, true);
+    return next(doc);
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_filters.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_filters.js
new file mode 100644
index 0000000000000..590046fde9a53
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_filters.js
@@ -0,0 +1,13 @@
+import _ from 'lodash';
+export default function splitByFilter(req, panel, series) {
+  return next => doc => {
+    if (series.split_mode === 'filters' && series.split_filters) {
+      series.split_filters.forEach(filter => {
+        _.set(doc, `aggs.${series.id}.filters.filters.${filter.id}.query_string.query`, filter.filter || '*');
+        _.set(doc, `aggs.${series.id}.filters.filters.${filter.id}.query_string.analyze_wildcard`, true);
+      });
+    }
+    return next(doc);
+  };
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_terms.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_terms.js
new file mode 100644
index 0000000000000..bf5540ae8e758
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_terms.js
@@ -0,0 +1,45 @@
+import _ from 'lodash';
+import moment from 'moment';
+import basicAggs from '../../../../../public/components/lib/basic_aggs';
+import getBucketSize from '../../helpers/get_bucket_size';
+import getTimerange from '../../helpers/get_timerange';
+import getIntervalAndTimefield from '../../get_interval_and_timefield';
+import getBucketsPath from '../../helpers/get_buckets_path';
+import bucketTransform from '../../helpers/bucket_transform';
+
+export default function splitByTerm(req, panel, series) {
+  return next => doc => {
+    if (series.split_mode === 'terms' && series.terms_field) {
+      const { timeField, interval } = getIntervalAndTimefield(panel, series);
+      const { bucketSize, intervalString } = getBucketSize(req, interval);
+      const { from, to }  = getTimerange(req);
+
+      _.set(doc, `aggs.${series.id}.terms.field`, series.terms_field);
+      _.set(doc, `aggs.${series.id}.terms.size`, series.terms_size);
+      const metric = series.metrics.find(item => item.id === series.terms_order_by);
+      if (metric && metric.type !== 'count' && ~basicAggs.indexOf(metric.type)) {
+        const sortAggKey = `${series.terms_order_by}-SORT`;
+        const fn = bucketTransform[metric.type];
+        const bucketPath = getBucketsPath(series.terms_order_by, series.metrics)
+          .replace(series.terms_order_by, `${sortAggKey} > SORT`);
+        _.set(doc, `aggs.${series.id}.terms.order`, { [bucketPath]: 'desc' });
+        _.set(doc, `aggs.${series.id}.aggs`, {
+          [sortAggKey]: {
+            filter: {
+              range: {
+                [timeField]: {
+                  gte: to.valueOf() - (bucketSize * 1500),
+                  lte: to.valueOf(),
+                  format: 'epoch_millis'
+                }
+              }
+            },
+            aggs: { SORT: fn(metric) }
+          }
+        });
+      }
+    }
+    return next(doc);
+  };
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/_series_agg.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/_series_agg.js
new file mode 100644
index 0000000000000..d089f770c6574
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/_series_agg.js
@@ -0,0 +1,73 @@
+import { expect } from 'chai';
+import seriesAgg from '../_series_agg';
+
+describe('seriesAgg', () => {
+  const series = [
+    [[0,2],[1,1],[2,3]],
+    [[0,4],[1,2],[2,3]],
+    [[0,2],[1,1],[2,3]]
+  ];
+
+  describe('basic', () => {
+    it('returns the series sum', () => {
+      expect(seriesAgg.sum(series)).to.eql([
+        [[0,8], [1,4], [2,9]]
+      ]);
+    });
+
+    it('returns the series max', () => {
+      expect(seriesAgg.max(series)).to.eql([
+        [[0,4], [1,2], [2,3]]
+      ]);
+    });
+
+    it('returns the series min', () => {
+      expect(seriesAgg.min(series)).to.eql([
+        [[0,2], [1,1], [2,3]]
+      ]);
+    });
+
+    it('returns the series mean', () => {
+      expect(seriesAgg.mean(series)).to.eql([
+        [[0,(8 / 3)], [1,(4 / 3)], [2,3]]
+      ]);
+    });
+  });
+
+  describe('overall', () => {
+    it('returns the series overall sum', () => {
+      expect(seriesAgg.overall_sum(series)).to.eql([
+        [[0,21], [1,21], [2,21]]
+      ]);
+    });
+
+    it('returns the series overall max', () => {
+      expect(seriesAgg.overall_max(series)).to.eql([
+        [[0,4], [1,4], [2,4]]
+      ]);
+    });
+
+    it('returns the series overall min', () => {
+      expect(seriesAgg.overall_min(series)).to.eql([
+        [[0,1], [1,1], [2,1]]
+      ]);
+    });
+
+    it('returns the series overall mean', () => {
+      const value = ((8) + (4) + 9) / 3;
+      expect(seriesAgg.overall_avg(series)).to.eql([
+        [[0,value], [1,value], [2,value]]
+      ]);
+    });
+
+  });
+
+  describe('cumlative sum', () => {
+    it('returns the series cumlative sum', () => {
+      expect(seriesAgg.cumlative_sum(series)).to.eql([
+        [[0,8], [1,12], [2,21]]
+      ]);
+    });
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/percentile.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/percentile.js
new file mode 100644
index 0000000000000..2be59fa7409e9
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/percentile.js
@@ -0,0 +1,138 @@
+import percentile from '../percentile';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('percentile(resp, panel, series)', () => {
+  let panel;
+  let series;
+  let resp;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      chart_type: 'line',
+      stacked: false,
+      line_width: 1,
+      point_size: 1,
+      fill: 0,
+      color: '#F00',
+      id: 'test',
+      split_mode: 'everything',
+      metrics: [{
+        id: 'pct',
+        type: 'percentile',
+        field: 'cpu',
+        percentiles: [
+          { id: '10-90', mode: 'band', value: 10, percentile: 90, shade: 0.2 },
+          { id: '50', mode: 'line', value: 50 }
+        ]
+      }]
+    };
+    resp = {
+      aggregations: {
+        test: {
+          timeseries: {
+            buckets: [
+              {
+                key: 1,
+                pct: {
+                  values: {
+                    '10.0': 1,
+                    '50.0': 2.5,
+                    '90.0': 5
+                  }
+                }
+              },
+              {
+                key: 2,
+                pct: {
+                  values: {
+                    '10.0': 1.2,
+                    '50.0': 2.7,
+                    '90.0': 5.3
+                  }
+                }
+              }
+            ]
+          }
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    percentile(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('creates a series', () => {
+    const next = results => results;
+    const results = percentile(resp, panel, series)(next)([]);
+    expect(results).to.have.length(3);
+
+    expect(results[0]).to.have.property('id', '10-90:test');
+    expect(results[0]).to.have.property('color', '#FF0000');
+    expect(results[0]).to.have.property('fillBetween', '10-90:test:90');
+    expect(results[0]).to.have.property('label', 'Percentile of cpu (10)');
+    expect(results[0]).to.have.property('legend', false);
+    expect(results[0]).to.have.property('lines');
+    expect(results[0].lines).to.eql({
+      fill: 0.2,
+      lineWidth: 0,
+      show: true,
+    });
+    expect(results[0]).to.have.property('points');
+    expect(results[0].points).to.eql({ show: false });
+    expect(results[0].data).to.eql([
+      [1,1],
+      [2,1.2]
+    ]);
+
+    expect(results[1]).to.have.property('id', '10-90:test:90');
+    expect(results[1]).to.have.property('color', '#FF0000');
+    expect(results[1]).to.have.property('label', 'Percentile of cpu (10)');
+    expect(results[1]).to.have.property('legend', false);
+    expect(results[1]).to.have.property('lines');
+    expect(results[1].lines).to.eql({
+      fill: false,
+      lineWidth: 0,
+      show: true,
+    });
+    expect(results[1]).to.have.property('points');
+    expect(results[1].points).to.eql({ show: false });
+    expect(results[1].data).to.eql([
+      [1,5],
+      [2,5.3]
+    ]);
+
+    expect(results[2]).to.have.property('id', '50:test');
+    expect(results[2]).to.have.property('color', '#FF0000');
+    expect(results[2]).to.have.property('label', 'Percentile of cpu (50)');
+    expect(results[2]).to.have.property('stack', false);
+    expect(results[2]).to.have.property('lines');
+    expect(results[2].lines).to.eql({
+      fill: 0,
+      lineWidth: 1,
+      show: true,
+      steps: false
+    });
+    expect(results[2]).to.have.property('bars');
+    expect(results[2].bars).to.eql({
+      fill: 0,
+      lineWidth: 1,
+      show: false
+    });
+    expect(results[2]).to.have.property('points');
+    expect(results[2].points).to.eql({ show: true, lineWidth: 1, radius: 1 });
+    expect(results[2].data).to.eql([
+      [1,2.5],
+      [2,2.7]
+    ]);
+
+
+  });
+
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/series_agg.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/series_agg.js
new file mode 100644
index 0000000000000..169f05c8cb838
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/series_agg.js
@@ -0,0 +1,109 @@
+import seriesAgg from '../series_agg';
+import stdMetric from '../std_metric';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('seriesAgg(resp, panel, series)', () => {
+  let panel;
+  let series;
+  let resp;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      chart_type: 'line',
+      stacked: false,
+      line_width: 1,
+      point_size: 1,
+      fill: 0,
+      color: '#F00',
+      id: 'test',
+      label: 'Total CPU',
+      split_mode: 'terms',
+      metrics: [
+        {
+          id: 'avgcpu',
+          type: 'avg',
+          field: 'cpu'
+        },
+        {
+          id: 'seriesgg',
+          type: 'series_agg',
+          function: 'sum'
+        }
+      ]
+    };
+    resp = {
+      aggregations: {
+        test: {
+          buckets: [
+            {
+              key: 'example-01',
+              timeseries: {
+                buckets: [
+                  {
+                    key: 1,
+                    avgcpu: { value: 0.25 }
+                  },
+                  {
+                    key: 2,
+                    avgcpu: { value: 0.25 }
+                  }
+                ]
+              }
+            },
+            {
+              key: 'example-02',
+              timeseries: {
+                buckets: [
+                  {
+                    key: 1,
+                    avgcpu: { value: 0.25 }
+                  },
+                  {
+                    key: 2,
+                    avgcpu: { value: 0.25 }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    seriesAgg(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('creates a series', () => {
+    const next = seriesAgg(resp, panel, series)(results => results);
+    const results = stdMetric(resp, panel, series)(next)([]);
+    expect(results).to.have.length(1);
+
+    expect(results[0]).to.eql({
+      id: 'test',
+      color: '#F00',
+      label: 'Total CPU',
+      stack: false,
+      lines: { show: true, fill: 0, lineWidth: 1, steps: false },
+      points: { show: true, radius: 1, lineWidth: 1 },
+      bars: { fill: 0, lineWidth: 1, show: false },
+      data: [
+        [ 1, 0.5 ],
+        [ 2, 0.5 ]
+      ]
+    });
+
+  });
+
+});
+
+
+
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_deviation_bands.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_deviation_bands.js
new file mode 100644
index 0000000000000..f9eb70c4269e0
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_deviation_bands.js
@@ -0,0 +1,100 @@
+import stdDeviationBands from '../std_deviation_bands';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('stdDeviationBands(resp, panel, series)', () => {
+  let panel;
+  let series;
+  let resp;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      chart_type: 'line',
+      stacked: false,
+      line_width: 1,
+      point_size: 1,
+      fill: 0,
+      color: '#F00',
+      id: 'test',
+      split_mode: 'everything',
+      metrics: [{
+        id: 'stddev',
+        mode: 'band',
+        type: 'std_deviation',
+        field: 'cpu'
+      }]
+    };
+    resp = {
+      aggregations: {
+        test: {
+          timeseries: {
+            buckets: [
+              {
+                key: 1,
+                stddev: {
+                  std_deviation: 1.2,
+                  std_deviation_bounds: {
+                    upper: 3.2,
+                    lower: 0.2
+                  }
+                }
+              },
+              {
+                key: 2,
+                stddev: {
+                  std_deviation_bands: 1.5,
+                  std_deviation_bounds: {
+                    upper: 3.5,
+                    lower: 0.5
+                  }
+                }
+              }
+            ]
+          }
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    stdDeviationBands(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('creates a series', () => {
+    const next = results => results;
+    const results = stdDeviationBands(resp, panel, series)(next)([]);
+    expect(results).to.have.length(2);
+
+    expect(results[0]).to.eql({
+      id: 'test:upper',
+      label: 'Std. Deviation of cpu',
+      color: '#FF0000',
+      lines: { show: true, fill: 0.5, lineWidth: 0 },
+      points: { show: false },
+      fillBetween: 'test:lower',
+      data: [
+        [ 1, 3.2 ],
+        [ 2, 3.5 ]
+      ]
+    });
+
+    expect(results[1]).to.eql({
+      id: 'test:lower',
+      color: '#FF0000',
+      lines: { show: true, fill: false, lineWidth: 0 },
+      points: { show: false },
+      data: [
+        [ 1, 0.2 ],
+        [ 2, 0.5 ]
+      ]
+    });
+
+  });
+
+});
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_deviation_sibling.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_deviation_sibling.js
new file mode 100644
index 0000000000000..e9b5d9ff4ca88
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_deviation_sibling.js
@@ -0,0 +1,104 @@
+import stdDeviationSibling from '../std_deviation_sibling';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('stdDeviationSibling(resp, panel, series)', () => {
+  let panel;
+  let series;
+  let resp;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      chart_type: 'line',
+      stacked: false,
+      line_width: 1,
+      point_size: 1,
+      fill: 0,
+      color: '#F00',
+      id: 'test',
+      split_mode: 'everything',
+      metrics: [
+        {
+          id: 'avgcpu',
+          type: 'avg',
+          field: 'cpu'
+        },
+        {
+          id: 'sib',
+          type: 'std_deviation_bucket',
+          mode: 'band',
+          field: 'avgcpu'
+        }
+      ]
+    };
+    resp = {
+      aggregations: {
+        test: {
+          sib: {
+            std_deviation: 0.23,
+            std_deviation_bounds: {
+              upper: 0.7,
+              lower: 0.01
+            }
+          },
+          timeseries: {
+            buckets: [
+              {
+                key: 1,
+                avgcpu: { value: 0.23 }
+              },
+              {
+                key: 2,
+                avgcpu: { value: 0.22 }
+              }
+            ]
+          }
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    stdDeviationSibling(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('creates a series', () => {
+    const next = results => results;
+    const results = stdDeviationSibling(resp, panel, series)(next)([]);
+    expect(results).to.have.length(2);
+
+    expect(results[0]).to.eql({
+      id: 'test:lower',
+      color: '#FF0000',
+      lines: { show: true, fill: false, lineWidth: 0 },
+      points: { show: false },
+      data: [
+        [ 1, 0.01 ],
+        [ 2, 0.01 ]
+      ]
+    });
+
+    expect(results[1]).to.eql({
+      id: 'test:upper',
+      label: 'Overall Std. Deviation of Average of cpu',
+      color: '#FF0000',
+      fillBetween: 'test:lower',
+      lines: { show: true, fill: 0.5, lineWidth: 0 },
+      points: { show: false },
+      data: [
+        [ 1, 0.7 ],
+        [ 2, 0.7 ]
+      ]
+    });
+
+  });
+
+});
+
+
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_metric.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_metric.js
new file mode 100644
index 0000000000000..f9d5be1760e94
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_metric.js
@@ -0,0 +1,81 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import stdMetric from '../std_metric';
+
+describe('stdMetric(resp, panel, series)', () => {
+  let panel;
+  let series;
+  let resp;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      chart_type: 'line',
+      stacked: false,
+      line_width: 1,
+      point_size: 1,
+      fill: 0,
+      color: '#F00',
+      id: 'test',
+      split_mode: 'everything',
+      metrics: [{ id: 'avgmetric', type: 'avg', field: 'cpu' }]
+    };
+    resp = {
+      aggregations: {
+        test: {
+          timeseries: {
+            buckets: [
+              {
+                key: 1,
+                avgmetric: { value: 1 }
+              },
+              {
+                key: 2,
+                avgmetric: { value: 2 }
+              }
+            ]
+          }
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    stdMetric(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('calls next when finished (percentile)', () => {
+    series.metrics[0].type = 'percentile';
+    const next = sinon.spy(d => d);
+    const results = stdMetric(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+    expect(results).to.have.length(0);
+  });
+
+  it('calls next when finished (std_deviation band)', () => {
+    series.metrics[0].type = 'std_deviation';
+    series.metrics[0].mode = 'band';
+    const next = sinon.spy(d => d);
+    const results = stdMetric(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+    expect(results).to.have.length(0);
+  });
+
+  it('creates a series', () => {
+    const next = results => results;
+    const results = stdMetric(resp, panel, series)(next)([]);
+    expect(results).to.have.length(1);
+    expect(results[0]).to.have.property('color', '#FF0000');
+    expect(results[0]).to.have.property('id', 'test');
+    expect(results[0]).to.have.property('label', 'Average of cpu');
+    expect(results[0]).to.have.property('lines');
+    expect(results[0]).to.have.property('stack');
+    expect(results[0]).to.have.property('bars');
+    expect(results[0]).to.have.property('points');
+    expect(results[0].data).to.eql([ [1,1], [2,2] ]);
+  });
+
+});
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_sibling.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_sibling.js
new file mode 100644
index 0000000000000..114b34841b1c3
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/std_sibling.js
@@ -0,0 +1,96 @@
+import stdSibling from '../std_sibling';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+describe('stdSibling(resp, panel, series)', () => {
+  let panel;
+  let series;
+  let resp;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      chart_type: 'line',
+      stacked: false,
+      line_width: 1,
+      point_size: 1,
+      fill: 0,
+      color: '#F00',
+      id: 'test',
+      split_mode: 'everything',
+      metrics: [
+        {
+          id: 'avgcpu',
+          type: 'avg',
+          field: 'cpu'
+        },
+        {
+          id: 'sib',
+          type: 'std_deviation_bucket',
+          field: 'avgcpu'
+        }
+      ]
+    };
+    resp = {
+      aggregations: {
+        test: {
+          sib: {
+            std_deviation: 0.23
+          },
+          timeseries: {
+            buckets: [
+              {
+                key: 1,
+                avgcpu: { value: 0.23 }
+              },
+              {
+                key: 2,
+                avgcpu: { value: 0.22 }
+              }
+            ]
+          }
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    stdSibling(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('calls next when std. deviation bands set', () => {
+    series.metrics[1].mode = 'band';
+    const next = sinon.spy(results => results);
+    const results = stdSibling(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+    expect(results).to.have.length(0);
+  });
+
+  it('creates a series', () => {
+    const next = results => results;
+    const results = stdSibling(resp, panel, series)(next)([]);
+    expect(results).to.have.length(1);
+
+    expect(results[0]).to.eql({
+      id: 'test',
+      label: 'Overall Std. Deviation of Average of cpu',
+      color: '#FF0000',
+      stack: false,
+      lines: { show: true, fill: 0, lineWidth: 1, steps: false },
+      points: { show: true, radius: 1, lineWidth: 1 },
+      bars: { fill: 0, lineWidth: 1, show: false },
+      data: [
+        [ 1, 0.23 ],
+        [ 2, 0.23 ]
+      ]
+    });
+
+  });
+
+});
+
+
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/time_shift.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/time_shift.js
new file mode 100644
index 0000000000000..c2d00b8b05499
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/__tests__/time_shift.js
@@ -0,0 +1,71 @@
+import sinon from 'sinon';
+import { expect } from 'chai';
+import timeShift from '../time_shift';
+import stdMetric from '../std_metric';
+import moment from 'moment';
+
+describe('timeShift(resp, panel, series)', () => {
+  let panel;
+  let series;
+  let resp;
+  beforeEach(() => {
+    panel = {
+      time_field: 'timestamp'
+    };
+    series = {
+      chart_type: 'line',
+      stacked: false,
+      line_width: 1,
+      offset_time: '1h',
+      point_size: 1,
+      fill: 0,
+      color: '#F00',
+      id: 'test',
+      split_mode: 'everything',
+      metrics: [{ id: 'avgmetric', type: 'avg', field: 'cpu' }]
+    };
+    resp = {
+      aggregations: {
+        test: {
+          timeseries: {
+            buckets: [
+              {
+                key: 1483225200000,
+                avgmetric: { value: 1 }
+              },
+              {
+                key: 1483225210000,
+                avgmetric: { value: 2 }
+              }
+            ]
+          }
+        }
+      }
+    };
+  });
+
+  it('calls next when finished', () => {
+    const next = sinon.spy();
+    timeShift(resp, panel, series)(next)([]);
+    expect(next.calledOnce).to.equal(true);
+  });
+
+  it('creates a series', () => {
+    const next = timeShift(resp, panel, series)(results => results);
+    const results = stdMetric(resp, panel, series)(next)([]);
+    expect(results).to.have.length(1);
+    expect(results[0]).to.have.property('color', '#FF0000');
+    expect(results[0]).to.have.property('id', 'test');
+    expect(results[0]).to.have.property('label', 'Average of cpu');
+    expect(results[0]).to.have.property('lines');
+    expect(results[0]).to.have.property('stack');
+    expect(results[0]).to.have.property('bars');
+    expect(results[0]).to.have.property('points');
+    expect(results[0].data).to.eql([
+      [1483225200000 + 3600000, 1],
+      [1483225210000 + 3600000, 2]
+    ]);
+  });
+
+});
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/_series_agg.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/_series_agg.js
new file mode 100644
index 0000000000000..56c32bc344b05
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/_series_agg.js
@@ -0,0 +1,71 @@
+import _ from 'lodash';
+
+function mean(values) {
+  return _.sum(values) / values.length;
+}
+
+const basic = fnName => targetSeries => {
+  const data = [];
+  _.zip(...targetSeries).forEach(row => {
+    const key = row[0][0];
+    const values = row.map(r => r[1]);
+    const fn = _[fnName] || (() => null);
+    data.push([key, fn(values)]);
+  });
+  return [data];
+};
+
+const overall = fnName => targetSeries => {
+  const fn = _[fnName];
+  const keys = [];
+  const values = [];
+  _.zip(...targetSeries).forEach(row => {
+    keys.push(row[0][0]);
+    values.push(fn(row.map(r => r[1])));
+  });
+  return [keys.map(k => [k, fn(values)])];
+};
+
+
+export default {
+  sum: basic('sum'),
+  max: basic('max'),
+  min: basic('min'),
+  mean(targetSeries) {
+    const data = [];
+    _.zip(...targetSeries).forEach(row => {
+      const key = row[0][0];
+      const values = row.map(r => r[1]);
+      data.push([key, mean(values)]);
+    });
+    return [data];
+  },
+
+
+  overall_max: overall('max'),
+  overall_min: overall('min'),
+  overall_sum: overall('sum'),
+
+  overall_avg(targetSeries) {
+    const fn = mean;
+    const keys = [];
+    const values = [];
+    _.zip(...targetSeries).forEach(row => {
+      keys.push(row[0][0]);
+      values.push(_.sum(row.map(r => r[1])));
+    });
+    return [keys.map(k => [k, fn(values)])];
+  },
+
+  cumlative_sum(targetSeries) {
+    const data = [];
+    let sum = 0;
+    _.zip(...targetSeries).forEach(row => {
+      const key = row[0][0];
+      sum += _.sum(row.map(r => r[1]));
+      data.push([key, sum]);
+    });
+    return [data];
+  }
+
+};
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/index.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/index.js
new file mode 100644
index 0000000000000..b40bbdee81777
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/index.js
@@ -0,0 +1,18 @@
+import percentile from './percentile';
+import seriesAgg from './series_agg';
+import stdDeviationBands from './std_deviation_bands';
+import stdDeviationSibling from './std_deviation_sibling';
+import stdMetric from './std_metric';
+import stdSibling from './std_sibling';
+import timeShift from './time_shift';
+
+export default [
+  percentile,
+  stdDeviationBands,
+  stdDeviationSibling,
+  stdMetric,
+  stdSibling,
+  seriesAgg,
+  timeShift
+];
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/percentile.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/percentile.js
new file mode 100644
index 0000000000000..ead6ed5146a44
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/percentile.js
@@ -0,0 +1,57 @@
+import _ from 'lodash';
+import getAggValue from '../../helpers/get_agg_value';
+import getDefaultDecoration from '../../helpers/get_default_decoration';
+import getSplits from '../../helpers/get_splits';
+import getLastMetric from '../../helpers/get_last_metric';
+export default function percentile(resp, panel, series) {
+  return next => results => {
+    const metric = getLastMetric(series);
+    if (metric.type !== 'percentile') return next(results);
+
+    getSplits(resp, series).forEach((split) => {
+      metric.percentiles.forEach(percentile => {
+        const label = (split.label) + ` (${percentile.value})`;
+        const data = split.timeseries.buckets.map(bucket => {
+          const m = _.assign({}, metric, { percent: percentile.value });
+          return [bucket.key, getAggValue(bucket, m)];
+        });
+        if (percentile.mode === 'band') {
+          const fillData = split.timeseries.buckets.map(bucket => {
+            const m = _.assign({}, metric, { percent: percentile.percentile });
+            return [bucket.key, getAggValue(bucket, m)];
+          });
+          results.push({
+            id: `${percentile.id}:${split.id}`,
+            color: split.color,
+            label,
+            data,
+            lines: { show: true, fill: percentile.shade, lineWidth: 0 },
+            points: { show: false },
+            legend: false,
+            fillBetween: `${percentile.id}:${split.id}:${percentile.percentile}`
+          });
+          results.push({
+            id: `${percentile.id}:${split.id}:${percentile.percentile}`,
+            color: split.color,
+            label,
+            data: fillData,
+            lines: { show: true, fill: false, lineWidth: 0 },
+            legend: false,
+            points: { show: false }
+          });
+        } else {
+          const decoration = getDefaultDecoration(series);
+          results.push({
+            id: `${percentile.id}:${split.id}`,
+            color: split.color,
+            label,
+            data,
+            ...decoration
+          });
+        }
+      });
+
+    });
+    return next(results);
+  };
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/series_agg.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/series_agg.js
new file mode 100644
index 0000000000000..7f9c3b46c3056
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/series_agg.js
@@ -0,0 +1,36 @@
+import SeriesAgg from './_series_agg';
+import _ from 'lodash';
+import getDefaultDecoration from '../../helpers/get_default_decoration';
+import calculateLabel from '../../../../../public/components/lib/calculate_label';
+export default function seriesAgg(resp, panel, series) {
+  return next => results => {
+    if (series.metrics.some(m => m.type === 'series_agg')) {
+      const decoration = getDefaultDecoration(series);
+
+      const targetSeries = [];
+      // Filter out the seires with the matching metric and store them
+      // in targetSeries
+      results = results.filter(s => {
+        if (s.id.split(/:/)[0] === series.id) {
+          targetSeries.push(s.data);
+          return false;
+        }
+        return true;
+      });
+      const data = series.metrics.filter(m => m.type === 'series_agg')
+        .reduce((acc, m) => {
+          const fn = SeriesAgg[m.function];
+          return fn && fn(acc) || acc;
+        }, targetSeries);
+      results.push({
+        id: `${series.id}`,
+        label: series.label || calculateLabel(_.last(series.metrics), series.metrics),
+        color: series.color,
+        data: _.first(data),
+        ...decoration
+      });
+    }
+    return next(results);
+  };
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_bands.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_bands.js
new file mode 100644
index 0000000000000..dbb3a2ff5c801
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_bands.js
@@ -0,0 +1,33 @@
+import _ from 'lodash';
+import getSplits from '../../helpers/get_splits';
+import getLastMetric from '../../helpers/get_last_metric';
+import mapBucket from '../../helpers/map_bucket';
+export default function stdDeviationBands(resp, panel, series) {
+  return next => results => {
+    const metric = getLastMetric(series);
+    if (metric.type === 'std_deviation' && metric.mode === 'band') {
+      getSplits(resp, series).forEach((split) => {
+        const upper = split.timeseries.buckets.map(mapBucket(_.assign({}, metric, { mode: 'upper' })));
+        const lower = split.timeseries.buckets.map(mapBucket(_.assign({}, metric, { mode: 'lower' })));
+        results.push({
+          id: `${split.id}:upper`,
+          label: split.label,
+          color: split.color,
+          lines: { show: true, fill: 0.5, lineWidth: 0 },
+          points: { show: false },
+          fillBetween: `${split.id}:lower`,
+          data: upper
+        });
+        results.push({
+          id: `${split.id}:lower`,
+          color: split.color,
+          lines: { show: true, fill: false, lineWidth: 0 },
+          points: { show: false },
+          data: lower
+        });
+      });
+    }
+    return next(results);
+  };
+
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_sibling.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_sibling.js
new file mode 100644
index 0000000000000..401fd266d6fa3
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_deviation_sibling.js
@@ -0,0 +1,48 @@
+import _ from 'lodash';
+import getSplits from '../../helpers/get_splits';
+import getLastMetric from '../../helpers/get_last_metric';
+import getSiblingAggValue from '../../helpers/get_sibling_agg_value';
+export default function stdDeviationSibling(resp, panel, series) {
+  return next => results => {
+    const metric = getLastMetric(series);
+    if (metric.mode === 'band' && metric.type === 'std_deviation_bucket') {
+      getSplits(resp, series).forEach((split) => {
+
+        const mapBucketByMode = (mode) => {
+          return bucket => {
+            return [bucket.key, getSiblingAggValue(split, _.assign({}, metric, { mode }))];
+          };
+        };
+
+        const upperData = split.timeseries.buckets
+          .map(mapBucketByMode('upper'));
+        const lowerData = split.timeseries.buckets
+          .map(mapBucketByMode('lower'));
+
+        results.push({
+          id: `${split.id}:lower`,
+          lines: { show: true, fill: false, lineWidth: 0 },
+          points: { show: false },
+          color: split.color,
+          data: lowerData
+        });
+        results.push({
+          id: `${split.id}:upper`,
+          label: split.label,
+          color: split.color,
+          lines: { show: true, fill: 0.5, lineWidth: 0 },
+          points: { show: false },
+          fillBetween: `${split.id}:lower`,
+          data: upperData
+        });
+
+      });
+    }
+
+    return next(results);
+  };
+
+
+
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_metric.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_metric.js
new file mode 100644
index 0000000000000..862222162378e
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_metric.js
@@ -0,0 +1,29 @@
+import getDefaultDecoration from '../../helpers/get_default_decoration';
+import getSplits from '../../helpers/get_splits';
+import getLastMetric from '../../helpers/get_last_metric';
+import mapBucket from '../../helpers/map_bucket';
+export default function stdMetric(resp, panel, series) {
+  return next => results => {
+    const metric = getLastMetric(series);
+    if (metric.type === 'std_deviation' && metric.mode === 'band') {
+      return next(results);
+    }
+    if (metric.type === 'percentile') {
+      return next(results);
+    }
+    if (/_bucket$/.test(metric.type)) return next(results);
+    const decoration = getDefaultDecoration(series);
+    getSplits(resp, series).forEach((split) => {
+      const data = split.timeseries.buckets.map(mapBucket(metric));
+      results.push({
+        id: `${split.id}`,
+        label: split.label,
+        color: split.color,
+        data,
+        ...decoration
+      });
+    });
+    return next(results);
+  };
+}
+
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_sibling.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_sibling.js
new file mode 100644
index 0000000000000..61b9f4ae8be0a
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/std_sibling.js
@@ -0,0 +1,29 @@
+import getDefaultDecoration from '../../helpers/get_default_decoration';
+import getSplits from '../../helpers/get_splits';
+import getLastMetric from '../../helpers/get_last_metric';
+import getSiblingAggValue from '../../helpers/get_sibling_agg_value';
+export default function stdSibling(resp, panel, series) {
+  return next => results => {
+    const metric = getLastMetric(series);
+
+    if (!/_bucket$/.test(metric.type)) return next(results);
+    if (metric.type === 'std_deviation_bucket' && metric.mode === 'band') return next(results);
+
+    const decoration = getDefaultDecoration(series);
+    getSplits(resp, series).forEach((split) => {
+      const data = split.timeseries.buckets.map(bucket => {
+        return [bucket.key, getSiblingAggValue(split, metric)];
+      });
+      results.push({
+        id: split.id,
+        label: split.label,
+        color: split.color,
+        data,
+        ...decoration
+      });
+    });
+    return next(results);
+  };
+
+
+}
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/time_shift.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/time_shift.js
new file mode 100644
index 0000000000000..f8b8a20192238
--- /dev/null
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/time_shift.js
@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import moment from 'moment';
+export default function timeShift(resp, panel, series) {
+  return next => results => {
+    if (/^([\d]+)([shmdwMy]|ms)$/.test(series.offset_time)) {
+      const matches = series.offset_time.match(/^([\d]+)([shmdwMy]|ms)$/);
+      if (matches) {
+        const offsetValue = matches[1];
+        const offsetUnit = matches[2];
+        results.forEach(item => {
+          if (_.startsWith(item.id, series.id)) {
+            item.data = item.data.map(row => [moment(row[0]).add(offsetValue, offsetUnit).valueOf(), row[1]]);
+          }
+        });
+      }
+    }
+    return next(results);
+  };
+}
diff --git a/src/core_plugins/metrics/server/routes/fields.js b/src/core_plugins/metrics/server/routes/fields.js
new file mode 100644
index 0000000000000..d812b897e5af9
--- /dev/null
+++ b/src/core_plugins/metrics/server/routes/fields.js
@@ -0,0 +1,15 @@
+import getFields from '../lib/get_fields';
+export default (server) => {
+
+  server.route({
+    path: '/api/metrics/fields',
+    method: 'GET',
+    handler: (req, reply) => {
+      return getFields(req)
+        .then(reply)
+        .catch(err => reply([]));
+    }
+  });
+
+};
+
diff --git a/src/core_plugins/metrics/server/routes/vis.js b/src/core_plugins/metrics/server/routes/vis.js
new file mode 100644
index 0000000000000..54e299f18afe9
--- /dev/null
+++ b/src/core_plugins/metrics/server/routes/vis.js
@@ -0,0 +1,19 @@
+import getVisData from '../lib/get_vis_data';
+import _ from 'lodash';
+import Boom from 'boom';
+export default (server) => {
+
+  server.route({
+    path: '/api/metrics/vis/data',
+    method: 'POST',
+    handler: (req, reply) => {
+      return getVisData(req)
+        .then(reply)
+        .catch(err => {
+          console.error(err.stack);
+          reply(Boom.wrap(err, 400));
+        });
+    }
+  });
+
+};
diff --git a/src/core_plugins/timelion/public/vis/index.js b/src/core_plugins/timelion/public/vis/index.js
index b1780246ef422..3ea9b78377e47 100644
--- a/src/core_plugins/timelion/public/vis/index.js
+++ b/src/core_plugins/timelion/public/vis/index.js
@@ -16,7 +16,7 @@ define(function (require) {
     // Vis object of this type.
     return new TemplateVisType({
       name: 'timelion',
-      title: 'Timeseries',
+      title: 'Timelion',
       icon: 'fa-clock-o',
       description: 'Create timeseries charts using the timelion expression language. ' +
         'Perfect for computing and combining timeseries sets with functions such as derivatives and moving averages',
diff --git a/test/functional/apps/visualize/_chart_types.js b/test/functional/apps/visualize/_chart_types.js
index 8bb90b0445292..170364ad3ff9c 100644
--- a/test/functional/apps/visualize/_chart_types.js
+++ b/test/functional/apps/visualize/_chart_types.js
@@ -17,7 +17,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     bdd.it('should show the correct chart types', function () {
       const expectedChartTypes = [
         'Area chart', 'Data table', 'Heatmap chart', 'Horizontal bar chart', 'Line chart', 'Markdown widget',
-        'Metric', 'Pie chart', 'Tag cloud', 'Tile map', 'Timeseries', 'Vertical bar chart'
+        'Metric', 'Pie chart', 'Tag cloud', 'Tile map', 'Time Series Visual Builder', 'Timelion', 'Vertical bar chart'
       ];
       // find all the chart types and make sure there all there
       return PageObjects.visualize.getChartTypes()

From 7fb7eb99a042b3207d26ae3e4576d2b0ad94138b Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 2 Mar 2017 12:53:54 -0800
Subject: [PATCH 083/150] Rename Side Nav Link title and href attributes to
 label and url. (#10660)

* Rename Side Nav Link title and href attributes to label and url.
---
 .../global_nav/app_switcher/app_switcher.html |  5 ++--
 .../directives/global_nav/global_nav.html     |  2 +-
 .../__tests__/global_nav_link.js              | 24 ++-----------------
 .../global_nav_link/global_nav_link.html      |  7 +++---
 .../global_nav_link/global_nav_link.js        |  8 +++----
 5 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html
index 99ac03c09cbbe..2a13b33b23ac1 100644
--- a/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html
+++ b/src/ui/public/chrome/directives/global_nav/app_switcher/app_switcher.html
@@ -1,4 +1,3 @@
-
 <global-nav-link
   ng-repeat="link in switcher.links"
   ng-if="!link.hidden"
@@ -6,7 +5,7 @@
   is-disabled="link.disabled"
   tooltip-content="switcher.getTooltip(link)"
   on-click="switcher.ensureNavigation($event, link)"
-  href="link.active ? link.url : (link.lastSubUrl || link.url)"
+  url="link.active ? link.url : (link.lastSubUrl || link.url)"
   icon="link.icon"
-  title="link.title"
+  label="link.title"
 ></global-nav-link>
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.html b/src/ui/public/chrome/directives/global_nav/global_nav.html
index 78ba586d6686c..b149c8903d60b 100644
--- a/src/ui/public/chrome/directives/global_nav/global_nav.html
+++ b/src/ui/public/chrome/directives/global_nav/global_nav.html
@@ -46,7 +46,7 @@
         tooltip-content="globalNavToggleButton.tooltipContent"
         on-click="toggleGlobalNav($event)"
         icon="'plugins/kibana/assets/play-circle.svg'"
-        title="globalNavToggleButton.title"
+        label="globalNavToggleButton.title"
       ></global-nav-link>
     </div>
   </div>
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js b/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js
index 54254736724e4..1c8f9b4803ef6 100644
--- a/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js
+++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/__tests__/global_nav_link.js
@@ -24,10 +24,10 @@ describe('globalNavLink directive', () => {
         is-disabled="isDisabled"
         tooltip-content="tooltipContent"
         on-click="onClick()"
-        href="href"
+        url="href"
         kbn-route="kbnRoute"
         icon="icon"
-        title="title"
+        label="title"
       />
     `;
 
@@ -187,25 +187,5 @@ describe('globalNavLink directive', () => {
         });
       });
     });
-
-    describe('title attribute', () => {
-      it('is displayed', () => {
-        const attrs = {
-          title: 'demo title',
-        };
-        const element = create(attrs);
-        const title = element.find('.global-nav-link__title');
-        expect(title.text().trim()).to.be(attrs.title);
-      });
-
-      it('is set as a title attribute on the anchor tag', () => {
-        const attrs = {
-          title: 'demo title',
-        };
-        const element = create(attrs);
-        const link = element.find('[data-test-subj=appLink]');
-        expect(link.attr('title')).to.be(attrs.title);
-      });
-    });
   });
 });
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html
index 9dbc657a3eceb..887ba6adae57e 100644
--- a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html
+++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html
@@ -11,13 +11,14 @@
     href="{{ getHref() }}"
     ng-click="onClick({ $event: $event })"
     data-test-subj="appLink"
-    title="{{ title }}"
   >
     <div class="global-nav-link__icon">
+      <!-- Empty alt attribute is for accessibility -->
       <img
         ng-if="icon"
         class="global-nav-link__icon-image"
         kbn-src="{{ '/' + icon }}"
+        alt=""
       >
 
       <span
@@ -25,12 +26,12 @@
         class="global-nav-link__icon-placeholder"
         data-test-subj="appLinkIconPlaceholder"
       >
-        {{ title[0] }}
+        {{ label[0] }}
       </span>
     </div>
 
     <div class="global-nav-link__title">
-      {{ title }}
+      {{ label }}
     </div>
   </a>
 </div>
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js
index 17c9a0664672d..c8a20668fb5bb 100644
--- a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js
+++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.js
@@ -14,16 +14,16 @@ module.directive('globalNavLink', chrome => {
       isDisabled: '=',
       tooltipContent: '=',
       onClick: '&',
-      href: '=',
+      url: '=',
       kbnRoute: '=',
       icon: '=',
-      title: '=',
+      label: '=',
     },
     template: globalNavLinkTemplate,
     link: scope => {
       scope.getHref = () => {
-        if (scope.href) {
-          return scope.href;
+        if (scope.url) {
+          return scope.url;
         }
 
         if (scope.kbnRoute) {

From 0ab20b03630bb106710346acdb2e05a40ff99e20 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Thu, 2 Mar 2017 16:17:41 -0700
Subject: [PATCH 084/150] Adding common folder for isomorphic code; changing
 paths (#10668)

---
 .../{public/components/lib => common}/__tests__/agg_lookup.js | 0
 .../components/lib => common}/__tests__/calculate_label.js    | 0
 .../metrics/{public/components/lib => common}/agg_lookup.js   | 0
 .../metrics/{public/components/lib => common}/basic_aggs.js   | 0
 .../{public/components/lib => common}/calculate_label.js      | 0
 src/core_plugins/metrics/public/components/aggs/agg_select.js | 2 +-
 .../metrics/public/components/aggs/field_select.js            | 2 +-
 .../metrics/public/components/aggs/metric_select.js           | 4 ++--
 .../metrics/public/components/lib/convert_series_to_vars.js   | 2 +-
 .../metrics/public/components/lib/series_change_handler.js    | 2 +-
 src/core_plugins/metrics/public/components/markdown_editor.js | 2 +-
 src/core_plugins/metrics/public/components/split.js           | 2 +-
 .../metrics/public/components/vis_types/markdown/series.js    | 2 +-
 .../metrics/server/lib/vis_data/helpers/get_splits.js         | 2 +-
 .../lib/vis_data/request_processors/series/split_by_terms.js  | 2 +-
 .../lib/vis_data/response_processors/series/series_agg.js     | 2 +-
 16 files changed, 12 insertions(+), 12 deletions(-)
 rename src/core_plugins/metrics/{public/components/lib => common}/__tests__/agg_lookup.js (100%)
 rename src/core_plugins/metrics/{public/components/lib => common}/__tests__/calculate_label.js (100%)
 rename src/core_plugins/metrics/{public/components/lib => common}/agg_lookup.js (100%)
 rename src/core_plugins/metrics/{public/components/lib => common}/basic_aggs.js (100%)
 rename src/core_plugins/metrics/{public/components/lib => common}/calculate_label.js (100%)

diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/agg_lookup.js b/src/core_plugins/metrics/common/__tests__/agg_lookup.js
similarity index 100%
rename from src/core_plugins/metrics/public/components/lib/__tests__/agg_lookup.js
rename to src/core_plugins/metrics/common/__tests__/agg_lookup.js
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/calculate_label.js b/src/core_plugins/metrics/common/__tests__/calculate_label.js
similarity index 100%
rename from src/core_plugins/metrics/public/components/lib/__tests__/calculate_label.js
rename to src/core_plugins/metrics/common/__tests__/calculate_label.js
diff --git a/src/core_plugins/metrics/public/components/lib/agg_lookup.js b/src/core_plugins/metrics/common/agg_lookup.js
similarity index 100%
rename from src/core_plugins/metrics/public/components/lib/agg_lookup.js
rename to src/core_plugins/metrics/common/agg_lookup.js
diff --git a/src/core_plugins/metrics/public/components/lib/basic_aggs.js b/src/core_plugins/metrics/common/basic_aggs.js
similarity index 100%
rename from src/core_plugins/metrics/public/components/lib/basic_aggs.js
rename to src/core_plugins/metrics/common/basic_aggs.js
diff --git a/src/core_plugins/metrics/public/components/lib/calculate_label.js b/src/core_plugins/metrics/common/calculate_label.js
similarity index 100%
rename from src/core_plugins/metrics/public/components/lib/calculate_label.js
rename to src/core_plugins/metrics/common/calculate_label.js
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_select.js b/src/core_plugins/metrics/public/components/aggs/agg_select.js
index 8dcc21f3bd47b..90fa0ceaa67ab 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg_select.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import Select from 'react-select';
-import { createOptions } from '../lib/agg_lookup';
+import { createOptions } from '../../../common/agg_lookup';
 
 function AggSelect(props) {
   const { siblings, panelType } = props;
diff --git a/src/core_plugins/metrics/public/components/aggs/field_select.js b/src/core_plugins/metrics/public/components/aggs/field_select.js
index 2dd5272df3d55..00ca160dbcf7b 100644
--- a/src/core_plugins/metrics/public/components/aggs/field_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/field_select.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import _ from 'lodash';
 import Select from 'react-select';
-import AggLookup from '../lib/agg_lookup';
+import AggLookup from '../../../common/agg_lookup';
 import generateByTypeFilter from '../lib/generate_by_type_filter';
 
 function FieldSelect(props) {
diff --git a/src/core_plugins/metrics/public/components/aggs/metric_select.js b/src/core_plugins/metrics/public/components/aggs/metric_select.js
index a953606ebbb07..f7e7e84d81386 100644
--- a/src/core_plugins/metrics/public/components/aggs/metric_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/metric_select.js
@@ -2,8 +2,8 @@ import React, { PropTypes } from 'react';
 import _ from 'lodash';
 import Select from 'react-select';
 import calculateSiblings from '../lib/calculate_siblings';
-import calculateLabel from '../lib/calculate_label';
-import basicAggs from '../lib/basic_aggs';
+import calculateLabel from '../../../common/calculate_label';
+import basicAggs from '../../../common/basic_aggs';
 
 function createTypeFilter(restrict, exclude) {
   return (metric) => {
diff --git a/src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js b/src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js
index 740b33f4087a2..22fc9d0e37b06 100644
--- a/src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js
+++ b/src/core_plugins/metrics/public/components/lib/convert_series_to_vars.js
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import getLastValue from '../../visualizations/lib/get_last_value';
 import tickFormatter from './tick_formatter';
 import moment from 'moment';
-import calculateLabel from './calculate_label';
+import calculateLabel from '../../../common/calculate_label';
 export default (series, model) => {
   const variables = {};
   model.series.forEach(seriesModel => {
diff --git a/src/core_plugins/metrics/public/components/lib/series_change_handler.js b/src/core_plugins/metrics/public/components/lib/series_change_handler.js
index 8542fa592ce25..16c013244ab38 100644
--- a/src/core_plugins/metrics/public/components/lib/series_change_handler.js
+++ b/src/core_plugins/metrics/public/components/lib/series_change_handler.js
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import newMetricAggFn from './new_metric_agg_fn';
-import { isBasicAgg } from './agg_lookup';
+import { isBasicAgg } from '../../../common/agg_lookup';
 import {
   handleAdd,
   handleChange
diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
index b77efd24d925a..03a6ea3617013 100644
--- a/src/core_plugins/metrics/public/components/markdown_editor.js
+++ b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -2,7 +2,7 @@
 import React, { Component, PropTypes } from 'react';
 import tickFormatter from './lib/tick_formatter';
 import moment from 'moment';
-import calculateLabel from './lib/calculate_label';
+import calculateLabel from '../../common/calculate_label';
 import convertSeriesToVars from './lib/convert_series_to_vars';
 import AceEditor from 'react-ace';
 import _ from 'lodash';
diff --git a/src/core_plugins/metrics/public/components/split.js b/src/core_plugins/metrics/public/components/split.js
index 023e8005e0337..219790e679898 100644
--- a/src/core_plugins/metrics/public/components/split.js
+++ b/src/core_plugins/metrics/public/components/split.js
@@ -3,7 +3,7 @@ import Select from 'react-select';
 import _ from 'lodash';
 import FieldSelect from './aggs/field_select';
 import MetricSelect from './aggs/metric_select';
-import calculateLabel from './lib/calculate_label';
+import calculateLabel from '../../common/calculate_label';
 import createTextHandler from './lib/create_text_handler';
 import createSelectHandler from './lib/create_select_handler';
 import uuid from 'node-uuid';
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
index ffd80f5fd54af..ba9f2ab9ecdbd 100644
--- a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
@@ -6,7 +6,7 @@ import SeriesConfig from '../../series_config';
 import Sortable from 'react-anything-sortable';
 import Tooltip from '../../tooltip';
 import Split from '../../split';
-import calculateLabel from '../../lib/calculate_label';
+import calculateLabel from '../../../../common/calculate_label';
 import createAggRowRender from '../../lib/create_agg_row_render';
 import createTextHandler from '../../lib/create_text_handler';
 
diff --git a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
index 25f3efc45a418..c6ac940a11fa0 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/helpers/get_splits.js
@@ -1,5 +1,5 @@
 import Color from 'color';
-import calculateLabel from '../../../../public/components/lib/calculate_label';
+import calculateLabel from '../../../../common/calculate_label';
 import _ from 'lodash';
 import getLastMetric from './get_last_metric';
 import getSplitColors from './get_split_colors';
diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_terms.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_terms.js
index bf5540ae8e758..3bcea8ecbfab1 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_terms.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/split_by_terms.js
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
-import basicAggs from '../../../../../public/components/lib/basic_aggs';
+import basicAggs from '../../../../../common/basic_aggs';
 import getBucketSize from '../../helpers/get_bucket_size';
 import getTimerange from '../../helpers/get_timerange';
 import getIntervalAndTimefield from '../../get_interval_and_timefield';
diff --git a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/series_agg.js b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/series_agg.js
index 7f9c3b46c3056..c4acdd18c9a9a 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/series_agg.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/response_processors/series/series_agg.js
@@ -1,7 +1,7 @@
 import SeriesAgg from './_series_agg';
 import _ from 'lodash';
 import getDefaultDecoration from '../../helpers/get_default_decoration';
-import calculateLabel from '../../../../../public/components/lib/calculate_label';
+import calculateLabel from '../../../../../common/calculate_label';
 export default function seriesAgg(resp, panel, series) {
   return next => results => {
     if (series.metrics.some(m => m.type === 'series_agg')) {

From 7aecc85c9d0c96d805a612d53c42ea0ff058e2c1 Mon Sep 17 00:00:00 2001
From: Spencer <spalger@users.noreply.github.com>
Date: Thu, 2 Mar 2017 17:05:16 -0700
Subject: [PATCH 085/150] [git] ignore yarn.lock file (#10667)

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 5c3892949ba77..304e9de5ed214 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,4 @@ selenium
 *.swo
 *.out
 ui_framework/doc_site/build/*.js*
+yarn.lock

From 1808e885daef34f9fdbbc4a37c5a35a644e8fee6 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Fri, 3 Mar 2017 08:49:15 -0700
Subject: [PATCH 086/150] Fixing query to field status to use integer instead
 of timestamp string (#10684)

* Fixing query to field status to use integer instead of timestamp string

* Adding format; fixing tests
---
 .../server/lib/vis_data/__tests__/calculate_indices.js        | 4 ++--
 .../metrics/server/lib/vis_data/calculate_indices.js          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/calculate_indices.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/calculate_indices.js
index 4b486c17cb706..0c01200bc32bd 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/__tests__/calculate_indices.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/calculate_indices.js
@@ -22,8 +22,8 @@ describe('calculateIndices', () => {
           fields: ['@timestamp'],
           index_constraints: {
             '@timestamp': {
-              max_value: { gte: '2017-01-01T00:00:00.000Z' },
-              min_value: { lte: '2017-01-03T23:59:59.000Z' }
+              max_value: { gte: 1483228800000, format: 'epoch_millis' },
+              min_value: { lte: 1483487999000, format: 'epoch_millis' }
             }
           }
         }
diff --git a/src/core_plugins/metrics/server/lib/vis_data/calculate_indices.js b/src/core_plugins/metrics/server/lib/vis_data/calculate_indices.js
index bb9852a7d99b8..c9eb147f2b928 100644
--- a/src/core_plugins/metrics/server/lib/vis_data/calculate_indices.js
+++ b/src/core_plugins/metrics/server/lib/vis_data/calculate_indices.js
@@ -7,8 +7,8 @@ function getParams(req, indexPattern, timeField, offsetBy) {
 
   const indexConstraints = {};
   indexConstraints[timeField] = {
-    max_value: { gte: from.toISOString() },
-    min_value: { lte: to.toISOString() }
+    max_value: { gte: from.valueOf(), format: 'epoch_millis' },
+    min_value: { lte: to.valueOf(), format: 'epoch_millis' }
   };
 
   return {

From 5a0a4871cb03eaadca7f9bc53bc3578f4816b03c Mon Sep 17 00:00:00 2001
From: Matt Bargar <mbargar@gmail.com>
Date: Fri, 3 Mar 2017 11:09:08 -0500
Subject: [PATCH 087/150] Update doc table when auto refresh contains doc
 updates (#10385)

The problem: if a doc is already displayed in the doc table and it gets updated in elasticsearch, that change won't be reflected in the doc table via auto-refresh because our ng-repeat track by only looks at index, type, and score.

I've fixed this by including the _version in the search response and then adding it to the track by.

Fixes #3430
Fixes #7505
---
 src/core_plugins/kibana/public/context/api/utils/queries.js   | 2 ++
 src/core_plugins/kibana/public/dashboard/dashboard.js         | 1 +
 .../kibana/public/discover/controllers/discover.js            | 3 ++-
 src/ui/public/courier/data_source/search_source.js            | 3 ++-
 src/ui/public/doc_table/doc_table.html                        | 4 ++--
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/core_plugins/kibana/public/context/api/utils/queries.js b/src/core_plugins/kibana/public/context/api/utils/queries.js
index bcb0a07ab2365..258017e1089fc 100644
--- a/src/core_plugins/kibana/public/context/api/utils/queries.js
+++ b/src/core_plugins/kibana/public/context/api/utils/queries.js
@@ -1,6 +1,7 @@
 function createAnchorQueryBody(uid, contextSort) {
   return {
     _source: true,
+    version: true,
     query: {
       terms: {
         _uid: [uid],
@@ -13,6 +14,7 @@ function createAnchorQueryBody(uid, contextSort) {
 function createSuccessorsQueryBody(anchorSortValues, contextSort, size) {
   return {
     _source: true,
+    version: true,
     query: {
       match_all: {},
     },
diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js
index b6600c58bd7ff..5042845d407c0 100644
--- a/src/core_plugins/kibana/public/dashboard/dashboard.js
+++ b/src/core_plugins/kibana/public/dashboard/dashboard.js
@@ -87,6 +87,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
 
       timefilter.enabled = true;
       dash.searchSource.highlightAll(true);
+      dash.searchSource.version(true);
       courier.setRootSearchSource(dash.searchSource);
 
       // Following the "best practice" of always have a '.' in your ng-models –
diff --git a/src/core_plugins/kibana/public/discover/controllers/discover.js b/src/core_plugins/kibana/public/discover/controllers/discover.js
index 2063333a357bf..5634a3d6361de 100644
--- a/src/core_plugins/kibana/public/discover/controllers/discover.js
+++ b/src/core_plugins/kibana/public/discover/controllers/discover.js
@@ -144,7 +144,8 @@ function discoverController($scope, config, courier, $route, $window, Notifier,
   $scope.indexPattern = resolveIndexPatternLoading();
   $scope.searchSource
   .set('index', $scope.indexPattern)
-  .highlightAll(true);
+  .highlightAll(true)
+  .version(true);
 
   if (savedSearch.id) {
     docTitle.change(savedSearch.title);
diff --git a/src/ui/public/courier/data_source/search_source.js b/src/ui/public/courier/data_source/search_source.js
index df87fcd7919fe..8b092ca1a5861 100644
--- a/src/ui/public/courier/data_source/search_source.js
+++ b/src/ui/public/courier/data_source/search_source.js
@@ -97,7 +97,8 @@ export default function SearchSourceFactory(Promise, Private, config) {
     'aggs',
     'from',
     'size',
-    'source'
+    'source',
+    'version'
   ];
 
   SearchSource.prototype.index = function (indexPattern) {
diff --git a/src/ui/public/doc_table/doc_table.html b/src/ui/public/doc_table/doc_table.html
index 0982da325518b..309a14fc449c2 100644
--- a/src/ui/public/doc_table/doc_table.html
+++ b/src/ui/public/doc_table/doc_table.html
@@ -11,7 +11,7 @@
         sorting="sorting">
       </thead>
       <tbody>
-        <tr ng-repeat="row in page|limitTo:limit track by row._index+row._type+row._id+row._score"
+        <tr ng-repeat="row in page|limitTo:limit track by row._index+row._type+row._id+row._score+row._version"
           kbn-table-row="row"
           columns="columns"
           sorting="sorting"
@@ -30,7 +30,7 @@
       sorting="sorting">
     </thead>
     <tbody>
-      <tr ng-repeat="row in hits|limitTo:limit track by row._index+row._type+row._id+row._score"
+      <tr ng-repeat="row in hits|limitTo:limit track by row._index+row._type+row._id+row._score+row._version"
         kbn-table-row="row"
         columns="columns"
         sorting="sorting"

From a38ae49884204a87c894393a3d4cdc0c83361dca Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Fri, 3 Mar 2017 09:13:46 -0700
Subject: [PATCH 088/150] Moving front-end code out of devDependencies (#10670)

* Moving front-end code out of devDependencies

* removing range specifier

* overriding ua-parser-js@0.7.12 to MIT

* upgrading react-color; upgrading react; upgrading pui-tooltip;
---
 package.json             | 38 +++++++++++++++++++-------------------
 tasks/config/licenses.js |  1 +
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 3d690214dc78a..fece42d8dfa63 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
     "extract-text-webpack-plugin": "0.8.2",
     "file-loader": "0.8.4",
     "font-awesome": "4.4.0",
+    "flot-charts": "0.8.3",
     "glob": "5.0.13",
     "glob-all": "3.0.1",
     "good-squeeze": "2.1.0",
@@ -156,14 +157,32 @@
     "node-uuid": "1.4.7",
     "pegjs": "0.9.0",
     "postcss-loader": "1.2.1",
+    "pui-react-overlay-trigger": "7.5.4",
+    "pui-react-tooltip": "7.5.4",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
+    "react": "15.4.2",
+    "react-ace": "3.7.0",
+    "react-addons-test-utils": "15.4.2",
+    "react-anything-sortable": "1.6.1",
+    "react-color": "2.11.1",
+    "react-dom": "15.4.2",
+    "react-markdown": "2.4.2",
+    "react-redux": "4.4.5",
+    "react-router": "2.0.0",
+    "react-router-redux": "4.0.4",
+    "react-select": "1.0.0-rc.1",
+    "react-sortable": "1.1.0",
+    "reactcss": "1.0.7",
+    "redux": "3.0.0",
+    "redux-thunk": "0.1.0",
     "request": "2.61.0",
     "rimraf": "2.4.3",
     "rison-node": "1.0.0",
     "rjs-repack-loader": "1.0.6",
     "script-loader": "0.6.1",
     "semver": "5.1.0",
+    "simianhacker-react-resize-aware": "1.0.11",
     "style-loader": "0.12.3",
     "tar": "2.2.0",
     "tinygradient": "0.3.0",
@@ -195,7 +214,6 @@
     "event-stream": "3.3.2",
     "expect.js": "0.3.1",
     "faker": "1.1.0",
-    "flot-charts": "^0.8.3",
     "grunt": "1.0.1",
     "grunt-aws-s3": "0.14.5",
     "grunt-babel": "6.0.0",
@@ -236,25 +254,7 @@
     "npm": "3.10.10",
     "portscanner": "1.0.0",
     "proxyquire": "1.7.10",
-    "pui-react-overlay-trigger": "^7.0.0",
-    "pui-react-tooltip": "^7.0.0",
-    "react": "15.2.0",
-    "react-ace": "3.7.0",
-    "react-addons-test-utils": "15.2.0",
-    "react-anything-sortable": "^1.6.1",
-    "react-color": "^2.2.7",
-    "react-dom": "15.2.0",
-    "react-markdown": "^2.4.2",
-    "react-redux": "4.4.5",
-    "react-router": "2.0.0",
-    "react-router-redux": "4.0.4",
-    "react-select": "^1.0.0-rc.1",
-    "react-sortable": "^1.1.0",
-    "reactcss": "^1.0.7",
-    "redux": "3.0.0",
-    "redux-thunk": "0.1.0",
     "sass-loader": "4.0.0",
-    "simianhacker-react-resize-aware": "^1.0.11",
     "simple-git": "1.37.0",
     "sinon": "1.17.2",
     "source-map": "0.5.6",
diff --git a/tasks/config/licenses.js b/tasks/config/licenses.js
index c43499364018f..356c56e740f13 100644
--- a/tasks/config/licenses.js
+++ b/tasks/config/licenses.js
@@ -49,6 +49,7 @@ module.exports = function (grunt) {
         'ripemd160@0.2.0': ['MIT'],
         'select@1.0.6': ['MIT'],
         'uglify-js@2.2.5': ['BSD'],
+        'ua-parser-js@0.7.12': ['MIT']
       }
     }
   };

From 9e39956c2725271d5ae2afeb685b7c0290f77cf9 Mon Sep 17 00:00:00 2001
From: Court Ewing <court@epixa.com>
Date: Fri, 3 Mar 2017 12:57:21 -0500
Subject: [PATCH 089/150] build: always run build task in jenkins (#10689)

We always run the build task now in jenkins jobs rather than only in the
core builds. This ensures that the build task runs in PR builds even
though the build artifacts are not used for anything.

Ideally all the selenium tests would run against this build rather than
it just being something that gets ran and forgotten about, but this is a
first step.
---
 test/scripts/jenkins_unit.sh | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/scripts/jenkins_unit.sh b/test/scripts/jenkins_unit.sh
index ebeceabed8eeb..e757ae86d4d5c 100755
--- a/test/scripts/jenkins_unit.sh
+++ b/test/scripts/jenkins_unit.sh
@@ -4,3 +4,5 @@ set -e
 source "$(dirname $0)/_jenkins_setup.sh"
 
 xvfb-run "$(npm bin)/grunt" jenkins:unit;
+
+"$(npm bin)/grunt" build;

From b804ea050d7252b594191530dca7fc0f03c0adb7 Mon Sep 17 00:00:00 2001
From: Spencer <spalger@users.noreply.github.com>
Date: Fri, 3 Mar 2017 15:33:07 -0700
Subject: [PATCH 090/150] [ui/resize_checker] extract from vislib and use
 resize-observer polyfill (#9439)

---
 package.json                                  |   1 +
 .../console/public/src/sense_editor_resize.js |   2 +-
 .../__tests__/reflow_watcher.js               |  81 -------
 .../public/reflow_watcher/reflow_watcher.js   |  67 ------
 .../__tests__/resize_checker.js               | 145 +++++++++++++
 src/ui/public/resize_checker/index.js         |   1 +
 .../public/resize_checker/resize_checker.js   |  94 ++++++++
 src/ui/public/utils/__tests__/sequencer.js    | 100 ---------
 src/ui/public/utils/sequencer.js              |  93 --------
 .../vislib/__tests__/lib/resize_checker.js    | 203 ------------------
 src/ui/public/vislib/lib/resize_checker.js    | 203 ------------------
 src/ui/public/vislib/vis.js                   |  12 +-
 12 files changed, 247 insertions(+), 755 deletions(-)
 delete mode 100644 src/ui/public/reflow_watcher/__tests__/reflow_watcher.js
 delete mode 100644 src/ui/public/reflow_watcher/reflow_watcher.js
 create mode 100644 src/ui/public/resize_checker/__tests__/resize_checker.js
 create mode 100644 src/ui/public/resize_checker/index.js
 create mode 100644 src/ui/public/resize_checker/resize_checker.js
 delete mode 100644 src/ui/public/utils/__tests__/sequencer.js
 delete mode 100644 src/ui/public/utils/sequencer.js
 delete mode 100644 src/ui/public/vislib/__tests__/lib/resize_checker.js
 delete mode 100644 src/ui/public/vislib/lib/resize_checker.js

diff --git a/package.json b/package.json
index fece42d8dfa63..e41ca3213db2b 100644
--- a/package.json
+++ b/package.json
@@ -177,6 +177,7 @@
     "redux": "3.0.0",
     "redux-thunk": "0.1.0",
     "request": "2.61.0",
+    "resize-observer-polyfill": "1.2.1",
     "rimraf": "2.4.3",
     "rison-node": "1.0.0",
     "rjs-repack-loader": "1.0.6",
diff --git a/src/core_plugins/console/public/src/sense_editor_resize.js b/src/core_plugins/console/public/src/sense_editor_resize.js
index ef989c1b63493..3644c6aef1793 100644
--- a/src/core_plugins/console/public/src/sense_editor_resize.js
+++ b/src/core_plugins/console/public/src/sense_editor_resize.js
@@ -1,4 +1,4 @@
-import ResizeCheckerProvider from 'ui/vislib/lib/resize_checker'
+import { ResizeCheckerProvider } from 'ui/resize_checker'
 
 export function useResizeCheckerProvider(Private) {
   const ResizeChecker = Private(ResizeCheckerProvider);
diff --git a/src/ui/public/reflow_watcher/__tests__/reflow_watcher.js b/src/ui/public/reflow_watcher/__tests__/reflow_watcher.js
deleted file mode 100644
index 1b1f8bafba505..0000000000000
--- a/src/ui/public/reflow_watcher/__tests__/reflow_watcher.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import 'angular';
-import $ from 'jquery';
-import _ from 'lodash';
-import expect from 'expect.js';
-import sinon from 'auto-release-sinon';
-import ngMock from 'ng_mock';
-import EventsProvider from 'ui/events';
-import ReflowWatcherProvider from 'ui/reflow_watcher';
-describe('Reflow watcher', function () {
-
-  const $body = $(document.body);
-  const $window = $(window);
-  const expectStubbedEventAndEl = function (stub, event, $el) {
-    expect(stub.getCalls().some(function (call) {
-      const events = call.args[0].split(' ');
-      return _.contains(events, event) && $el.is(call.thisValue);
-    })).to.be(true);
-  };
-
-  let EventEmitter;
-  let reflowWatcher;
-  let $rootScope;
-  let $onStub;
-
-  beforeEach(ngMock.module('kibana', function () {
-    // stub jQuery's $.on method while creating the reflowWatcher
-    $onStub = sinon.stub($.fn, 'on');
-  }));
-  beforeEach(ngMock.inject(function (Private, $injector) {
-    $rootScope = $injector.get('$rootScope');
-    EventEmitter = Private(EventsProvider);
-    reflowWatcher = Private(ReflowWatcherProvider);
-    // setup the reflowWatchers $http watcher
-    $rootScope.$apply();
-  }));
-  afterEach(function () {
-    $onStub.restore();
-  });
-
-  it('is an event emitter', function () {
-    expect(reflowWatcher).to.be.an(EventEmitter);
-  });
-
-  describe('listens', function () {
-    it('to "mouseup" on the body', function () {
-      expectStubbedEventAndEl($onStub, 'mouseup', $body);
-    });
-
-    it('to "resize" on the window', function () {
-      expectStubbedEventAndEl($onStub, 'resize', $window);
-    });
-  });
-
-  describe('un-listens in #destroy()', function () {
-    let $offStub;
-
-    beforeEach(function () {
-      $offStub = sinon.stub($.fn, 'off');
-      reflowWatcher.destroy();
-      $offStub.restore();
-    });
-
-    it('to "mouseup" on the body', function () {
-      expectStubbedEventAndEl($offStub, 'mouseup', $body);
-    });
-
-    it('to "resize" on the window', function () {
-      expectStubbedEventAndEl($offStub, 'resize', $window);
-    });
-  });
-
-  it('triggers the "reflow" event within a new angular tick', function () {
-    const stub = sinon.stub();
-    reflowWatcher.on('reflow', stub);
-    reflowWatcher.trigger();
-
-    expect(stub).to.have.property('callCount', 0);
-    $rootScope.$apply();
-    expect(stub).to.have.property('callCount', 1);
-  });
-});
diff --git a/src/ui/public/reflow_watcher/reflow_watcher.js b/src/ui/public/reflow_watcher/reflow_watcher.js
deleted file mode 100644
index 43b052a5bafc8..0000000000000
--- a/src/ui/public/reflow_watcher/reflow_watcher.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import angular from 'angular';
-import $ from 'jquery';
-import _ from 'lodash';
-import EventsProvider from 'ui/events';
-export default function ReflowWatcherService(Private, $rootScope, $http) {
-
-  const EventEmitter = Private(EventsProvider);
-  const $body = $(document.body);
-  const $window = $(window);
-
-  const MOUSE_EVENTS = 'mouseup';
-  const WINDOW_EVENTS = 'resize';
-
-  _.class(ReflowWatcher).inherits(EventEmitter);
-  /**
-   * Watches global activity which might hint at a change in the content, which
-   * in turn provides a hint to resizers that they should check their size
-   */
-  function ReflowWatcher() {
-    ReflowWatcher.Super.call(this);
-
-    // bound version of trigger that can be used as a handler
-    this.trigger = _.bind(this.trigger, this);
-    this._emitReflow = _.bind(this._emitReflow, this);
-
-    // list of functions to call that will unbind our watchers
-    this._unwatchers = [
-      $rootScope.$watchCollection(function () {
-        return $http.pendingRequests;
-      }, this.trigger)
-    ];
-
-    $body.on(MOUSE_EVENTS, this.trigger);
-    $window.on(WINDOW_EVENTS, this.trigger);
-  }
-
-  /**
-   * Simply emit reflow, but in a way that can be bound and passed to
-   * other functions. Using _.bind caused extra arguments to be added, and
-   * then emitted to other places. No Bueno
-   *
-   * @return {void}
-   */
-  ReflowWatcher.prototype._emitReflow = function () {
-    this.emit('reflow');
-  };
-
-  /**
-   * Emit the "reflow" event in the next tick of the digest cycle
-   * @return {void}
-   */
-  ReflowWatcher.prototype.trigger = function () {
-    $rootScope.$evalAsync(this._emitReflow);
-  };
-
-  /**
-   * Signal to the ReflowWatcher that it should clean up it's listeners
-   * @return {void}
-   */
-  ReflowWatcher.prototype.destroy = function () {
-    $body.off(MOUSE_EVENTS, this.trigger);
-    $window.off(WINDOW_EVENTS, this.trigger);
-    _.callEach(this._unwatchers);
-  };
-
-  return new ReflowWatcher();
-}
diff --git a/src/ui/public/resize_checker/__tests__/resize_checker.js b/src/ui/public/resize_checker/__tests__/resize_checker.js
new file mode 100644
index 0000000000000..80c8f7e6726df
--- /dev/null
+++ b/src/ui/public/resize_checker/__tests__/resize_checker.js
@@ -0,0 +1,145 @@
+import $ from 'jquery';
+import { delay, fromNode } from 'bluebird';
+import expect from 'expect.js';
+import sinon from 'auto-release-sinon';
+
+import ngMock from 'ng_mock';
+import EventsProvider from 'ui/events';
+import NoDigestPromises from 'test_utils/no_digest_promises';
+
+import { ResizeCheckerProvider } from '../resize_checker';
+
+describe('Resize Checker', () => {
+  NoDigestPromises.activateForSuite();
+
+  const teardown = [];
+  let setup;
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(($injector) => {
+    setup = () => {
+      const Private = $injector.get('Private');
+      const ResizeChecker = Private(ResizeCheckerProvider);
+      const EventEmitter = Private(EventsProvider);
+
+      const createEl = () => {
+        const el = $('<div>').appendTo('body').get(0);
+        teardown.push(() => $(el).remove());
+        return el;
+      };
+
+      const createChecker = el => {
+        const checker = new ResizeChecker(el);
+        teardown.push(() => checker.destroy());
+        return checker;
+      };
+
+      const createListener = () => {
+        let resolveFirstCallPromise;
+        const listener = sinon.spy(() => resolveFirstCallPromise());
+        listener.firstCallPromise = new Promise(resolve => (resolveFirstCallPromise = resolve));
+        return listener;
+      };
+
+      return { EventEmitter, createEl, createChecker, createListener };
+    };
+  }));
+
+  afterEach(() => {
+    teardown.splice(0).forEach(fn => {
+      fn();
+    });
+  });
+
+  describe('contruction', () => {
+    it('accepts a jQuery wrapped element', () => {
+      const { createChecker } = setup();
+
+      createChecker($('<div>'));
+    });
+  });
+
+  describe('events', () => {
+    it('is an event emitter', () => {
+      const { createEl, createChecker, EventEmitter } = setup();
+
+      const checker = createChecker(createEl());
+      expect(checker).to.be.a(EventEmitter);
+    });
+
+    it('emits a "resize" event asynchronously', async () => {
+      const { createEl, createChecker, createListener } = setup();
+
+      const el = createEl();
+      const checker = createChecker(el);
+      const listener = createListener();
+
+      checker.on('resize', listener);
+      $(el).height(100);
+      sinon.assert.notCalled(listener);
+      await listener.firstCallPromise;
+      sinon.assert.calledOnce(listener);
+    });
+  });
+
+  describe('#modifySizeWithoutTriggeringResize()', () => {
+    it(`does not emit "resize" events caused by the block`, async () => {
+      const { createChecker, createEl, createListener } = setup();
+
+      const el = createEl();
+      const checker = createChecker(el);
+      const listener = createListener();
+
+      checker.on('resize', listener);
+      checker.modifySizeWithoutTriggeringResize(() => {
+        $(el).height(100);
+      });
+      await delay(1000);
+      sinon.assert.notCalled(listener);
+    });
+
+    it('does emit "resize" when modification is made between the block and resize notification', async () => {
+      const { createChecker, createEl, createListener } = setup();
+
+      const el = createEl();
+      const checker = createChecker(el);
+      const listener = createListener();
+
+      checker.on('resize', listener);
+      checker.modifySizeWithoutTriggeringResize(() => {
+        $(el).height(100);
+      });
+      sinon.assert.notCalled(listener);
+      $(el).height(200);
+      await listener.firstCallPromise;
+      sinon.assert.calledOnce(listener);
+    });
+  });
+
+  describe('#destroy()', () => {
+    it('destroys internal observer instance', () => {
+      const { createChecker, createEl, createListener } = setup();
+
+      const checker = createChecker(createEl());
+      const listener = createListener();
+
+      checker.destroy();
+      expect(!checker._observer).to.be(true);
+    });
+
+    it('does not emit future resize events', async () => {
+      const { createChecker, createEl, createListener } = setup();
+
+      const el = createEl();
+      const checker = createChecker(el);
+      const listener = createListener();
+
+      checker.on('resize', listener);
+      checker.destroy();
+
+      $(el).height(100);
+      await delay(1000);
+      sinon.assert.notCalled(listener);
+    });
+  });
+});
diff --git a/src/ui/public/resize_checker/index.js b/src/ui/public/resize_checker/index.js
new file mode 100644
index 0000000000000..fbc47d1f9afd7
--- /dev/null
+++ b/src/ui/public/resize_checker/index.js
@@ -0,0 +1 @@
+export { ResizeCheckerProvider } from './resize_checker';
diff --git a/src/ui/public/resize_checker/resize_checker.js b/src/ui/public/resize_checker/resize_checker.js
new file mode 100644
index 0000000000000..df6d7009f8825
--- /dev/null
+++ b/src/ui/public/resize_checker/resize_checker.js
@@ -0,0 +1,94 @@
+import $ from 'jquery';
+import ResizeObserver from 'resize-observer-polyfill';
+import { uniqueId, isEqual } from 'lodash';
+
+import EventsProvider from 'ui/events';
+
+export function ResizeCheckerProvider(Private) {
+  const EventEmitter = Private(EventsProvider);
+
+  function validateElArg(el) {
+    // the ResizeChecker historically accepted jquery elements,
+    // so we wrap in jQuery then extract the element
+    const $el = $(el);
+
+    if ($el.size() !== 1) {
+      throw new TypeError('ResizeChecker must be constructed with a single DOM element.');
+    }
+
+    return $el.get(0);
+  }
+
+  function getSize(el) {
+    return [el.clientWidth, el.clientHeight];
+  }
+
+  /**
+   *  ResizeChecker receives an element and emits a "resize"
+   *  event every time it changes size. Used by the vislib to re-render
+   *  visualizations on resize as well as the console for the
+   *  same reason, but for the editors.
+   */
+  return class ResizeChecker extends EventEmitter {
+    constructor(el) {
+      super();
+
+      this._el = validateElArg(el);
+
+      // the width and height of the element that we expect to see
+      // on the next resize notification. If it matches the size at
+      // the time of the notifications then it we will be ignored.
+      this._expectedSize = getSize(this._el);
+
+      this._observer = new ResizeObserver(() => {
+        if (this._expectedSize) {
+          const sameSize = isEqual(getSize(this._el), this._expectedSize);
+          this._expectedSize = null;
+
+          if (sameSize) {
+            // don't trigger resize notification if the size is what we expect
+            return;
+          }
+        }
+
+        this.emit('resize');
+      });
+
+      this._observer.observe(this._el);
+    }
+
+    /**
+     *  Run a function and ignore all resizes that occur
+     *  while it's running.
+     *
+     *  @return {undefined}
+     */
+    modifySizeWithoutTriggeringResize(block) {
+      try {
+        block();
+      } finally {
+        this._expectedSize = getSize(this._el);
+      }
+    }
+
+    /**
+    * Tell the ResizeChecker to shutdown, stop listenings, and never
+    * emit another resize event.
+    *
+    * Cleans up it's listeners and timers.
+    *
+    * @method destroy
+    * @return {void}
+    */
+    destroy() {
+      if (this._destroyed) return;
+      this._destroyed = true;
+
+      this._observer.disconnect();
+      this._observer = null;
+      this._expectedSize = null;
+      this._el = null;
+      this.removeAllListeners();
+    }
+  };
+}
diff --git a/src/ui/public/utils/__tests__/sequencer.js b/src/ui/public/utils/__tests__/sequencer.js
deleted file mode 100644
index 3a163ff6ad76e..0000000000000
--- a/src/ui/public/utils/__tests__/sequencer.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import _ from 'lodash';
-import sequencer from 'ui/utils/sequencer';
-import expect from 'expect.js';
-describe('sequencer util', function () {
-
-  const opts = [
-    { min: 500, max: 7500, length: 1500 },
-    { min: 50, max: 500, length: 1000 },
-    { min: 5, max: 50, length: 100 }
-  ];
-
-  function eachSeqFor(method, fn) {
-    opts.forEach(function (args) {
-      fn(method(args.min, args.max, args.length), args);
-    });
-  }
-
-  function getSlopes(seq, count) {
-    return _.chunk(seq, Math.ceil(seq.length / count)).map(function (chunk) {
-      return (_.last(chunk) - _.first(chunk)) / chunk.length;
-    });
-  }
-
-  // using expect() here causes massive GC runs because seq can be +1000 elements
-  function expectedChange(seq, up) {
-    up = !!up;
-
-    if (seq.length < 2) {
-      throw new Error('unable to reach change without at least two elements');
-    }
-
-    seq.forEach(function (n, i) {
-      if (i > 0 && (seq[i - 1] < n) !== up) {
-        throw new Error('expected values to ' + (up ? 'increase' : 'decrease'));
-      }
-    });
-  }
-
-  function generalTests(seq, args) {
-    it('obeys the min arg', function () {
-      expect(Math.min.apply(Math, seq)).to.be(args.min);
-    });
-
-    it('obeys the max arg', function () {
-      expect(Math.max.apply(Math, seq)).to.be(args.max);
-    });
-
-    it('obeys the length arg', function () {
-      expect(seq).to.have.length(args.length);
-    });
-
-    it('always creates increasingly larger values', function () {
-      expectedChange(seq, true);
-    });
-  }
-
-  describe('#createEaseIn', function () {
-    eachSeqFor(sequencer.createEaseIn, function (seq, args) {
-      describe('with args: ' + JSON.stringify(args), function () {
-        generalTests(seq, args);
-
-        it('produces increasing slopes', function () {
-          expectedChange(getSlopes(seq, 2), true);
-          expectedChange(getSlopes(seq, 4), true);
-          expectedChange(getSlopes(seq, 6), true);
-        });
-      });
-    });
-  });
-
-  describe('#createEaseOut', function () {
-    eachSeqFor(sequencer.createEaseOut, function (seq, args) {
-      describe('with args: ' + JSON.stringify(args), function () {
-        generalTests(seq, args);
-
-        it('produces decreasing slopes', function () {
-          expectedChange(getSlopes(seq, 2), false);
-          expectedChange(getSlopes(seq, 4), false);
-          expectedChange(getSlopes(seq, 6), false);
-        });
-
-        // Flipped version of previous test to ensure that expectedChange()
-        // and friends are behaving properly
-        it('doesn\'t produce increasing slopes', function () {
-          expect(function () {
-            expectedChange(getSlopes(seq, 2), true);
-          }).to.throwError();
-
-          expect(function () {
-            expectedChange(getSlopes(seq, 4), true);
-          }).to.throwError();
-
-          expect(function () {
-            expectedChange(getSlopes(seq, 6), true);
-          }).to.throwError();
-        });
-      });
-    });
-  });
-});
diff --git a/src/ui/public/utils/sequencer.js b/src/ui/public/utils/sequencer.js
deleted file mode 100644
index 5783d1dcb9c08..0000000000000
--- a/src/ui/public/utils/sequencer.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import _ from 'lodash';
-
-function create(min, max, length, mod) {
-  const seq = new Array(length);
-
-  const valueDist = max - min;
-
-  // range of values that the mod creates
-  const modRange = [mod(0, length), mod(length - 1, length)];
-
-  // distance between
-  const modRangeDist = modRange[1] - modRange[0];
-
-  _.times(length, function (i) {
-    const modIPercent = (mod(i, length) - modRange[0]) / modRangeDist;
-
-    // percent applied to distance and added to min to
-    // produce value
-    seq[i] = min + (valueDist * modIPercent);
-  });
-
-  seq.min = min;
-  seq.max = max;
-
-  return seq;
-}
-
-export default {
-  /**
-   * Create an exponential sequence of numbers.
-   *
-   * Creates a curve resembling:
-   *
-   *                                                         ;
-   *                                                         /
-   *                                                        /
-   *                                                     .-'
-   *                                                 _.-"
-   *                                            _.-'"
-   *                                      _,.-'"
-   *                               _,..-'"
-   *                       _,..-'""
-   *              _,..-'""
-   *  ____,..--'""
-   *
-   * @param {number} min - the min value to produce
-   * @param {number} max - the max value to produce
-   * @param {number} length - the number of values to produce
-   * @return {number[]} - an array containing the sequence
-   */
-  createEaseIn: _.partialRight(create, function (i, length) {
-    // generates numbers from 1 to +Infinity
-    return i * Math.pow(i, 1.1111);
-  }),
-
-  /**
-   * Create an sequence of numbers using sine.
-   *
-   * Create a curve resembling:
-   *
-   *                                            ____,..--'""
-   *                                    _,..-'""
-   *                            _,..-'""
-   *                     _,..-'"
-   *               _,.-'"
-   *          _.-'"
-   *      _.-"
-   *   .-'
-   *  /
-   * /
-   * ;
-   *
-   *
-   * @param {number} min - the min value to produce
-   * @param {number} max - the max value to produce
-   * @param {number} length - the number of values to produce
-   * @return {number[]} - an array containing the sequence
-   */
-  createEaseOut: _.partialRight(create, function (i, length) {
-    // adapted from output of http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm
-    // generates numbers from 0 to 100
-
-    const ts = (i /= length) * i;
-    const tc = ts * i;
-    return 100 * (
-      0.5 * tc * ts +
-      -3 * ts * ts +
-      6.5 * tc +
-      -7 * ts +
-      4 * i
-    );
-  })
-};
diff --git a/src/ui/public/vislib/__tests__/lib/resize_checker.js b/src/ui/public/vislib/__tests__/lib/resize_checker.js
deleted file mode 100644
index bafaef16eaf2d..0000000000000
--- a/src/ui/public/vislib/__tests__/lib/resize_checker.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import $ from 'jquery';
-import _ from 'lodash';
-import Promise from 'bluebird';
-import ngMock from 'ng_mock';
-import expect from 'expect.js';
-import sinon from 'auto-release-sinon';
-import VislibLibResizeCheckerProvider from 'ui/vislib/lib/resize_checker';
-import EventsProvider from 'ui/events';
-import ReflowWatcherProvider from 'ui/reflow_watcher';
-
-describe('Vislib Resize Checker', function () {
-
-  require('test_utils/no_digest_promises').activateForSuite();
-
-  let ResizeChecker;
-  let EventEmitter;
-  let checker;
-  let reflowWatcher;
-  const reflowSpies = {};
-
-  beforeEach(ngMock.module('kibana'));
-
-  beforeEach(ngMock.inject(function (Private) {
-    ResizeChecker = Private(VislibLibResizeCheckerProvider);
-    EventEmitter = Private(EventsProvider);
-    reflowWatcher = Private(ReflowWatcherProvider);
-    reflowSpies.on = sinon.spy(reflowWatcher, 'on');
-    reflowSpies.off = sinon.spy(reflowWatcher, 'off');
-
-    const $el = $(document.createElement('div'))
-    .appendTo('body')
-    .css('visibility', 'hidden')
-    .get(0);
-
-    checker = new ResizeChecker($el);
-  }));
-
-  afterEach(function () {
-    checker.$el.remove();
-    checker.destroy();
-  });
-
-  describe('basic functionality', function () {
-    it('is an event emitter', function () {
-      expect(checker).to.be.a(EventEmitter);
-    });
-
-    it('listens for the "reflow" event of the reflowWatchers', function () {
-      expect(reflowSpies.on).to.have.property('callCount', 1);
-      const call = reflowSpies.on.getCall(0);
-      expect(call.args[0]).to.be('reflow');
-    });
-
-    it('emits a "resize" event when the el is resized', function (done) {
-      checker.on('resize', function () {
-        done();
-      });
-
-      checker.$el.text('haz contents');
-      checker.check();
-    });
-  });
-
-  describe('#read', function () {
-    it('gets the proper dimensions for the element', function () {
-      const dimensions = checker.read();
-      const windowWidth = document.documentElement.clientWidth;
-
-      expect(dimensions.w).to.equal(windowWidth);
-      expect(dimensions.h).to.equal(0);
-    });
-  });
-
-  describe('#saveSize', function () {
-    it('calls #read() when no arg is passed', function () {
-      const stub = sinon.stub(checker, 'read').returns({});
-
-      checker.saveSize();
-
-      expect(stub).to.have.property('callCount', 1);
-    });
-
-    it('saves the size of the element', function () {
-      const football = {};
-      checker.saveSize(football);
-      expect(checker).to.have.property('_savedSize', football);
-    });
-
-    it('returns false if the size matches the previous value', function () {
-      expect(checker.saveSize(checker._savedSize)).to.be(false);
-    });
-
-    it('returns true if the size is different than previous value', function () {
-      expect(checker.saveSize({})).to.be(true);
-    });
-  });
-
-  describe('#check()', function () {
-    let emit;
-
-    beforeEach(function () {
-      emit = sinon.stub(checker, 'emit');
-
-      // prevent the checker from auto-checking
-      checker.destroy();
-      checker.startSchedule = checker.continueSchedule = _.noop;
-    });
-
-    it('does not emit "resize" immediately after a resize, but waits for changes to stop', function () {
-      expect(checker).to.have.property('_isDirty', false);
-
-      checker.$el.css('height', 100);
-      checker.check();
-
-      expect(checker).to.have.property('_isDirty', true);
-      expect(emit).to.have.property('callCount', 0);
-
-      // no change in el size
-      checker.check();
-
-      expect(checker).to.have.property('_isDirty', false);
-      expect(emit).to.have.property('callCount', 1);
-    });
-
-    it('emits "resize" based on MS_MAX_RESIZE_DELAY, even if el\'s constantly changing size', function () {
-      const steps = _.random(5, 10);
-      this.slow(steps * 10);
-
-      // we are going to fake the delay using the fake clock
-      const msStep = Math.floor(ResizeChecker.MS_MAX_RESIZE_DELAY / (steps - 1));
-      const clock = sinon.useFakeTimers();
-
-      _.times(steps, function step(i) {
-        checker.$el.css('height', 100 + i);
-        checker.check();
-
-        expect(checker).to.have.property('_isDirty', true);
-        expect(emit).to.have.property('callCount', i > steps ? 1 : 0);
-
-        clock.tick(msStep); // move the clock forward one step
-      });
-
-    });
-  });
-
-  describe('#destroy()', function () {
-    it('removes the "reflow" event from the reflowWatcher', function () {
-      const onCall = reflowSpies.on.getCall(0);
-      const handler = onCall.args[1];
-
-      checker.destroy();
-      expect(reflowSpies.off).to.have.property('callCount', 1);
-      expect(reflowSpies.off.calledWith('reflow', handler)).to.be.ok();
-    });
-
-    it('clears the timeout', function () {
-      const spy = sinon.spy(window, 'clearTimeout');
-      checker.destroy();
-      expect(spy).to.have.property('callCount', 1);
-    });
-  });
-
-  describe('scheduling', function () {
-    let clock;
-    let schedule;
-
-    beforeEach(function () {
-      // prevent the checker from running automatically
-      checker.destroy();
-      clock = sinon.useFakeTimers();
-
-      schedule = [];
-      _.times(25, function () {
-        schedule.push(_.random(3, 250));
-      });
-    });
-
-    it('walks the schedule, using each value as it\'s next timeout', function () {
-      let timerId = checker.startSchedule(schedule);
-
-      // start at 0 even though "start" used the first slot, we will still check it
-      for (let i = 0; i < schedule.length; i++) {
-        expect(clock.timers[timerId]).to.have.property('callAt', schedule[i]);
-        timerId = checker.continueSchedule();
-      }
-    });
-
-    it('repeats the last value in the schedule', function () {
-      let timerId = checker.startSchedule(schedule);
-
-      // start at 1, and go until there is one left
-      for (let i = 1; i < schedule.length - 1; i++) {
-        timerId = checker.continueSchedule();
-      }
-
-      const last = _.last(schedule);
-      _.times(5, function () {
-        const timer = clock.timers[checker.continueSchedule()];
-        expect(timer).to.have.property('callAt', last);
-      });
-    });
-  });
-});
diff --git a/src/ui/public/vislib/lib/resize_checker.js b/src/ui/public/vislib/lib/resize_checker.js
deleted file mode 100644
index 69fcf343591a9..0000000000000
--- a/src/ui/public/vislib/lib/resize_checker.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import $ from 'jquery';
-import _ from 'lodash';
-import sequencer from 'ui/utils/sequencer';
-import EventsProvider from 'ui/events';
-import ReflowWatcherProvider from 'ui/reflow_watcher';
-export default function ResizeCheckerFactory(Private, Notifier) {
-
-  const EventEmitter = Private(EventsProvider);
-  const reflowWatcher = Private(ReflowWatcherProvider);
-
-  const SCHEDULE = ResizeChecker.SCHEDULE = sequencer.createEaseIn(
-    100,      // shortest delay
-    10000,  // longest delay
-    50     // tick count
-  );
-
-  // maximum ms that we can delay emitting 'resize'. This is only used
-  // to debounce resizes when the size of the element is constantly changing
-  const MS_MAX_RESIZE_DELAY = ResizeChecker.MS_MAX_RESIZE_DELAY = 500;
-
-  /**
-   * Checks the size of an element on a regular basis. Provides
-   * an event that is emited when the element has changed size.
-   *
-   * @class ResizeChecker
-   * @param {HtmlElement} el - the element to track the size of
-   */
-  _.class(ResizeChecker).inherits(EventEmitter);
-  function ResizeChecker(el) {
-    ResizeChecker.Super.call(this);
-
-    this.$el = $(el);
-    this.notify = new Notifier({ location: 'Vislib ResizeChecker ' + _.uniqueId() });
-
-    this.saveSize();
-
-    this.check = _.bind(this.check, this);
-    this.check();
-
-    this.onReflow = _.bind(this.onReflow, this);
-    reflowWatcher.on('reflow', this.onReflow);
-  }
-
-  ResizeChecker.prototype.onReflow = function () {
-    this.startSchedule(SCHEDULE);
-  };
-
-  /**
-   * Read the size of the element
-   *
-   * @method read
-   * @return {object} - an object with keys `w` (width) and `h` (height)
-   */
-  ResizeChecker.prototype.read = function () {
-    return {
-      w: this.$el[0].clientWidth,
-      h: this.$el[0].clientHeight
-    };
-  };
-
-
-  /**
-   * Save the element size, preventing it from being considered as an
-   * update.
-   *
-   * @method save
-   * @param  {object} [size] - optional size to save, otherwise #read() is called
-   * @return {boolean} - true if their was a change in the new
-   */
-  ResizeChecker.prototype.saveSize = function (size) {
-    if (!size) size = this.read();
-
-    if (this._equalsSavedSize(size)) {
-      return false;
-    }
-
-    this._savedSize = size;
-    return true;
-  };
-
-
-  /**
-   * Determine if a given size matches the currently saved size.
-   *
-   * @private
-   * @method _equalsSavedSize
-   * @param  {object} a - an object that matches the return value of #read()
-   * @return {boolean} - true if the passed in value matches the saved size
-   */
-  ResizeChecker.prototype._equalsSavedSize = function (a) {
-    const b = this._savedSize || {};
-    return a.w === b.w && a.h === b.h;
-  };
-
-  /**
-   * Read the time that the dirty state last changed.
-   *
-   * @method lastDirtyChange
-   * @return {timestamp} - the unix timestamp (in ms) of the last update
-   *                       to the dirty state
-   */
-  ResizeChecker.prototype.lastDirtyChange = function () {
-    return this._dirtyChangeStamp;
-  };
-
-  /**
-   * Record the dirty state
-   *
-   * @method saveDirty
-   * @param  {boolean} val
-   * @return {boolean} - true if the dirty state changed by this save
-   */
-  ResizeChecker.prototype.saveDirty = function (val) {
-    val = !!val;
-
-    if (val === this._isDirty) return false;
-
-    this._isDirty = val;
-    this._dirtyChangeStamp = Date.now();
-    return true;
-  };
-
-  /**
-   * The check routine that executes regularly and will reschedule itself
-   * to run again in the future. It determines the state of the elements
-   * size and decides when to emit the "update" event.
-   *
-   * @method check
-   * @return {void}
-   */
-  ResizeChecker.prototype.check = function () {
-    const newSize = this.read();
-    const dirty = this.saveSize(newSize);
-    const dirtyChanged = this.saveDirty(dirty);
-
-    const doneDirty = !dirty && dirtyChanged;
-    const muchDirty = dirty && (this.lastDirtyChange() - Date.now() > MS_MAX_RESIZE_DELAY);
-    if (doneDirty || muchDirty) {
-      this.emit('resize', newSize);
-    }
-
-    // if the dirty state is unchanged, continue using the previous schedule
-    if (!dirtyChanged) {
-      return this.continueSchedule();
-    }
-
-    return this.startSchedule(SCHEDULE);
-  };
-
-  /**
-   * Start running a new schedule, using one of the SCHEDULE_* constants.
-   *
-   * @method startSchedule
-   * @param  {integer[]} schedule - an array of millisecond times that should
-   *                              be used to schedule calls to #check();
-   * @return {integer} - the id of the next timer
-   */
-  ResizeChecker.prototype.startSchedule = function (schedule) {
-    this._tick = -1;
-    this._currentSchedule = schedule;
-    return this.continueSchedule();
-  };
-
-  /**
-   * Continue running the current schedule. MUST BE CALLED AFTER #startSchedule()
-   *
-   * @method continueSchedule
-   * @return {integer} - the id of the next timer
-   */
-  ResizeChecker.prototype.continueSchedule = function () {
-    clearTimeout(this._timerId);
-
-    if (this._tick < this._currentSchedule.length - 1) {
-      // at the end of the schedule, don't progress any further but repeat the last value
-      this._tick += 1;
-    }
-
-    const check = this.check; // already bound
-    const ms = this._currentSchedule[this._tick];
-    return (this._timerId = setTimeout(function () {
-      check();
-    }, ms));
-  };
-
-  ResizeChecker.prototype.stopSchedule = function () {
-    clearTimeout(this._timerId);
-  };
-
-  /**
-   * Signal that the ResizeChecker should shutdown.
-   *
-   * Cleans up it's listeners and timers.
-   *
-   * @method destroy
-   * @return {void}
-   */
-  ResizeChecker.prototype.destroy = function () {
-    reflowWatcher.off('reflow', this.onReflow);
-    clearTimeout(this._timerId);
-  };
-
-  return ResizeChecker;
-}
diff --git a/src/ui/public/vislib/vis.js b/src/ui/public/vislib/vis.js
index 951a0e4dcea71..d115c3875dc79 100644
--- a/src/ui/public/vislib/vis.js
+++ b/src/ui/public/vislib/vis.js
@@ -3,13 +3,13 @@ import d3 from 'd3';
 import Binder from 'ui/binder';
 import errors from 'ui/errors';
 import EventsProvider from 'ui/events';
+import { ResizeCheckerProvider } from 'ui/resize_checker';
 import './styles/main.less';
-import VislibLibResizeCheckerProvider from './lib/resize_checker';
 import VisConifgProvider from './lib/vis_config';
 import VisHandlerProvider from './lib/handler';
 
 export default function VisFactory(Private) {
-  const ResizeChecker = Private(VislibLibResizeCheckerProvider);
+  const ResizeChecker = Private(ResizeCheckerProvider);
   const Events = Private(EventsProvider);
   const VisConfig = Private(VisConifgProvider);
   const Handler = Private(VisHandlerProvider);
@@ -98,11 +98,9 @@ export default function VisFactory(Private) {
     }
 
     _runWithoutResizeChecker(method) {
-      this.resizeChecker.stopSchedule();
-      this._runOnHandler(method);
-      this.resizeChecker.saveSize();
-      this.resizeChecker.saveDirty(false);
-      this.resizeChecker.continueSchedule();
+      this.resizeChecker.modifySizeWithoutTriggeringResize(() => {
+        this._runOnHandler(method);
+      });
     }
 
     _runOnHandler(method) {

From 82b37aa524f5cc154e9171cbcacefe9198af710d Mon Sep 17 00:00:00 2001
From: Joe Fleming <w33ble@users.noreply.github.com>
Date: Fri, 3 Mar 2017 17:02:09 -0700
Subject: [PATCH 091/150] Prompt about overwriting existing saved objects
 (#10663)

* prompt about overwriting existing saved objects

If the user selects now, things work the same as before, but selecting yes will just overwrite existing saved objects without prompting

* add more white space

because https://github.com/elastic/kibana/blob/master/style_guides/js_style_guide.md#chaining-operations

* re-word the overwrite all dialog
---
 .../management/sections/objects/_objects.js   | 57 +++++++++++--------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.js b/src/core_plugins/kibana/public/management/sections/objects/_objects.js
index c7f02f0f5e8f6..20154796e48af 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/_objects.js
+++ b/src/core_plugins/kibana/public/management/sections/objects/_objects.js
@@ -169,30 +169,41 @@ uiModules.get('apps/management')
           notify.error('The file could not be processed.');
         }
 
-        return Promise.map(docs, (doc) => {
-          const { service } = find($scope.services, { type: doc._type }) || {};
-
-          if (!service) {
-            const msg = `Skipped import of "${doc._source.title}" (${doc._id})`;
-            const reason = `Invalid type: "${doc._type}"`;
-
-            notify.warning(`${msg}, ${reason}`, {
-              lifetime: 0,
-            });
-
-            return;
-          }
-
-          return service.get().then(function (obj) {
-            obj.id = doc._id;
-            return obj.applyESResp(doc).then(function () {
-              return obj.save({ confirmOverwrite : true });
-            });
-          });
+        return new Promise((resolve) => {
+          confirmModal(
+            `If any of the objects already exist, do you want to automatically overwrite them?`, {
+              confirmButtonText: `Yes, overwrite all`,
+              cancelButtonText: `No, prompt me for each one`,
+              onConfirm: () => resolve(true),
+              onCancel: () => resolve(false),
+            }
+          );
         })
-        .then(refreshIndex)
-        .then(refreshData)
-        .catch(notify.error);
+          .then((overwriteAll) => {
+            return Promise.map(docs, (doc) => {
+              const { service } = find($scope.services, { type: doc._type }) || {};
+
+              if (!service) {
+                const msg = `Skipped import of "${doc._source.title}" (${doc._id})`;
+                const reason = `Invalid type: "${doc._type}"`;
+
+                notify.warning(`${msg}, ${reason}`, {
+                  lifetime: 0,
+                });
+
+                return;
+              }
+
+              return service.get()
+                .then(function (obj) {
+                  obj.id = doc._id;
+                  return obj.applyESResp(doc).then(() => obj.save({ confirmOverwrite : !overwriteAll }));
+                });
+            })
+              .then(refreshIndex)
+              .then(refreshData)
+              .catch(notify.error);
+          });
       };
 
       function refreshIndex() {

From 08b9535e5f73ad789c00081532d9bde8e3dde969 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Fri, 3 Mar 2017 17:44:47 -0700
Subject: [PATCH 092/150] Fixing resizing for charts on dashboard (#10706)

---
 package.json                                  |  1 -
 .../visualizations/components/flot_chart.js   | 38 ++++++-----
 .../public/visualizations/components/gauge.js | 18 ++---
 .../visualizations/components/gauge_vis.js    | 18 ++---
 .../visualizations/components/metric.js       | 18 ++---
 .../visualizations/components/resize.js       | 66 +++++++++++++++++++
 .../visualizations/less/includes/metric.less  |  1 +
 7 files changed, 107 insertions(+), 53 deletions(-)
 create mode 100644 src/core_plugins/metrics/public/visualizations/components/resize.js

diff --git a/package.json b/package.json
index e41ca3213db2b..a0214b6394aba 100644
--- a/package.json
+++ b/package.json
@@ -183,7 +183,6 @@
     "rjs-repack-loader": "1.0.6",
     "script-loader": "0.6.1",
     "semver": "5.1.0",
-    "simianhacker-react-resize-aware": "1.0.11",
     "style-loader": "0.12.3",
     "tar": "2.2.0",
     "tinygradient": "0.3.0",
diff --git a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
index fd139a908ea59..48329f9024790 100644
--- a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
+++ b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
@@ -3,12 +3,17 @@ import { findDOMNode } from 'react-dom';
 import _ from 'lodash';
 import $ from '../lib/flot';
 import eventBus from '../lib/events';
-import ResizeAware from 'simianhacker-react-resize-aware';
+import Resize from './resize';
 import calculateBarWidth from '../lib/calculate_bar_width';
 import colors from '../lib/colors';
 
 class FlotChart extends Component {
 
+  constructor(props) {
+    super(props);
+    this.handleResize = this.handleResize.bind(this);
+  }
+
   shouldComponentUpdate(props, state) {
     if (!this.plot) return true;
     if (props.reversed !== this.props.reversed) {
@@ -42,7 +47,6 @@ class FlotChart extends Component {
       eventBus.off('thorPlotover', this.handleThorPlotover);
       eventBus.off('thorPlotleave', this.handleThorPlotleave);
     }
-    findDOMNode(this.resize).removeEventListener('resize', this.handleResize);
   }
 
   componentWillUnmount() {
@@ -148,6 +152,17 @@ class FlotChart extends Component {
     return _.assign(opts, this.props.options);
   }
 
+  handleResize() {
+    const resize = findDOMNode(this.resize);
+    if (resize && resize.clientHeight > 0 && resize.clientHeight > 0) {
+      if (!this.plot) return;
+      this.plot.resize();
+      this.plot.setupGrid();
+      this.plot.draw();
+      this.handleDraw(this.plot);
+    }
+  }
+
   renderChart() {
     const resize = findDOMNode(this.resize);
 
@@ -159,19 +174,7 @@ class FlotChart extends Component {
       this.plot = $.plot(this.target, data, this.getOptions());
       this.handleDraw(this.plot);
 
-      this.handleResize = (e) => {
-        const resize = findDOMNode(this.resize);
-        if (resize && resize.clientHeight > 0 && resize.clientHeight > 0) {
-          if (!this.plot) return;
-          this.plot.resize();
-          this.plot.setupGrid();
-          this.plot.draw();
-          this.handleDraw(this.plot);
-        }
-      };
-
       _.defer(() => this.handleResize());
-      findDOMNode(this.resize).addEventListener('resize', this.handleResize);
 
 
       this.handleMouseOver = (...args) => {
@@ -235,9 +238,12 @@ class FlotChart extends Component {
       flex: '1 0 auto',
     };
     return (
-      <ResizeAware ref={(el) => this.resize = el} style={style}>
+      <Resize
+        onResize={this.handleResize}
+        ref={(el) => this.resize = el}
+        style={style}>
         <div ref={(el) => this.target = el} style={style}/>
-      </ResizeAware>);
+      </Resize>);
   }
 
 }
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge.js b/src/core_plugins/metrics/public/visualizations/components/gauge.js
index eaf624aeec74b..d91017e5227dc 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge.js
@@ -4,7 +4,7 @@ import React, { Component, PropTypes } from 'react';
 import $ from '../lib/flot';
 import getLastValue from '../lib/get_last_value';
 import getValueBy from '../lib/get_value_by';
-import ResizeAware from 'simianhacker-react-resize-aware';
+import Resize from './resize';
 import GaugeVis from './gauge_vis';
 import { findDOMNode } from 'react-dom';
 import reactcss from 'reactcss';
@@ -63,18 +63,9 @@ class Gauge extends Component {
   }
 
   componentDidMount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.addEventListener('resize', this.handleResize);
     this.handleResize();
   }
 
-  componentWillUnmount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.removeEventListener('resize', this.handleResize);
-  }
-
   // When the component updates it might need to be resized so we need to
   // recalculate the corrdinates and only update if things changed a little. THis
   // happens when the number is too wide or you add a new series.
@@ -168,10 +159,13 @@ class Gauge extends Component {
     if (this.props.reversed) className = `reversed ${className}`;
     return (
       <div className={className}>
-        <ResizeAware className={`${className}__resize`} ref={(el) => this.resize = el}>
+        <Resize
+          onResize={this.handleResize}
+          className={`${className}__resize`}
+          ref={(el) => this.resize = el}>
           { metrics }
           <GaugeVis {...gaugeProps}/>
-        </ResizeAware>
+        </Resize>
       </div>
     );
   }
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
index 2ca2e8448a58a..3582537607f16 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import $ from '../lib/flot';
-import ResizeAware from 'simianhacker-react-resize-aware';
+import Resize from './resize';
 import _ from 'lodash';
 import { findDOMNode } from 'react-dom';
 import reactcss from 'reactcss';
@@ -56,18 +56,9 @@ class GaugeVis extends Component {
   }
 
   componentDidMount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.addEventListener('resize', this.handleResize);
     this.handleResize();
   }
 
-  componentWillUnmount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.removeEventListener('resize', this.handleResize);
-  }
-
   // When the component updates it might need to be resized so we need to
   // recalculate the corrdinates and only update if things changed a little. THis
   // happens when the number is too wide or you add a new series.
@@ -162,11 +153,14 @@ class GaugeVis extends Component {
       );
     }
     return (
-      <ResizeAware ref={(el) => this.resize = el} style={styles.resize}>
+      <Resize
+        onResize={this.handleResize}
+        ref={(el) => this.resize = el}
+        style={styles.resize}>
         <div style={styles.svg} ref={(el) => this.inner = el}>
           {svg}
         </div>
-      </ResizeAware>
+      </Resize>
     );
   }
 
diff --git a/src/core_plugins/metrics/public/visualizations/components/metric.js b/src/core_plugins/metrics/public/visualizations/components/metric.js
index 6dd62aef397c1..0e0a1db352145 100644
--- a/src/core_plugins/metrics/public/visualizations/components/metric.js
+++ b/src/core_plugins/metrics/public/visualizations/components/metric.js
@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import _ from 'lodash';
 import { findDOMNode } from 'react-dom';
-import ResizeAware from 'simianhacker-react-resize-aware';
 import getLastValue from '../lib/get_last_value';
+import Resize from './resize';
 import reactcss from 'reactcss';
 
 class Metric extends Component {
@@ -20,18 +20,9 @@ class Metric extends Component {
   }
 
   componentDidMount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.addEventListener('resize', this.handleResize);
     this.handleResize();
   }
 
-  componentWillUnmount() {
-    const resize = findDOMNode(this.resize);
-    if (!resize) return;
-    resize.removeEventListener('resize', this.handleResize);
-  }
-
   calculateCorrdinates() {
     const inner = findDOMNode(this.inner);
     const resize = findDOMNode(this.resize);
@@ -161,7 +152,10 @@ class Metric extends Component {
 
     return (
       <div className="rhythm_metric" style={styles.container}>
-        <ResizeAware ref={(el) => this.resize = el} className="rhythm_metric__resize">
+        <Resize
+          onResize={this.handleResize}
+          ref={(el) => this.resize = el}
+          className="rhythm_metric__resize">
           <div ref={(el) => this.inner = el} className="rhythm_metric__inner" style={styles.inner}>
             <div className="rhythm_metric__primary">
               { primaryLabel }
@@ -169,7 +163,7 @@ class Metric extends Component {
             </div>
             { secondarySnippet }
           </div>
-        </ResizeAware>
+        </Resize>
       </div>
     );
   }
diff --git a/src/core_plugins/metrics/public/visualizations/components/resize.js b/src/core_plugins/metrics/public/visualizations/components/resize.js
new file mode 100644
index 0000000000000..e43c59a82a8e9
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/components/resize.js
@@ -0,0 +1,66 @@
+import React, { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
+class Resize extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.handleResize = this.handleResize.bind(this);
+  }
+
+  checkSize() {
+    const el = findDOMNode(this.el);
+    this.timeout = setTimeout(() => {
+      const { currentHeight, currentWidth } = this.state;
+      if (currentHeight !== el.clientHeight || currentWidth !== el.clientWidth) {
+        this.setState({
+          currentWidth: el.parentNode.clientWidth,
+          currentHeight: el.parentNode.clientHeight
+        });
+        this.handleResize();
+      }
+      this.checkSize();
+    }, this.props.frequency);
+  }
+
+  componentDidMount() {
+    const el = findDOMNode(this.el);
+    const currentWidth = el.parentNode.clientWidth;
+    const currentHeight = el.parentNode.clientHeight;
+    this.setState({ currentHeight, currentWidth });
+    this.checkSize();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  handleResize() {
+    if (this.props.onResize) this.props.onResize();
+  }
+
+  render() {
+    const style = this.props.style || {};
+    const className = this.props.className || '';
+    return(
+      <div
+        style={style}
+        className={className}
+        ref={(el) => this.el = el} >
+        {this.props.children}
+      </div>
+    );
+  }
+
+}
+
+Resize.defaultProps = {
+  frequency: 500
+};
+
+Resize.propTypes = {
+  frequency: PropTypes.number,
+  onResize: PropTypes.func
+};
+
+export default Resize;
diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/metric.less b/src/core_plugins/metrics/public/visualizations/less/includes/metric.less
index 7fce968416bdd..74aac2c8a73e9 100644
--- a/src/core_plugins/metrics/public/visualizations/less/includes/metric.less
+++ b/src/core_plugins/metrics/public/visualizations/less/includes/metric.less
@@ -1,4 +1,5 @@
 .rhythm_metric {
+  font-size: 100%;
   position: relative;
   display: flex;
   flex-direction: column;

From 46c9605e186035f4daa2489fd346cd2823424cd4 Mon Sep 17 00:00:00 2001
From: Joe Fleming <w33ble@users.noreply.github.com>
Date: Fri, 3 Mar 2017 17:45:22 -0700
Subject: [PATCH 093/150] Handle importing invalid types (#10666)

* show service errors but resolve promise

By handling service failures explicitely, the error doesn't bubble up the promise chain, so tasks
that have to happen after it, like refreshing the index and data, still happen, and the UI will
be in sync with the data in the .kibana index

* throw error on invalid saved object type

* append useful info to the type error message
---
 .../management/sections/objects/_objects.js   | 20 +++++++++++++------
 src/ui/public/vis/vis.js                      | 11 ++++++++--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.js b/src/core_plugins/kibana/public/management/sections/objects/_objects.js
index 20154796e48af..1b56cfffcd7ac 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/_objects.js
+++ b/src/core_plugins/kibana/public/management/sections/objects/_objects.js
@@ -197,12 +197,20 @@ uiModules.get('apps/management')
               return service.get()
                 .then(function (obj) {
                   obj.id = doc._id;
-                  return obj.applyESResp(doc).then(() => obj.save({ confirmOverwrite : !overwriteAll }));
-                });
-            })
-              .then(refreshIndex)
-              .then(refreshData)
-              .catch(notify.error);
+                  return obj.applyESResp(doc)
+                    .then(() => {
+                      return obj.save({ confirmOverwrite : !overwriteAll });
+                    })
+                    .catch((err) => {
+                      // swallow errors here so that the remaining promise chain executes
+                      err.message = `Importing ${obj.title} (${obj.id}) failed: ${err.message}`;
+                      notify.error(err);
+                    });
+                })
+                .then(refreshIndex)
+                .then(refreshData)
+                .catch(notify.error);
+            });
           });
       };
 
diff --git a/src/ui/public/vis/vis.js b/src/ui/public/vis/vis.js
index 4948775cda389..ff941f4686b3f 100644
--- a/src/ui/public/vis/vis.js
+++ b/src/ui/public/vis/vis.js
@@ -83,8 +83,15 @@ export default function VisFactory(Notifier, Private) {
 
   Vis.prototype.setState = function (state) {
     this.title = state.title || '';
-    this.type = state.type || this.type;
-    if (_.isString(this.type)) this.type = visTypes.byName[this.type];
+    const type = state.type || this.type;
+    if (_.isString(type)) {
+      this.type = visTypes.byName[type];
+      if (!this.type) {
+        throw new Error(`Invalid type "${type}"`);
+      }
+    } else {
+      this.type = type;
+    }
 
     this.listeners = _.assign({}, state.listeners, this.type.listeners);
     this.params = _.defaults({},

From 053ebfa26c58e350db4145bb5c8cb65e1c9cb452 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Fri, 3 Mar 2017 17:47:15 -0700
Subject: [PATCH 094/150] Fixing the title removal for gauges, metric, and
 markdown for Time Series Visual Builder (#10707)

* Fixing the title removal for gauges, metric, and markdown

* Adding comment about the $timeout
---
 .../public/directives/visualization.js        | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/core_plugins/metrics/public/directives/visualization.js b/src/core_plugins/metrics/public/directives/visualization.js
index 866b6ad67a488..668d49b6a35af 100644
--- a/src/core_plugins/metrics/public/directives/visualization.js
+++ b/src/core_plugins/metrics/public/directives/visualization.js
@@ -7,7 +7,7 @@ import addScope from '../lib/add_scope';
 import modules from 'ui/modules';
 import createBrushHandler from '../lib/create_brush_handler';
 const app = modules.get('apps/metrics/directives');
-app.directive('metricsVisualization', (timefilter) => {
+app.directive('metricsVisualization', (timefilter, $timeout) => {
   return {
     restrict: 'E',
     link: ($scope, $el, $attrs) => {
@@ -19,22 +19,26 @@ app.directive('metricsVisualization', (timefilter) => {
 
       // For Metrics, Gauges and markdown visualizations we want to hide the
       // panel title because it just doens't make sense to show it.
-      const panel = $($el[0]).parents('.panel');
-      if (panel.length) {
-        const panelHeading = panel.find('.panel-heading');
-        const panelTitle = panel.find('.panel-title');
-        const matchingTypes = ['metric', 'gauge', 'markdown'];
-        if (panelHeading.length && panelTitle.length && _.contains(matchingTypes, $scope.model.type)) {
-          panel.css({ position: 'relative' });
-          panelHeading.css({
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            zIndex: 100
-          });
-          panelTitle.css({ display: 'none' });
+      // This is wrapped in a timeout so it happens after the directive is mouted.
+      // otherwise the .panel might not be available.
+      $timeout(() => {
+        const panel = $($el[0]).parents('.panel');
+        if (panel.length) {
+          const panelHeading = panel.find('.panel-heading');
+          const panelTitle = panel.find('.panel-title');
+          const matchingTypes = ['metric', 'gauge', 'markdown'];
+          if (panelHeading.length && panelTitle.length && _.contains(matchingTypes, $scope.model.type)) {
+            panel.css({ position: 'relative' });
+            panelHeading.css({
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              zIndex: 100
+            });
+            panelTitle.css({ display: 'none' });
+          }
         }
-      }
+      }, 1);
     }
   };
 });

From 06049c257127d3af7f1c08740dbf1eb26a17e04d Mon Sep 17 00:00:00 2001
From: maxvanzoest <maxvanzoest@me.com>
Date: Sun, 5 Mar 2017 18:10:32 +0100
Subject: [PATCH 095/150] propose language changes (#10709)

---
 FAQ.md | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/FAQ.md b/FAQ.md
index c4710cab39d80..26c6df401d150 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -1,24 +1,23 @@
 # Frequently asked questions
 
-**Q:** I'm getting `bin/node/bin/node: not found` but I can see the node binary in the package?      
-**A:** Kibana 4 packages are architecture specific. Ensure you are using the correct package for your architecture. 
+**Q:** I'm getting `bin/node/bin/node: not found` but I can see the node binary in the package?
+**A:** Kibana 4 packages are architecture specific. Ensure you are using the correct package for your architecture.
 
-**Q:** Where do I go for support?  
-**A:** Please join us at [discuss.elastic.co](https://discuss.elastic.co) with questions. Your problem might be a bug, but it might just be a misunderstanding, or feature we could improve. We're also available on Freenode in #kibana
+**Q:** Where do I go for support?
+**A:** Please join us at [discuss.elastic.co](https://discuss.elastic.co) with questions. Your problem might be a bug, but it might just be a misunderstanding, or a feature we could improve. We're also available on Freenode in #kibana
 
-**Q:** Ok, we talked about it and its definitely a bug  
+**Q:** Ok, we talked about it and its definitely a bug
 **A:** Doh, ok, let's get that fixed. File an issue on [github.com/elastic/kibana](https://github.com/elastic/kibana). I'd recommend reading the beginning of the CONTRIBUTING.md, just so you know how we'll handle the issue.
 
 ### Kibana 3 Migration
-**Q:** Where is feature X that I loved from Kibana 3?  
+**Q:** Where is feature X that I loved from Kibana 3?
 **A:** It might be coming! We’ve published our immediate roadmap as tickets. Check out the beta milestones on GitHub to see if the feature you’re missing is coming soon.
 
-**Q:** Is the dashboard schema compatible?  
-**A:** Unfortunately, they are not compatible. In order to create the new features we wanted, it simply was not possible to keep the same schema. Aggregations work fundamentally different from facets, the new dashboard isn’t tied to rows and columns and the relationships between searches, visualizations and the dashboard are complex enough that we simply had to design something more flexible.
+**Q:** Is the dashboard schema compatible?
+**A:** Unfortunately, it is not compatible. In order to create the new features we wanted, it simply was not possible to keep the same schema. Aggregations work fundamentally different from facets, the new dashboard isn’t tied to rows and columns, and the relationships between searches, visualizations and the dashboard are complex enough that we simply had to design something more flexible.
 
-**Q:** How do I do multi-query?  
+**Q:** How do I execute a multi-query?
 **A:** The ‘filters’ aggregations will allow you to input multiple queries and compare them visually. You can even use Elasticsearch JSON in there!
 
-**Q:** What happened to templated/scripted dashboards?  
+**Q:** What happened to templated/scripted dashboards?
 **A:** Check out the URL. The state of each app is stored there, including any filters, queries or columns. This should be a lot easier than constructing scripted dashboards. The encoding of the URL is RISON.
-

From 36aadda072995300e7aa57ac7b33e56961561bb7 Mon Sep 17 00:00:00 2001
From: MathijsHoogland <MathijsHoogland@users.noreply.github.com>
Date: Wed, 8 Mar 2017 02:25:07 +0100
Subject: [PATCH 096/150] Updated broken url in CONTRIBUTING.md (#10715)

* Updated broken url in CONTRIBUTING.md

* Switched url to the master documentation.

* Changes from future release documentation to current release docs.
---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d8a46eaad8247..b0ef2231b4b59 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -146,7 +146,7 @@ Now you can point your web browser to https://localhost:5601 and start using Kib
 
 #### Customizing `config/kibana.dev.yml`
 
-The `config/kibana.yml` file stores user configuration directives. Since this file is checked into source control, however, developer preferences can't be saved without the risk of accidentally committing the modified version. To make customizing configuration easier during development, the Kibana CLI will look for a `config/kibana.dev.yml` file if run with the `--dev` flag. This file behaves just like the non-dev version and accepts any of the [standard settings](https://www.elastic.co/guide/en/kibana/master/kibana-server-properties.html).
+The `config/kibana.yml` file stores user configuration directives. Since this file is checked into source control, however, developer preferences can't be saved without the risk of accidentally committing the modified version. To make customizing configuration easier during development, the Kibana CLI will look for a `config/kibana.dev.yml` file if run with the `--dev` flag. This file behaves just like the non-dev version and accepts any of the [standard settings](https://www.elastic.co/guide/en/kibana/current/settings.html).
 
 #### Potential Optimization Pitfalls
 

From 26ec66bf05a1c2f0a3081f2b930605e9a631cca7 Mon Sep 17 00:00:00 2001
From: maxvanzoest <maxvanzoest@me.com>
Date: Wed, 8 Mar 2017 02:26:27 +0100
Subject: [PATCH 097/150] typo in constraits (#10714)

---
 src/server/kbn_server.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server/kbn_server.js b/src/server/kbn_server.js
index 78e2d6b46acb3..e8e737d5d16a9 100644
--- a/src/server/kbn_server.js
+++ b/src/server/kbn_server.js
@@ -75,7 +75,7 @@ module.exports = class KbnServer {
   }
 
   /**
-   * Extend the KbnServer outside of the constraits of a plugin. This allows access
+   * Extend the KbnServer outside of the constraints of a plugin. This allows access
    * to APIs that are not exposed (intentionally) to the plugins and should only
    * be used when the code will be kept up to date with Kibana.
    *

From 30bbf3a7dee4f1ca546cffbea38f605596e6c570 Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Wed, 8 Mar 2017 17:12:13 -0800
Subject: [PATCH 098/150] Allow queuing up of confirm modals. (#10723)

---
 src/ui/public/modals/confirm_modal.js | 33 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/ui/public/modals/confirm_modal.js b/src/ui/public/modals/confirm_modal.js
index b1529f242802a..64a5dd7b0cecf 100644
--- a/src/ui/public/modals/confirm_modal.js
+++ b/src/ui/public/modals/confirm_modal.js
@@ -21,6 +21,7 @@ const module = uiModules.get('kibana');
 
 module.factory('confirmModal', function ($rootScope, $compile) {
   let modalPopover;
+  const confirmQueue = [];
 
   /**
    * @param {String} message - the message to show in the body of the confirmation dialog.
@@ -47,11 +48,6 @@ module.factory('confirmModal', function ($rootScope, $compile) {
     // onCancel callback.
     options.onClose = customOptions.onClose || options.onCancel;
 
-    if (modalPopover) {
-      throw new Error('You\'ve called confirmModal but there\'s already a modal open. ' +
-        'You can only have one modal open at a time.');
-    }
-
     const confirmScope = $rootScope.$new();
 
     confirmScope.message = message;
@@ -72,22 +68,33 @@ module.factory('confirmModal', function ($rootScope, $compile) {
       options.onClose();
     };
 
-    const modalInstance = $compile(template)(confirmScope);
-    modalPopover = new ModalOverlay(modalInstance);
+    function showModal(confirmScope) {
+      const modalInstance = $compile(template)(confirmScope);
+      modalPopover = new ModalOverlay(modalInstance);
+      angular.element(document.body).on('keydown', (event) => {
+        if (event.keyCode === 27) {
+          confirmScope.onCancel();
+        }
+      });
 
-    angular.element(document.body).on('keydown', (event) => {
-      if(event.keyCode === 27) {
-        confirmScope.onCancel();
-      }
-    });
+      modalInstance.find('[data-test-subj=confirmModalConfirmButton]').focus();
+    }
 
-    modalInstance.find('[data-test-subj=confirmModalConfirmButton]').focus();
+    if (modalPopover) {
+      confirmQueue.unshift(confirmScope);
+    } else {
+      showModal(confirmScope);
+    }
 
     function destroy() {
       modalPopover.destroy();
       modalPopover = undefined;
       angular.element(document.body).off('keydown');
       confirmScope.$destroy();
+
+      if (confirmQueue.length > 0) {
+        showModal(confirmQueue.pop());
+      }
     }
   };
 });

From 502843a34b849913cb3b067d02eb01c40efae043 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Thu, 9 Mar 2017 09:19:30 -0800
Subject: [PATCH 099/150] Exposes the stageEditableVis to fullEditor editors
 Fixes #10718 (#10720)

---
 .../kibana/public/visualize/editor/editor.html            | 1 +
 .../kibana/public/visualize/editor/vis_options.js         | 3 ++-
 .../metrics/public/kbn_vis_types/editor_controller.js     | 8 +-------
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index adae245228abb..aac81fe87c81a 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -76,6 +76,7 @@
                             saved-vis="savedVis"
                             editor="vis.type.params.editor"
                             ui-state="uiState"
+                            stage-editable-vis="stageEditableVis"
                             class="vis-editor-full-options"></vis-editor-vis-options>
 
     <div class="collapsible-sidebar" ng-if="!vis.type.fullEditor && chrome.getVisible()" >
diff --git a/src/core_plugins/kibana/public/visualize/editor/vis_options.js b/src/core_plugins/kibana/public/visualize/editor/vis_options.js
index ae94d781a2d68..25240d90400d5 100644
--- a/src/core_plugins/kibana/public/visualize/editor/vis_options.js
+++ b/src/core_plugins/kibana/public/visualize/editor/vis_options.js
@@ -13,7 +13,8 @@ uiModules
       vis: '=',
       savedVis: '=',
       uiState: '=',
-      editor: '='
+      editor: '=',
+      stageEditableVis: '='
     },
     link: function ($scope, $el) {
       const $optionContainer = $el.find('.visualization-options');
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js b/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
index 61dbbb40d9bc3..8a0df97fe3598 100644
--- a/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
+++ b/src/core_plugins/metrics/public/kbn_vis_types/editor_controller.js
@@ -53,13 +53,7 @@ app.controller('MetricsEditorController', (
 
   $scope.$watchCollection('model', (newValue, oldValue) => {
     angular.copy(newValue, $scope.vis._editableVis.params);
-    // When the content of the model changes we need to stage the changes to
-    // the Editable visualization. Normally this is done through clicking the
-    // play which triggers `stageEditableVis` in kibana/public/visualize/editor/editor.js
-    // but because we are auto running everything that doesn't work with our worflow
-    // plus it's covered up by the Thor editor UI.
-    const visAppScope = angular.element($('visualize-app')).scope();
-    visAppScope.stageEditableVis();
+    $scope.stageEditableVis();
     debouncedFetch();
 
     const patternsToFetch = [];

From d1b505676c2c650e16446ae2180d73e8a88820fc Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Sat, 11 Mar 2017 15:33:41 -0800
Subject: [PATCH 100/150] fixing console documentation (#10751)

---
 docs/console.asciidoc | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/docs/console.asciidoc b/docs/console.asciidoc
index 895a632b45d06..cddfc4cfb3aa3 100644
--- a/docs/console.asciidoc
+++ b/docs/console.asciidoc
@@ -59,12 +59,6 @@ When the response come back, you should see it in the left hand panel:
 .The Output Pane
 image::images/introduction_output.png[Screenshot]
 
-Console allows you to easily switch between Elasticsearch instances. By default it will connect to `localhost:9200`
-but you can easily change this by entering a different url in the Server input:
-
-.The Server Input
-image::images/introduction_server.png["Server",width=400,align="center"]
-
 [float]
 [[console-ui]]
 == The Console UI

From a1252f11d8fa092cb94e28b06571916123b34ff4 Mon Sep 17 00:00:00 2001
From: yershalom <yershalom@gmail.com>
Date: Sun, 12 Mar 2017 19:08:45 +0200
Subject: [PATCH 101/150] Update known-plugins.asciidoc (#10738)

Added the Funnel Visualization plugin
---
 docs/plugins/known-plugins.asciidoc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/plugins/known-plugins.asciidoc b/docs/plugins/known-plugins.asciidoc
index 46fc060a66d57..23c063bd3d5d7 100644
--- a/docs/plugins/known-plugins.asciidoc
+++ b/docs/plugins/known-plugins.asciidoc
@@ -39,6 +39,7 @@ This list of plugins is not guaranteed to work on your version of Kibana. Instea
 * https://github.com/DeanF/health_metric_vis[Colored Metric Visualization] (deanf)
 * https://github.com/elo7/cohort[Cohort analysis] (elo7)
 * https://github.com/amannocci/kibana-plugin-metric-percent[Percent] (amannocci)
+* https://github.com/outbrain/ob-kb-funnel[Funnel Visualization] (roybass)
 
 [float]
 === Other

From 1b7af072d7a6428e8ba276c4983e1d3155313855 Mon Sep 17 00:00:00 2001
From: MathijsHoogland <MathijsHoogland@users.noreply.github.com>
Date: Sun, 12 Mar 2017 19:58:36 +0100
Subject: [PATCH 102/150] Syntax fixes test code (#10747)

* Removed a comma that should not be there.

* Should use double quotes if an expression is in a string.
---
 .../install/__tests__/replies/package.no_version.json           | 2 +-
 test/scripts/_jenkins_setup.sh                                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/cli_plugin/install/__tests__/replies/package.no_version.json b/src/cli_plugin/install/__tests__/replies/package.no_version.json
index 874c3e5a04601..9c4f574d89460 100644
--- a/src/cli_plugin/install/__tests__/replies/package.no_version.json
+++ b/src/cli_plugin/install/__tests__/replies/package.no_version.json
@@ -1,3 +1,3 @@
 {
-  "name": "test-plugin",
+  "name": "test-plugin"
 }
diff --git a/test/scripts/_jenkins_setup.sh b/test/scripts/_jenkins_setup.sh
index 850bfd91c364d..60c3523374224 100755
--- a/test/scripts/_jenkins_setup.sh
+++ b/test/scripts/_jenkins_setup.sh
@@ -8,7 +8,7 @@ set -e
 if [ -n "$WORKSPACE" ]; then
   cd "$WORKSPACE"
 else
-  echo 'Unable to find the $WORKSPACE environment variable, is this jenkins?'
+  echo "Unable to find the $WORKSPACE environment variable, is this jenkins?"
   exit 1
 fi
 

From af6bb1c29d122130e9b6783e328a97488b159964 Mon Sep 17 00:00:00 2001
From: Joost Rothweiler <joostrothweiler@gmail.com>
Date: Tue, 14 Mar 2017 02:44:16 +0100
Subject: [PATCH 103/150] Remove some lodash usage (#10746)

* Remove some lodash usage

Remove lodash usage including reduce, map, and filter

* Add 0 as second parameter

Add a 0 as a parameter to the reduce method to fix tests
---
 src/core_plugins/console/public/src/autocomplete.js         | 4 +---
 .../public/controls/point_series/value_axes.js              | 6 +++---
 .../kibana/public/management/sections/indices/_edit.js      | 2 +-
 src/core_plugins/timelion/server/fit_functions/average.js   | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/core_plugins/console/public/src/autocomplete.js b/src/core_plugins/console/public/src/autocomplete.js
index 71f28bf2a425b..474f6ae37a10e 100644
--- a/src/core_plugins/console/public/src/autocomplete.js
+++ b/src/core_plugins/console/public/src/autocomplete.js
@@ -508,9 +508,7 @@ module.exports = function (editor) {
   }
 
   function addMethodAutoCompleteSetToContext(context, pos) {
-    context.autoCompleteSet = _.map(["GET", "PUT", "POST", "DELETE", "HEAD"], function (m, i) {
-      return { name: m, score: -i, meta: "method" }
-    })
+    context.autoCompleteSet = ["GET", "PUT", "POST", "DELETE", "HEAD"].map((m, i) => {name: m; score: -i; meta: 'method'});
   }
 
   function addPathAutoCompleteSetToContext(context, pos) {
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js
index 2452294118545..f21f2dea9a3c1 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js
@@ -48,9 +48,9 @@ module.directive('vislibValueAxes', function () {
 
       $scope.getSeries = function (axis) {
         const isFirst = $scope.vis.params.valueAxes[0] === axis;
-        const series = _.filter($scope.vis.params.seriesParams, series => {
-          return series.valueAxis === axis.id || (isFirst && !series.valueAxis);
-        });
+        const series = $scope.vis.params.seriesParams.filter(series =>
+          (series.valueAxis === axis.id || (isFirst && !series.valueAxis))
+        );
         return series.map(series => series.data.label).join(', ');
       };
 
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_edit.js b/src/core_plugins/kibana/public/management/sections/indices/_edit.js
index 081229365e1bf..3ef111586bf34 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_edit.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/_edit.js
@@ -67,7 +67,7 @@ uiModules.get('apps/management')
   });
 
   $scope.$watchCollection('indexPattern.fields', function () {
-    $scope.conflictFields = _.filter($scope.indexPattern.fields, { type: 'conflict' });
+    $scope.indexPattern.fields.filter(type => { type: 'conflict'; });
   });
 
   $scope.refreshFields = function () {
diff --git a/src/core_plugins/timelion/server/fit_functions/average.js b/src/core_plugins/timelion/server/fit_functions/average.js
index 3cbd0e1d12249..78ad617feb30b 100644
--- a/src/core_plugins/timelion/server/fit_functions/average.js
+++ b/src/core_plugins/timelion/server/fit_functions/average.js
@@ -27,7 +27,7 @@ module.exports = function (dataTuples, targetTuples) {
 
     dataTuplesQueue.splice(0, i);
 
-    const sum = _.reduce(avgSet, function (sum, num) { return sum + num; }, 0);
+    const sum = avgSet.reduce((sum, num) => sum + num, 0);
 
     return avgSet.length ? (sum / avgSet.length) : NaN;
   });

From 990251378847f75b786324aca288aa8c4a8b4714 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 15 Mar 2017 14:37:34 -0700
Subject: [PATCH 104/150] Fix background-color hover bug with Basic Button in
 ToolBar. (#10772)

---
 ui_framework/components/button/_button.scss | 2 +-
 ui_framework/dist/ui_framework.css          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui_framework/components/button/_button.scss b/ui_framework/components/button/_button.scss
index 7babdfcbdd610..95f3b2734e9a6 100644
--- a/ui_framework/components/button/_button.scss
+++ b/ui_framework/components/button/_button.scss
@@ -58,7 +58,7 @@
   &:hover, /* 2 */
   &:active { /* 2 */
     color: #ffffff !important; /* 1 */
-    background-color: #9B9B9B;
+    background-color: #9B9B9B !important;
   }
 
   &:disabled {
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index daf551d448e54..1c72381da7dbd 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -159,7 +159,7 @@ body {
     /* 2 */
     color: #ffffff !important;
     /* 1 */
-    background-color: #9B9B9B; }
+    background-color: #9B9B9B !important; }
   .kuiButton--basic:disabled {
     color: #9B9B9B; }
 

From 23b2c73a87da3ccaad947bb87b03798fb5cb63bd Mon Sep 17 00:00:00 2001
From: Tim Sullivan <tsullivan@users.noreply.github.com>
Date: Thu, 16 Mar 2017 10:28:50 -0700
Subject: [PATCH 105/150] [Management] Apply kuiPanelHeaderSections to product
 panels (#10622)

* [Management] Apply kuiPanelHeaderSections to product panels

* switch to dark gray on light gray icons per design

* changes per review feedback
---
 .../kibana/public/management/landing.html     | 35 +++++++----
 .../kibana/public/management/styles/main.less | 60 +++++++++++++------
 src/ui/public/icons/beats-gray.svg            | 20 +++++++
 src/ui/public/icons/elasticsearch-gray.svg    | 24 ++++++++
 src/ui/public/icons/kibana-gray.svg           | 20 +++++++
 src/ui/public/icons/logstash-gray.svg         | 20 +++++++
 src/ui/public/styles/base.less                | 50 ----------------
 7 files changed, 148 insertions(+), 81 deletions(-)
 create mode 100644 src/ui/public/icons/beats-gray.svg
 create mode 100644 src/ui/public/icons/elasticsearch-gray.svg
 create mode 100644 src/ui/public/icons/kibana-gray.svg
 create mode 100644 src/ui/public/icons/logstash-gray.svg

diff --git a/src/core_plugins/kibana/public/management/landing.html b/src/core_plugins/kibana/public/management/landing.html
index 036baba5dbcc1..d32364f6d5ec9 100644
--- a/src/core_plugins/kibana/public/management/landing.html
+++ b/src/core_plugins/kibana/public/management/landing.html
@@ -12,27 +12,37 @@
       ng-class="{ 'management-section-info-expanded': section.showInfo }"
       class="page-row"
     >
-      <div class="panel panel-product management-panel-product">
-        <div class="panel-heading panel-heading-{{::section.id}}">
-          {{::section.display}}
+      <div class="kuiPanel kuiPanel--withHeader management-panel">
+        <div class="kuiPanelHeader">
+          <div class="kuiPanelHeaderSection">
+            <div
+              class="management-panel__heading-icon management-panel__heading-icon--{{::section.id}}"
+            ></div>
+            <div class="kuiPanelHeader__title">
+              {{::section.display}}
+            </div>
+          </div>
 
-          <i
-            class="fa fa-info-circle pull-right panel-heading-icon"
-            ng-click="section.showInfo = !!!section.showInfo"
-            ng-if="section.info">
-          </i>
+          <div class="kuiPanelHeaderSection" ng-if="section.info">
+            <div class="kuiText">
+              <span
+                class="fa fa-info-circle management-panel__heading-icon--secondary"
+                ng-click="section.showInfo = !!!section.showInfo"
+              ></span>
+            </div>
+          </div>
         </div>
 
-        <div class="panel-body">
+        <div class="kuiPanelBody management-panel__body">
           <div class="row">
-            <ul class="management-section-items list-unstyled">
+            <ul class="list-unstyled">
               <li
                 class="col-xs-4 col-md-3"
                 ng-repeat="item in section.items.inOrder"
               >
                 <a
-                  class="management-link"
-                  ng-class="{ 'is-management-link-disabled': !item.url }"
+                  class="management-panel__link"
+                  ng-class="{ 'management-panel__link--disabled': !item.url }"
                   kbn-href="{{::item.url}}"
                   tooltip="{{::item.tooltip}}"
                   tooltip-placement="bottom"
@@ -44,6 +54,7 @@
               </li>
             </ul>
           </div>
+
           <div class="management-section-info">
             {{::section.info}}
           </div>
diff --git a/src/core_plugins/kibana/public/management/styles/main.less b/src/core_plugins/kibana/public/management/styles/main.less
index 217630c227774..fddb9ab5addc8 100644
--- a/src/core_plugins/kibana/public/management/styles/main.less
+++ b/src/core_plugins/kibana/public/management/styles/main.less
@@ -32,23 +32,20 @@ kbn-management-app {
 }
 
 kbn-management-landing {
-  .management-panel-product {
+  .management-panel {
     margin-bottom: 10px;
 
-    .panel-body {
-      padding-bottom: 30px;
-      position: relative;
-      border-left: 1px solid #E4E4E3;
-      border-right: 1px solid #E4E4E3;
-      border-bottom: 1px solid #E4E4E3;
-    }
   }
 
-  .management-link {
+  .management-panel__body {
+    padding-bottom: 30px;
+  }
+
+  .management-panel__link {
     font-size: 17px;
     line-height: 32px;
 
-    &.is-management-link-disabled {
+    &.management-panel__link--disabled {
       opacity: 0.5;
       cursor: default;
 
@@ -58,11 +55,6 @@ kbn-management-landing {
     }
   }
 
-  .panel-heading-icon {
-    font-size: 0.9em;
-    padding: 5px;
-  }
-
   .management-section-info {
     bottom: 10px;
     display: none;
@@ -72,14 +64,44 @@ kbn-management-landing {
   }
 
   .management-section-info-expanded {
-    .panel-heading-icon {
-      color: @black;
-    }
-
     .management-section-info {
       display: block;
     }
   }
+
+  /**
+   * 1. Set icon size.
+   * 2. Hack the panel title to move to the left a bit.
+   */
+  .management-panel__heading-icon {
+    width: 20px; /* 1 */
+    height: 20px; /* 1 */
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain; /* 1 */
+    margin-right: -3px; /* 2 */
+  }
+
+  .management-panel__heading-icon--elasticsearch {
+    background-image: url("~ui/icons/elasticsearch-gray.svg");
+  }
+
+  .management-panel__heading-icon--kibana {
+    background-image: url("~ui/icons/kibana-gray.svg");
+  }
+
+  .management-panel__heading-icon--beats {
+    background-image: url("~ui/icons/beats-gray.svg");
+  }
+
+  .management-panel__heading-icon--logstash {
+    background-image: url("~ui/icons/logstash-gray.svg");
+  }
+
+  .management-panel__heading-icon--secondary {
+    font-size: 0.9em;
+    padding: 5px;
+  }
 }
 
 kbn-management-objects {
diff --git a/src/ui/public/icons/beats-gray.svg b/src/ui/public/icons/beats-gray.svg
new file mode 100644
index 0000000000000..7e1b07db4baf3
--- /dev/null
+++ b/src/ui/public/icons/beats-gray.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="24px" viewBox="0 0 19 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-beats</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="UI-KIT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="QuickSummary" transform="translate(-247.000000, -3553.000000)" fill="#5A5A5A">
+            <g id="Basic-Panel" transform="translate(150.000000, 3540.000000)">
+                <g id="Header-bar">
+                    <g id="icon-beats" transform="translate(97.000000, 13.000000)">
+                        <path d="M11.3627647,8.86083529 C11.4044118,8.86083529 11.445,8.86295294 11.4859412,8.86577647 C11.6842941,8.86824706 11.8992353,8.87918824 12.1053529,8.89789412 L12.2617059,8.91307059 C12.3044118,8.91801176 12.3481765,8.92471765 12.3912353,8.93212941 C12.5952353,8.95895294 12.7819412,8.98436471 12.9644118,9.02107059 L13.0537059,9.04083529 C13.1115882,9.05354118 13.143,9.06165882 13.1744118,9.07048235 C13.3448824,9.10930588 13.5284118,9.15483529 13.7084118,9.20918824 L13.8414706,9.24907059 L13.9018235,9.27201176 C14.0892353,9.33236471 14.2840588,9.40436471 14.4707647,9.48201176 L14.5844118,9.53107059 C14.8057059,9.62777647 15.0033529,9.72342353 15.1879412,9.82295294 C15.5560588,8.96848235 15.7646471,8.02965882 15.7646471,7.04001176 C15.7646471,3.15201176 12.6125294,-0.000105882353 8.72417647,-0.000105882353 L0.000176470588,-0.000105882353 L0.000176470588,8.86083529 L11.3627647,8.86083529 Z" id="Fill-1"></path>
+                        <path d="M15.5825294,11.3350588 C14.0881765,13.7170588 11.5258235,15.1390588 8.72488235,15.1394118 L0.000176470588,15.1394118 L0.000176470588,24 L11.3627647,24 C15.2511176,24 18.4028824,20.8482353 18.4028824,16.9598824 C18.4028824,14.6572941 17.2918235,12.6194118 15.5825294,11.3350588" id="Fill-4"></path>
+                        <path d="M8.72498824,14.0805176 C11.2456941,14.0801647 13.4508706,12.7506353 14.6939294,10.7593412 C14.5259294,10.6686353 14.3529882,10.5856941 14.1768706,10.5087529 C14.1391059,10.4921647 14.1009882,10.4752235 14.0628706,10.4593412 C13.8938118,10.3887529 13.7208706,10.3259294 13.5451059,10.2687529 C13.5267529,10.2627529 13.5098118,10.2549882 13.4914588,10.2489882 C13.4618118,10.2398118 13.4314588,10.2320471 13.4014588,10.2228706 C13.2458118,10.1755765 13.0862824,10.1364 12.9260471,10.1000471 C12.9013412,10.0944 12.8773412,10.0862824 12.8522824,10.0809882 C12.8201647,10.0739294 12.7887529,10.0658118 12.7562824,10.0591059 C12.5974588,10.0273412 12.4351059,10.0061647 12.2724,9.98498824 C12.2289882,9.97934118 12.1869882,9.97016471 12.1435765,9.96522353 C12.0987529,9.96028235 12.0539294,9.9564 12.0087529,9.95251765 C11.8255765,9.93557647 11.6402824,9.92675294 11.4532235,9.92428235 C11.4228706,9.92392941 11.3935765,9.91969412 11.3628706,9.91969412 L-7.05882353e-05,9.91969412 L-7.05882353e-05,14.0805176 L8.72498824,14.0805176 Z" id="Fill-6"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/ui/public/icons/elasticsearch-gray.svg b/src/ui/public/icons/elasticsearch-gray.svg
new file mode 100644
index 0000000000000..4a450c33389a7
--- /dev/null
+++ b/src/ui/public/icons/elasticsearch-gray.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="24px" viewBox="0 0 22 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-es</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="UI-KIT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="QuickSummary" transform="translate(-161.000000, -3553.000000)" fill="#5A5A5A">
+            <g id="Basic-Panel" transform="translate(150.000000, 3540.000000)">
+                <g id="Header-bar">
+                    <g id="icon-es" transform="translate(11.000000, 13.000000)">
+                        <path d="M0,12 C0,13.1705143 0.170742857,14.3005714 0.483085714,15.3699429 L10.5353143,15.3699429 C10.8078857,14.2916571 10.9536,13.1629714 10.9536,12 C10.9536,10.8370286 10.8078857,9.70834286 10.5353143,8.63005714 L0.483085714,8.63005714 C0.170742857,9.69977143 0,10.8294857 0,12" id="Fill-1"></path>
+                        <path d="M0,12 C0,13.1705143 0.170742857,14.3005714 0.483085714,15.3699429 L10.5353143,15.3699429 C10.8078857,14.2916571 10.9539429,13.1629714 10.9539429,12 C10.9539429,10.8370286 10.8078857,9.70834286 10.5353143,8.63005714 L0.483085714,8.63005714 C0.170742857,9.69977143 0,10.8294857 0,12" id="Fill-3"></path>
+                        <path d="M15.7793486,8.63016 L11.5892914,8.63016 C11.8436914,9.71324571 11.9825486,10.84056 11.9825486,12.0001029 C11.9825486,13.1596457 11.8436914,14.2866171 11.5892914,15.3700457 L15.7793486,15.3700457 C17.63832,15.3700457 19.1458629,13.8649029 19.1492914,12.0059314 L19.1492914,12.0059314 C19.1523771,10.1425029 17.6427771,8.63016 15.7793486,8.63016" id="Fill-5"></path>
+                        <path d="M1.21289143,17.2602857 C2.28226286,19.4487429 3.99997714,21.2597143 6.11300571,22.4528571 C7.75597714,21.0564 9.06637714,19.2814286 9.90672,17.2602857 L1.21289143,17.2602857 Z" id="Fill-7"></path>
+                        <path d="M17.4554057,17.2602857 L11.0086629,17.2602857 C10.1666057,19.4573143 8.81506286,21.4040571 7.09632,22.9524 C8.59357714,23.6240571 10.2526629,24.0001714 11.9998629,24.0001714 C15.9327771,24.0001714 19.4237486,22.1079429 21.6122057,19.1847429 C20.6103771,18.0084 19.1213486,17.2602857 17.4554057,17.2602857" id="Fill-9"></path>
+                        <path d="M1.21289143,6.73974857 L9.90672,6.73974857 C9.06637714,4.71860571 7.75597714,2.94363429 6.11300571,1.54717714 C3.99997714,2.74032 2.28226286,4.55129143 1.21289143,6.73974857" id="Fill-12"></path>
+                        <path d="M12,0 C10.2524571,0 8.59371429,0.376114286 7.09645714,1.04777143 C8.8152,2.59611429 10.1664,4.54251429 11.0088,6.73988571 L17.3907429,6.73988571 C19.0752,6.73988571 20.5806857,5.97634286 21.5828571,4.77805714 C19.3926857,1.87645714 15.9157714,0 12,0" id="Fill-14"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/ui/public/icons/kibana-gray.svg b/src/ui/public/icons/kibana-gray.svg
new file mode 100644
index 0000000000000..5c1c859bf0fd7
--- /dev/null
+++ b/src/ui/public/icons/kibana-gray.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="24px" viewBox="0 0 19 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-kibana</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="UI-KIT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="QuickSummary" transform="translate(-205.000000, -3553.000000)" fill="#5A5A5A">
+            <g id="Basic-Panel" transform="translate(150.000000, 3540.000000)">
+                <g id="Header-bar">
+                    <g id="icon-kibana" transform="translate(55.000000, 13.000000)">
+                        <path d="M0.346058824,8.98337647 C0.229941176,8.98337647 0.115588235,8.99008235 0.000176470588,8.9922 L0.000176470588,22.2469059 L9.15158824,11.2259647 C6.53558824,9.79796471 3.537,8.98337647 0.346058824,8.98337647" id="Fill-7"></path>
+                        <path d="M10.0774588,11.7682941 L-7.05882353e-05,23.9038235 L-7.05882353e-05,24.0001765 L18.4492235,24.0001765 C17.4846353,18.8440588 14.3720471,14.4478235 10.0774588,11.7682941" id="Fill-4"></path>
+                        <path d="M0.105494118,7.92988235 C0.185611765,7.92705882 0.265376471,7.92458824 0.3462,7.92458824 C3.59572941,7.92458824 6.81596471,8.74482353 9.65890588,10.2963529 L9.84102353,10.3955294 L18.4732588,0 L-3.52941177e-05,0 L-3.52941177e-05,7.93305882 L0.105494118,7.92988235 Z" id="Fill-1"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/ui/public/icons/logstash-gray.svg b/src/ui/public/icons/logstash-gray.svg
new file mode 100644
index 0000000000000..d09730f60f4c3
--- /dev/null
+++ b/src/ui/public/icons/logstash-gray.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="24px" viewBox="0 0 22 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-logstash</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="UI-KIT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="QuickSummary" transform="translate(-289.000000, -3553.000000)" fill="#5A5A5A">
+            <g id="Basic-Panel" transform="translate(150.000000, 3540.000000)">
+                <g id="Header-bar">
+                    <g id="icon-logstash" transform="translate(139.000000, 13.000000)">
+                        <polygon id="Fill-4" points="12.0351304 23.6521739 21.0114783 23.6521739 21.0114783 12.6601739 12.0351304 12.6601739"></polygon>
+                        <path d="M10.9916522,23.6522783 L10.9916522,23.6522783 C4.9213913,23.6522783 0,18.7312348 0,12.6602783 L10.9916522,12.6602783 L10.9916522,23.6522783 Z" id="Fill-6"></path>
+                        <path d="M10.9916522,11.6169391 L10.9916522,7.67015652 C10.9916522,3.43398261 7.55756522,-0.000104347826 3.3213913,-0.000104347826 L0,-0.000104347826 L0,11.6169391 L10.9916522,11.6169391 Z" id="Fill-1"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index c546d7a0cfc09..c237135545628 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -551,56 +551,6 @@ fieldset {
   }
 }
 
-.panel-product {
-  margin-bottom: 10px;
-
-  .panel-heading {
-    background-color: @kibanaBlue3;
-    border-radius: 0;
-    color: @white;
-    font-size: 17px;
-    padding: 7px 10px;
-  }
-
-  .panel-heading--clickable {
-    cursor: pointer;
-  }
-
-  .panel-heading-elasticsearch,
-  .panel-heading-kibana,
-  .panel-heading-beats,
-  .panel-heading-logstash {
-    background-position: 4px 7px;
-    background-repeat: no-repeat;
-    background-size: 26px 26px;
-    padding-left: 32px;
-  }
-
-  .panel-heading-elasticsearch {
-    background-color: @product-elasticsearch;
-    background-image: url("~ui/icons/elasticsearch.svg");
-  }
-
-  .panel-heading-kibana {
-    background-color: @product-kibana;
-    background-image: url("~ui/icons/kibana.svg");
-  }
-
-  .panel-heading-beats {
-    background-color: @product-beats;
-    background-image: url("~ui/icons/beats.svg");
-  }
-
-  .panel-heading-logstash {
-    background-color: @product-logstash;
-    background-image: url("~ui/icons/logstash.svg");
-  }
-
-  .panel-body {
-    padding: 10px;
-  }
-}
-
 // TODO: Extract these styles into the UI Framework.
 
 .page-row {

From 23ac54d91577555ea7d1534a42ddfdd3a4f36c4c Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 16 Mar 2017 16:16:14 -0700
Subject: [PATCH 106/150] [UI Framework] Move Badge, Card, Column, and Notice
 components from base.less into UI Framework. (#10777)

* Move Badge, Card, Column, and Notice components from base.less into UI Framework.
* Add deprecation comment to Column page.
---
 src/ui/public/styles/base.less                | 143 ------------
 ui_framework/components/badge/_badge.scss     |  14 ++
 ui_framework/components/badge/_index.scss     |   1 +
 ui_framework/components/card/_card.scss       |  36 +++
 ui_framework/components/card/_card_group.scss |  21 ++
 ui_framework/components/card/_index.scss      |   2 +
 ui_framework/components/column/_column.scss   |  19 ++
 ui_framework/components/column/_index.scss    |   1 +
 ui_framework/components/index.scss            |   4 +
 .../components/local_nav/_local_dropdown.scss |   7 +-
 ui_framework/components/notice/_index.scss    |   1 +
 ui_framework/components/notice/_notice.scss   |  24 ++
 ui_framework/dist/ui_framework.css            | 216 +++++++++++++++++-
 .../doc_site/src/services/routes/routes.js    |  24 ++
 .../src/views/badge/badge_example.jsx         |  34 +++
 .../src/views/badge/default_badge.html        |   9 +
 .../doc_site/src/views/card/card.html         |  17 ++
 .../doc_site/src/views/card/card_example.jsx  |  48 ++++
 .../doc_site/src/views/card/card_group.html   |  41 ++++
 .../src/views/column/column_example.jsx       |  40 ++++
 .../doc_site/src/views/column/columns.html    |  47 ++++
 .../src/views/notice/notice_sandbox.html      |  27 +++
 .../src/views/notice/notice_sandbox.jsx       |  27 +++
 23 files changed, 656 insertions(+), 147 deletions(-)
 create mode 100644 ui_framework/components/badge/_badge.scss
 create mode 100644 ui_framework/components/badge/_index.scss
 create mode 100644 ui_framework/components/card/_card.scss
 create mode 100644 ui_framework/components/card/_card_group.scss
 create mode 100644 ui_framework/components/card/_index.scss
 create mode 100644 ui_framework/components/column/_column.scss
 create mode 100644 ui_framework/components/column/_index.scss
 create mode 100644 ui_framework/components/notice/_index.scss
 create mode 100644 ui_framework/components/notice/_notice.scss
 create mode 100644 ui_framework/doc_site/src/views/badge/badge_example.jsx
 create mode 100644 ui_framework/doc_site/src/views/badge/default_badge.html
 create mode 100644 ui_framework/doc_site/src/views/card/card.html
 create mode 100644 ui_framework/doc_site/src/views/card/card_example.jsx
 create mode 100644 ui_framework/doc_site/src/views/card/card_group.html
 create mode 100644 ui_framework/doc_site/src/views/column/column_example.jsx
 create mode 100644 ui_framework/doc_site/src/views/column/columns.html
 create mode 100644 ui_framework/doc_site/src/views/notice/notice_sandbox.html
 create mode 100644 ui_framework/doc_site/src/views/notice/notice_sandbox.jsx

diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index c237135545628..76289ee3b915e 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -563,105 +563,6 @@ fieldset {
   font-size: 14px;
 }
 
-.kuiNotice {
-  padding: 40px 60px 48px;
-  margin: 20px;
-  background-color: white;
-}
-
-.kuiNotice__header {
-  margin-bottom: 18px;
-}
-
-/**
- * 1. Override h1 styles.
- */
-.kuiNoticeTitle {
-  font-size: 22px;
-  margin-bottom: 12px;
-  margin-top: 0; // 1
-}
-
-.kuiNoticeText {
-  font-size: 14px;
-  margin-bottom: 12px;
-}
-
-.kuiCard {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #E0E0E0;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-  .kuiCard__description {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 18px 0;
-  }
-
-    .kuiCard__descriptionTitle {
-      font-size: 14px;
-      font-weight: bold;
-      margin-bottom: 10px;
-      text-align: center;
-      max-width: ~"calc(100% - 48px)";
-    }
-
-    .kuiCard__descriptionText {
-      font-size: 14px;
-      max-width: ~"calc(100% - 48px)";
-    }
-
-  .kuiCard__footer {
-    text-align: center;
-    font-size: 14px;
-    padding: 0 15px 20px;
-  }
-
-.kuiCard--fixedWidth {
-  max-width: 120px;
-}
-
-.kuiCardGroup {
-  display: flex;
-  border: 1px solid #E0E0E0;
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 18px;
-}
-
-  .kuiCardGroup__card {
-    flex: 1 1 0%;
-    border: none;
-    border-radius: 0;
-
-    & + & {
-      border-left: 1px solid #E0E0E0;
-    }
-  }
-
-  .kuiCardGroup__cardDescription {
-    flex: 1 1 auto;
-  }
-
-.kuiBadge {
-  display: inline-block;
-  margin-left: 0.5em;
-  padding: 0.1em 0.7em;
-  vertical-align: middle;
-  font-size: 11px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.kuiBadge--default {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
 .kuiFormSection {
   margin-bottom: 16px;
 }
@@ -747,7 +648,6 @@ fieldset {
 
 /**
  * Utility class.
- * TODO: Move to UI Framework.
  */
 .fullWidth {
   width: 100% !important;
@@ -755,7 +655,6 @@ fieldset {
 
 /**
  * Utility class.
- * TODO: Move to UI Framework.
  */
 .noPadding {
   padding: 0 !important;
@@ -773,47 +672,6 @@ fieldset {
     flex: 1 1 auto;
   }
 
-.kuiColumn + .kuiColumn {
-  padding-left: 10px;
-}
-
-/**
- * 1. Use inline-block instead of flexbox so that content doesn't overflow.
- * 2. Content can be aligned by offsetting from the top.
- */
-// $numColumns: 12;
-// @for $i from 1 through $numColumns {
-//   .kiuColumn--#{$i} {
-//     display: inline-block; /* 1 */
-//     vertical-align: top; /* 2 */
-//     width: $i / $numColumns * 100%;
-//   }
-// }
-
-.makeKuiColumns(12);
-
-.makeKuiColumns(@n, @i: 1) when (@i =< @n) {
-  .kuiColumn--@{i} {
-    display: inline-block; /* 1 */
-    vertical-align: top; /* 2 */
-    width: (@i * 100% / @n);
-  }
-  .makeKuiColumns(@n, (@i + 1));
-}
-
-/**
- * 1. Override Bootstrap styles.
- */
-.kuiLocalDropdownCloseButton {
-  color: #2d2d2d !important; /* 1 */
-
-  .theme-dark & {
-    color: #cecece !important; /* 1 */
-  }
-}
-
-// TODO: Extract these styles into the UI Framework.
-
 .kuiFormSection {
   margin-bottom: 16px;
 }
@@ -1004,5 +862,4 @@ fieldset {
   margin-left: 2px;
 }
 
-
 @import "~dragula/dist/dragula.css";
diff --git a/ui_framework/components/badge/_badge.scss b/ui_framework/components/badge/_badge.scss
new file mode 100644
index 0000000000000..be21b20717ef0
--- /dev/null
+++ b/ui_framework/components/badge/_badge.scss
@@ -0,0 +1,14 @@
+.kuiBadge {
+  display: inline-block;
+  margin-left: 0.5em;
+  padding: 0.1em 0.7em;
+  vertical-align: middle;
+  font-size: 11px;
+  line-height: $lineHeight;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.kuiBadge--default {
+  background-color: rgba(0, 0, 0, 0.1);
+}
diff --git a/ui_framework/components/badge/_index.scss b/ui_framework/components/badge/_index.scss
new file mode 100644
index 0000000000000..87110f0e382c5
--- /dev/null
+++ b/ui_framework/components/badge/_index.scss
@@ -0,0 +1 @@
+@import "badge";
diff --git a/ui_framework/components/card/_card.scss b/ui_framework/components/card/_card.scss
new file mode 100644
index 0000000000000..4ec1d250349d5
--- /dev/null
+++ b/ui_framework/components/card/_card.scss
@@ -0,0 +1,36 @@
+.kuiCard {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #E0E0E0;
+  border-radius: 4px;
+  overflow: hidden;
+  line-height: $lineHeight;
+}
+
+  .kuiCard__description {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 18px 0;
+  }
+
+    .kuiCard__descriptionTitle {
+      font-size: 14px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      text-align: center;
+      max-width: calc(100% - 48px);
+    }
+
+    .kuiCard__descriptionText {
+      font-size: 14px;
+      max-width: calc(100% - 48px);
+    }
+
+  .kuiCard__footer {
+    text-align: center;
+    font-size: 14px;
+    padding: 0 15px 20px;
+  }
+
diff --git a/ui_framework/components/card/_card_group.scss b/ui_framework/components/card/_card_group.scss
new file mode 100644
index 0000000000000..662d76ddee09f
--- /dev/null
+++ b/ui_framework/components/card/_card_group.scss
@@ -0,0 +1,21 @@
+.kuiCardGroup {
+  display: flex;
+  border: 1px solid #E0E0E0;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 18px;
+}
+
+  .kuiCardGroup__card {
+    flex: 1 1 0%;
+    border: none;
+    border-radius: 0;
+
+    & + & {
+      border-left: 1px solid #E0E0E0;
+    }
+  }
+
+  .kuiCardGroup__cardDescription {
+    flex: 1 1 auto;
+  }
diff --git a/ui_framework/components/card/_index.scss b/ui_framework/components/card/_index.scss
new file mode 100644
index 0000000000000..b2e24fb81d619
--- /dev/null
+++ b/ui_framework/components/card/_index.scss
@@ -0,0 +1,2 @@
+@import "card";
+@import "card_group";
diff --git a/ui_framework/components/column/_column.scss b/ui_framework/components/column/_column.scss
new file mode 100644
index 0000000000000..6c25e79de60d3
--- /dev/null
+++ b/ui_framework/components/column/_column.scss
@@ -0,0 +1,19 @@
+/**
+ * 1. If we use margins instead, columns get pushed to the next line.
+ */
+.kuiColumn + .kuiColumn {
+  padding-left: 10px; /* 1 */
+}
+
+/**
+ * 1. Use inline-block instead of flexbox so that content doesn't overflow.
+ * 2. Content can be aligned by offsetting from the top.
+ */
+$numColumns: 12;
+@for $i from 1 through $numColumns {
+  .kuiColumn--#{$i} {
+    display: inline-block; /* 1 */
+    vertical-align: top; /* 2 */
+    width: $i / $numColumns * 100%;
+  }
+}
diff --git a/ui_framework/components/column/_index.scss b/ui_framework/components/column/_index.scss
new file mode 100644
index 0000000000000..4051a03426356
--- /dev/null
+++ b/ui_framework/components/column/_index.scss
@@ -0,0 +1 @@
+@import "column";
diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss
index fbfe9c4ee05dd..c1cab19254979 100644
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@@ -241,8 +241,11 @@ body {
 }
 
 @import "action_item/index";
+@import "badge/index";
 @import "bar/index";
 @import "button/index";
+@import "card/index";
+@import "column/index";
 @import "event/index";
 @import "form/index";
 @import "header_bar/index";
@@ -256,6 +259,7 @@ body {
 @import "micro_button/index";
 @import "modal/index";
 @import "no_items/index";
+@import "notice/index";
 @import "panel/index";
 @import "prompt_for_items/index";
 @import "status_text/index";
diff --git a/ui_framework/components/local_nav/_local_dropdown.scss b/ui_framework/components/local_nav/_local_dropdown.scss
index 7e6d9fb925029..6bf62b9c9f9a4 100644
--- a/ui_framework/components/local_nav/_local_dropdown.scss
+++ b/ui_framework/components/local_nav/_local_dropdown.scss
@@ -9,6 +9,9 @@
   }
 }
 
+/**
+ * 1. Override Bootstrap styles.
+ */
 .kuiLocalDropdownCloseButton {
   appearance: none;
   background-color: transparent;
@@ -18,7 +21,7 @@
   top: 1px;
   right: 5px;
   font-size: 16px;
-  color: $localNavTextColor;
+  color: $localNavTextColor !important; /* 1 */
   cursor: pointer;
   opacity: 0.35;
 
@@ -27,7 +30,7 @@
   }
 
   @include darkTheme {
-    color: $localNavTextColor--darkTheme;
+    color: $localNavTextColor--darkTheme !important; /* 1 */
   }
 }
 
diff --git a/ui_framework/components/notice/_index.scss b/ui_framework/components/notice/_index.scss
new file mode 100644
index 0000000000000..d827ba3e8474d
--- /dev/null
+++ b/ui_framework/components/notice/_index.scss
@@ -0,0 +1 @@
+@import "notice";
diff --git a/ui_framework/components/notice/_notice.scss b/ui_framework/components/notice/_notice.scss
new file mode 100644
index 0000000000000..b9e358913761b
--- /dev/null
+++ b/ui_framework/components/notice/_notice.scss
@@ -0,0 +1,24 @@
+.kuiNotice {
+  padding: 40px 60px 48px;
+  margin: 20px;
+  background-color: white;
+  line-height: $lineHeight;
+}
+
+  .kuiNotice__header {
+    margin-bottom: 18px;
+  }
+
+/**
+ * 1. Override h1 styles.
+ */
+.kuiNoticeTitle {
+  font-size: 22px;
+  margin-bottom: 12px;
+  margin-top: 0 !important; /* 1 */
+}
+
+.kuiNoticeText {
+  font-size: 14px;
+  margin-bottom: 12px;
+}
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 1c72381da7dbd..0445b209c93c8 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -45,6 +45,19 @@ body {
       -ms-flex-pack: justify;
           justify-content: space-between; }
 
+.kuiBadge {
+  display: inline-block;
+  margin-left: 0.5em;
+  padding: 0.1em 0.7em;
+  vertical-align: middle;
+  font-size: 11px;
+  line-height: 1.5;
+  letter-spacing: 0.1em;
+  text-transform: uppercase; }
+
+.kuiBadge--default {
+  background-color: rgba(0, 0, 0, 0.1); }
+
 .kuiBar {
   display: -webkit-box;
   display: -webkit-flex;
@@ -255,6 +268,178 @@ body {
 .kuiButtonGroup--united .kuiButton + .kuiButton {
   margin-left: 2px; }
 
+.kuiCard {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border: 1px solid #E0E0E0;
+  border-radius: 4px;
+  overflow: hidden;
+  line-height: 1.5; }
+
+.kuiCard__description {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  padding: 18px 0; }
+
+.kuiCard__descriptionTitle {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-align: center;
+  max-width: calc(100% - 48px); }
+
+.kuiCard__descriptionText {
+  font-size: 14px;
+  max-width: calc(100% - 48px); }
+
+.kuiCard__footer {
+  text-align: center;
+  font-size: 14px;
+  padding: 0 15px 20px; }
+
+.kuiCardGroup {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border: 1px solid #E0E0E0;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 18px; }
+
+.kuiCardGroup__card {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 0%;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%;
+  border: none;
+  border-radius: 0; }
+  .kuiCardGroup__card + .kuiCardGroup__card {
+    border-left: 1px solid #E0E0E0; }
+
+.kuiCardGroup__cardDescription {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto; }
+
+/**
+ * 1. If we use margins instead, columns get pushed to the next line.
+ */
+.kuiColumn + .kuiColumn {
+  padding-left: 10px;
+  /* 1 */ }
+
+/**
+ * 1. Use inline-block instead of flexbox so that content doesn't overflow.
+ * 2. Content can be aligned by offsetting from the top.
+ */
+.kuiColumn--1 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 8.33333%; }
+
+.kuiColumn--2 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 16.66667%; }
+
+.kuiColumn--3 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 25%; }
+
+.kuiColumn--4 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 33.33333%; }
+
+.kuiColumn--5 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 41.66667%; }
+
+.kuiColumn--6 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 50%; }
+
+.kuiColumn--7 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 58.33333%; }
+
+.kuiColumn--8 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 66.66667%; }
+
+.kuiColumn--9 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 75%; }
+
+.kuiColumn--10 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 83.33333%; }
+
+.kuiColumn--11 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 91.66667%; }
+
+.kuiColumn--12 {
+  display: inline-block;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+  width: 100%; }
+
 .kuiEvent {
   display: -webkit-box;
   display: -webkit-flex;
@@ -700,6 +885,9 @@ body {
   .theme-dark .kuiLocalDropdown {
     background-color: #525252; }
 
+/**
+ * 1. Override Bootstrap styles.
+ */
 .kuiLocalDropdownCloseButton {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -711,13 +899,15 @@ body {
   top: 1px;
   right: 5px;
   font-size: 16px;
-  color: #2d2d2d;
+  color: #2d2d2d !important;
+  /* 1 */
   cursor: pointer;
   opacity: 0.35; }
   .kuiLocalDropdownCloseButton:hover {
     opacity: 1; }
   .theme-dark .kuiLocalDropdownCloseButton {
-    color: #cecece; }
+    color: #cecece !important;
+    /* 1 */ }
 
 .kuiLocalDropdownPanels {
   display: -webkit-box;
@@ -1253,6 +1443,28 @@ body {
   color: #9fa3a7;
   line-height: 1.5; }
 
+.kuiNotice {
+  padding: 40px 60px 48px;
+  margin: 20px;
+  background-color: white;
+  line-height: 1.5; }
+
+.kuiNotice__header {
+  margin-bottom: 18px; }
+
+/**
+ * 1. Override h1 styles.
+ */
+.kuiNoticeTitle {
+  font-size: 22px;
+  margin-bottom: 12px;
+  margin-top: 0 !important;
+  /* 1 */ }
+
+.kuiNoticeText {
+  font-size: 14px;
+  margin-bottom: 12px; }
+
 .kuiPanel {
   border: 2px solid #E4E4E4; }
 
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index 8bda0a70ee23b..d7c80f1eb2b9c 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -3,12 +3,21 @@ import Slugify from '../string/slugify';
 import ActionItemExample
   from '../../views/action_item/action_item_example.jsx';
 
+import BadgeExample
+  from '../../views/badge/badge_example.jsx';
+
 import BarExample
   from '../../views/bar/bar_example.jsx';
 
 import ButtonExample
   from '../../views/button/button_example.jsx';
 
+import CardExample
+  from '../../views/card/card_example.jsx';
+
+import ColumnExample
+  from '../../views/column/column_example.jsx';
+
 import EventExample
   from '../../views/event/event_example.jsx';
 
@@ -48,6 +57,9 @@ import MicroButtonExample
 import ModalExample
   from '../../views/modal/modal_example.jsx';
 
+import NoticeSandbox
+  from '../../views/notice/notice_sandbox.jsx';
+
 import PanelExample
   from '../../views/panel/panel_example.jsx';
 
@@ -79,12 +91,21 @@ import ViewSandbox
 const components = [{
   name: 'ActionItem',
   component: ActionItemExample,
+}, {
+  name: 'Badge',
+  component: BadgeExample,
 }, {
   name: 'Bar',
   component: BarExample,
 }, {
   name: 'Button',
   component: ButtonExample,
+}, {
+  name: 'Card',
+  component: CardExample,
+}, {
+  name: 'Column',
+  component: ColumnExample,
 }, {
   name: 'Event',
   component: EventExample,
@@ -150,6 +171,9 @@ const sandboxes = [{
 }, {
   name: 'HeaderBar with Table',
   component: HeaderBarSandbox,
+}, {
+  name: 'Notice',
+  component: NoticeSandbox,
 }, {
   name: 'View',
   component: ViewSandbox,
diff --git a/ui_framework/doc_site/src/views/badge/badge_example.jsx b/ui_framework/doc_site/src/views/badge/badge_example.jsx
new file mode 100644
index 0000000000000..5dfdd05fbc6e2
--- /dev/null
+++ b/ui_framework/doc_site/src/views/badge/badge_example.jsx
@@ -0,0 +1,34 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const defaultHtml = require('./default_badge.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Default Badge"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: defaultHtml,
+      }]}
+    >
+      <GuideText>
+        Use the Default Badge to signify a neutral status of a document or object.
+      </GuideText>
+
+      <GuideDemo
+        html={defaultHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/badge/default_badge.html b/ui_framework/doc_site/src/views/badge/default_badge.html
new file mode 100644
index 0000000000000..f813cc1e39ce9
--- /dev/null
+++ b/ui_framework/doc_site/src/views/badge/default_badge.html
@@ -0,0 +1,9 @@
+<div class="kuiBadge kuiBadge--default">
+  <span class="kuiIcon fa-lock"></span>
+  Reserved
+</div>
+
+<div class="kuiBadge kuiBadge--default">
+  <span class="kuiIcon fa-warning"></span>
+  Disabled
+</div>
diff --git a/ui_framework/doc_site/src/views/card/card.html b/ui_framework/doc_site/src/views/card/card.html
new file mode 100644
index 0000000000000..1c2348556c630
--- /dev/null
+++ b/ui_framework/doc_site/src/views/card/card.html
@@ -0,0 +1,17 @@
+<div class="kuiCard">
+  <div class="kuiCard__description">
+    <div class="kuiCard__descriptionTitle">
+      Get a banana
+    </div>
+
+    <div class="kuiCard__descriptionText">
+      Bananas are yellow, fit easily in the hand, and have a lot of potassium or something.
+    </div>
+  </div>
+
+  <div class="kuiCard__footer">
+    <a class="kuiButton kuiButton--basic" href="#">
+      Banana!
+    </a>
+  </div>
+</div>
diff --git a/ui_framework/doc_site/src/views/card/card_example.jsx b/ui_framework/doc_site/src/views/card/card_example.jsx
new file mode 100644
index 0000000000000..89f936b8dbc13
--- /dev/null
+++ b/ui_framework/doc_site/src/views/card/card_example.jsx
@@ -0,0 +1,48 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const cardHtml = require('./card.html');
+const cardGroupHtml = require('./card_group.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Card"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: cardHtml,
+      }]}
+    >
+      <GuideText>
+        Cards expand to fill their container. To restrict a card's width, define the width of its
+        container.
+      </GuideText>
+
+      <GuideDemo
+        html={cardHtml}
+      />
+    </GuideSection>
+
+    <GuideSection
+      title="CardGroup"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: cardGroupHtml,
+      }]}
+    >
+      <GuideDemo
+        html={cardGroupHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/card/card_group.html b/ui_framework/doc_site/src/views/card/card_group.html
new file mode 100644
index 0000000000000..38d1ec3acceeb
--- /dev/null
+++ b/ui_framework/doc_site/src/views/card/card_group.html
@@ -0,0 +1,41 @@
+<div class="kuiCardGroup">
+  <div class="kuiCard kuiCardGroup__card">
+    <div class="kuiCard__description kuiCardGroup__cardDescription">
+      <div class="kuiCard__descriptionTitle">
+        Get a banana
+      </div>
+
+      <div class="kuiCard__descriptionText">
+        Bananas are yellow, fit easily in the hand, and have a lot of potassium or something.
+      </div>
+    </div>
+
+    <div class="kuiCard__footer">
+      <a class="kuiButton kuiButton--basic" href="#">
+        Banana!
+      </a>
+    </div>
+  </div>
+
+  <div class="kuiCard kuiCardGroup__card">
+    <div class="kuiCard__description kuiCardGroup__cardDescription">
+      <div class="kuiCard__descriptionTitle">
+        Get a pteradactyl
+      </div>
+
+      <div class="kuiCard__descriptionText">
+        Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly.
+      </div>
+    </div>
+
+    <div class="kuiCard__footer">
+      <a
+        class="kuiButton kuiButton--primary"
+        href="https://www.elastic.co/subscriptions/xpack"
+        target="_blank"
+      >
+        Pteradactyl!
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/ui_framework/doc_site/src/views/column/column_example.jsx b/ui_framework/doc_site/src/views/column/column_example.jsx
new file mode 100644
index 0000000000000..52f32c7748fac
--- /dev/null
+++ b/ui_framework/doc_site/src/views/column/column_example.jsx
@@ -0,0 +1,40 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import {
+  GuideCode,
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const columnsHtml = require('./columns.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Columns"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: columnsHtml,
+      }]}
+    >
+      <GuideText>
+        <strong>Note:</strong> Don't use this. It's subject to change as we evolve our grid system.
+      </GuideText>
+
+      <GuideText>
+        This is a substitute grid system. It uses <GuideCode>display: inline-block</GuideCode>, so
+        you need to structure your markup to leave no whitespace between each column.
+      </GuideText>
+
+      <GuideDemo
+        html={columnsHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/column/columns.html b/ui_framework/doc_site/src/views/column/columns.html
new file mode 100644
index 0000000000000..854ca91fbb278
--- /dev/null
+++ b/ui_framework/doc_site/src/views/column/columns.html
@@ -0,0 +1,47 @@
+<div>
+  <div class="kuiColumn kuiColumn--1">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div><div class="kuiColumn kuiColumn--11">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div>
+</div>
+
+<div>
+  <div class="kuiColumn kuiColumn--2">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div><div class="kuiColumn kuiColumn--10">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div>
+</div>
+
+<div>
+  <div class="kuiColumn kuiColumn--3">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div><div class="kuiColumn kuiColumn--9">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div>
+</div>
+
+<div>
+  <div class="kuiColumn kuiColumn--4">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div><div class="kuiColumn kuiColumn--8">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div>
+</div>
+
+<div>
+  <div class="kuiColumn kuiColumn--5">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div><div class="kuiColumn kuiColumn--7">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div>
+</div>
+
+<div>
+  <div class="kuiColumn kuiColumn--6">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div><div class="kuiColumn kuiColumn--6">
+    <div style="background-color: lightgray; height: 20px"></div>
+  </div>
+</div>
diff --git a/ui_framework/doc_site/src/views/notice/notice_sandbox.html b/ui_framework/doc_site/src/views/notice/notice_sandbox.html
new file mode 100644
index 0000000000000..fa2444089690c
--- /dev/null
+++ b/ui_framework/doc_site/src/views/notice/notice_sandbox.html
@@ -0,0 +1,27 @@
+<div
+  class="kuiView"
+  style="background-color: pink"
+>
+  <div
+    class="kuiViewContent kuiViewContent--constrainedWidth"
+    style="background-color: pink"
+  >
+    <div class="kuiNotice">
+      <div ng-if="isExpired" class="kuiNotice__header">
+        <h1 class="kuiNoticeTitle">
+          <span class="kuiIcon kuiIcon--error fa-warning"></span>
+          Notice title
+        </h1>
+
+        <div class="kuiNoticeText">
+          You can use the Notice component to present content in the center of the content area,
+          within a container with a narrow, fixed width.
+        </div>
+
+        <div class="kuiNoticeText">
+          The pink color is just for demonstration purposes.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/ui_framework/doc_site/src/views/notice/notice_sandbox.jsx b/ui_framework/doc_site/src/views/notice/notice_sandbox.jsx
new file mode 100644
index 0000000000000..2210104a520de
--- /dev/null
+++ b/ui_framework/doc_site/src/views/notice/notice_sandbox.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {
+  GuideDemo,
+  GuideSandbox,
+  GuideSandboxCodeToggle,
+  GuideSectionTypes,
+} from '../../components';
+
+const html = require('./notice_sandbox.html');
+
+export default props => (
+  <GuideSandbox>
+    <GuideDemo
+      isFullScreen={true}
+      html={html}
+    />
+
+    <GuideSandboxCodeToggle
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: html,
+      }]}
+      title={props.route.name}
+    />
+  </GuideSandbox>
+);

From 3bcb7dd1da7c1e103db21fe18a1760feeec7d9c6 Mon Sep 17 00:00:00 2001
From: Jim Unger <jim.unger@elastic.co>
Date: Fri, 17 Mar 2017 17:14:45 -0500
Subject: [PATCH 107/150] Adds disabled, visible, and tooltip properties to
 section class/template (#10784)

* Adds disabled, visible, and tooltip properties to section class/template

* adds tests
---
 .../kibana/public/management/landing.html     |  8 +-
 src/ui/public/management/__tests__/section.js | 90 ++++++++++++++++++-
 src/ui/public/management/section.js           | 29 +++++-
 3 files changed, 121 insertions(+), 6 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/landing.html b/src/core_plugins/kibana/public/management/landing.html
index d32364f6d5ec9..5ecab9e681153 100644
--- a/src/core_plugins/kibana/public/management/landing.html
+++ b/src/core_plugins/kibana/public/management/landing.html
@@ -7,7 +7,7 @@
 
     <!-- Management sections for the ES stack -->
     <div
-      ng-if="section.items.length > 0"
+      ng-if="section.visibleItems.length > 0"
       ng-repeat="section in sections"
       ng-class="{ 'management-section-info-expanded': section.showInfo }"
       class="page-row"
@@ -38,12 +38,12 @@
             <ul class="list-unstyled">
               <li
                 class="col-xs-4 col-md-3"
-                ng-repeat="item in section.items.inOrder"
+                ng-repeat="item in section.visibleItems"
               >
                 <a
                   class="management-panel__link"
-                  ng-class="{ 'management-panel__link--disabled': !item.url }"
-                  kbn-href="{{::item.url}}"
+                  ng-class="{ 'management-panel__link--disabled': item.disabled || !item.url }"
+                  kbn-href="{{::item.disabled ? '' : item.url}}"
                   tooltip="{{::item.tooltip}}"
                   tooltip-placement="bottom"
                   tooltip-popup-delay="400"
diff --git a/src/ui/public/management/__tests__/section.js b/src/ui/public/management/__tests__/section.js
index b41a2e494a652..ba1c84cade365 100644
--- a/src/ui/public/management/__tests__/section.js
+++ b/src/ui/public/management/__tests__/section.js
@@ -10,14 +10,40 @@ describe('ManagementSection', () => {
       expect(section.display).to.be('kibana');
     });
 
+    it('defaults visible to true', () => {
+      const section = new ManagementSection('kibana');
+      expect(section.visible).to.be(true);
+    });
+
+    it('defaults disabled to false', () => {
+      const section = new ManagementSection('kibana');
+      expect(section.disabled).to.be(false);
+    });
+
+    it('defaults tooltip to empty string', () => {
+      const section = new ManagementSection('kibana');
+      expect(section.tooltip).to.be('');
+    });
+
+    it('defaults url to empty string', () => {
+      const section = new ManagementSection('kibana');
+      expect(section.url).to.be('');
+    });
+
     it('exposes items', () => {
       const section = new ManagementSection('kibana');
       expect(section.items).to.be.empty();
     });
 
+    it('exposes visibleItems', () => {
+      const section = new ManagementSection('kibana');
+      expect(section.visibleItems).to.be.empty();
+    });
+
     it('assigns all options', () => {
-      const section = new ManagementSection('kibana', { description: 'test' });
+      const section = new ManagementSection('kibana', { description: 'test', url: 'foobar' });
       expect(section.description).to.be('test');
+      expect(section.url).to.be('foobar');
     });
   });
 
@@ -133,4 +159,66 @@ describe('ManagementSection', () => {
       expect(ids).to.eql(['one', 'two', 'three']);
     });
   });
+
+  describe('visible', () => {
+    let section;
+
+    beforeEach(() => {
+      section = new ManagementSection('kibana');
+    });
+
+    it('hide sets visible to false', () => {
+      section.hide();
+      expect(section.visible).to.be(false);
+    });
+
+    it('show sets visible to true', () => {
+      section.hide();
+      section.show();
+      expect(section.visible).to.be(true);
+    });
+  });
+
+  describe('disabled', () => {
+    let section;
+
+    beforeEach(() => {
+      section = new ManagementSection('kibana');
+    });
+
+    it('disable sets disabled to true', () => {
+      section.disable();
+      expect(section.disabled).to.be(true);
+    });
+
+    it('enable sets disabled to false', () => {
+      section.enable();
+      expect(section.disabled).to.be(false);
+    });
+  });
+
+  describe('visibleItems', () => {
+    let section;
+
+    beforeEach(() => {
+      section = new ManagementSection('kibana');
+
+      section.register('three', { order: 3 });
+      section.register('one', { order: 1 });
+      section.register('two', { order: 2 });
+    });
+
+    it('maintains the order', () => {
+      const ids = section.visibleItems.map((i) => { return i.id; });
+      expect(ids).to.eql(['one', 'two', 'three']);
+    });
+
+    it('does not include hidden items', () => {
+      section.getSection('two').hide();
+
+      const ids = section.visibleItems.map((i) => { return i.id; });
+      expect(ids).to.eql(['one', 'three']);
+    });
+
+  });
 });
diff --git a/src/ui/public/management/section.js b/src/ui/public/management/section.js
index fccfc5f24dbd9..5df8558a7a735 100644
--- a/src/ui/public/management/section.js
+++ b/src/ui/public/management/section.js
@@ -8,8 +8,11 @@ export default class ManagementSection {
    * @param {object} options
    * @param {number|null} options.order
    * @param {string|null} options.display - defaults to id
-   * @param {string|null} options.url
+   * @param {string|null} options.url - defaults to ''
    * @param {string|null} options.info
+   * @param {boolean|null} options.visible - defaults to true
+   * @param {boolean|null} options.disabled - defaults to false
+   * @param {string|null} options.tooltip - defaults to ''
    * @returns {ManagementSection}
    */
 
@@ -20,10 +23,18 @@ export default class ManagementSection {
       index: ['id'],
       order: ['order']
     });
+    this.visible = true;
+    this.disabled = false;
+    this.tooltip = '';
+    this.url = '';
 
     assign(this, options);
   }
 
+  get visibleItems() {
+    return this.items.inOrder.filter(item => item.visible);
+  }
+
   /**
    * Registers a sub-section
    *
@@ -85,4 +96,20 @@ export default class ManagementSection {
       return currentSection.items.byId[nextSection];
     }, this);
   }
+
+  hide() {
+    this.visible = false;
+  }
+
+  show() {
+    this.visible = true;
+  }
+
+  disable() {
+    this.disabled = true;
+  }
+
+  enable() {
+    this.disabled = false;
+  }
 }

From 3e5352574fffd3a4368341df6c77402ff3005e86 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 17 Mar 2017 15:46:44 -0700
Subject: [PATCH 108/150] [UI Framework] Add Label, SearchInput, and FieldGroup
 components. (#10713)

* Add SearchInput and FieldGroup components.
---
 ui_framework/components/form/_index.scss      |  1 +
 .../components/form/_search_input.scss        | 24 +++++++
 .../components/form_layout/_field_group.scss  | 17 +++++
 .../components/form_layout/_index.scss        |  1 +
 ui_framework/components/index.scss            |  1 +
 ui_framework/dist/ui_framework.css            | 67 +++++++++++++++++++
 .../doc_site/src/services/routes/routes.js    |  6 ++
 .../doc_site/src/views/form/form_example.jsx  | 13 ++++
 .../doc_site/src/views/form/search_input.html |  8 +++
 .../doc_site/src/views/form/text_area.html    |  4 +-
 .../views/form/text_area_non_resizable.html   |  2 +-
 .../src/views/form_layout/field_group.html    | 19 ++++++
 .../views/form_layout/form_layout_example.jsx | 31 +++++++++
 13 files changed, 191 insertions(+), 3 deletions(-)
 create mode 100644 ui_framework/components/form/_search_input.scss
 create mode 100644 ui_framework/components/form_layout/_field_group.scss
 create mode 100644 ui_framework/components/form_layout/_index.scss
 create mode 100644 ui_framework/doc_site/src/views/form/search_input.html
 create mode 100644 ui_framework/doc_site/src/views/form_layout/field_group.html
 create mode 100644 ui_framework/doc_site/src/views/form_layout/form_layout_example.jsx

diff --git a/ui_framework/components/form/_index.scss b/ui_framework/components/form/_index.scss
index bb04b81c819cd..e51503eb1de64 100644
--- a/ui_framework/components/form/_index.scss
+++ b/ui_framework/components/form/_index.scss
@@ -1,4 +1,5 @@
 @import "check_box";
+@import "search_input";
 @import "select";
 @import "static_input";
 @import "text_area";
diff --git a/ui_framework/components/form/_search_input.scss b/ui_framework/components/form/_search_input.scss
new file mode 100644
index 0000000000000..fd9922cb60d4a
--- /dev/null
+++ b/ui_framework/components/form/_search_input.scss
@@ -0,0 +1,24 @@
+.kuiSearchInput {
+  display: inline-block;
+  position: relative;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+}
+
+  .kuiSearchInput__icon {
+    position: absolute;
+    top: 0.5em;
+    left: 0.7em;
+    font-size: 1em;
+    color: #ACACAC;
+  }
+
+  /**
+   * 1. Make space for search icon.
+   * 2. Expand to fill container.
+   */
+  .kuiSearchInput__input {
+    @include formControl;
+    padding-left: 28px; /* 1 */
+    width: 100%; /* 2 */
+  }
diff --git a/ui_framework/components/form_layout/_field_group.scss b/ui_framework/components/form_layout/_field_group.scss
new file mode 100644
index 0000000000000..8b4d240704cce
--- /dev/null
+++ b/ui_framework/components/form_layout/_field_group.scss
@@ -0,0 +1,17 @@
+.kuiFieldGroup {
+  display: flex;
+}
+
+.kuiFieldGroupSection {
+  & + & {
+    margin-left: 10px;
+  }
+}
+
+.kuiFieldGroupSection--wide {
+  flex: 1 1 auto;
+
+  & > * {
+    width: 100%;
+  }
+}
diff --git a/ui_framework/components/form_layout/_index.scss b/ui_framework/components/form_layout/_index.scss
new file mode 100644
index 0000000000000..d0a62ab462693
--- /dev/null
+++ b/ui_framework/components/form_layout/_index.scss
@@ -0,0 +1 @@
+@import "field_group";
diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss
index c1cab19254979..8a167d42bf6d0 100644
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@@ -248,6 +248,7 @@ body {
 @import "column/index";
 @import "event/index";
 @import "form/index";
+@import "form_layout/index";
 @import "header_bar/index";
 @import "icon/index";
 @import "info_panel/index";
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 0445b209c93c8..83b97d057f7be 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -523,6 +523,56 @@ body {
     opacity: 0.3;
     cursor: not-allowed; }
 
+.kuiSearchInput {
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+  line-height: 1.5; }
+
+.kuiSearchInput__icon {
+  position: absolute;
+  top: 0.5em;
+  left: 0.7em;
+  font-size: 1em;
+  color: #ACACAC; }
+
+/**
+   * 1. Make space for search icon.
+   * 2. Expand to fill container.
+   */
+.kuiSearchInput__input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 3px 12px 4px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #191E23;
+  background-color: #ffffff;
+  border: 1px solid #DEDEDE;
+  border-radius: 4px;
+  -webkit-transition: border-color 0.1s linear;
+  transition: border-color 0.1s linear;
+  /**
+   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
+   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
+   *    with it.
+   */
+  padding-left: 28px;
+  /* 1 */
+  width: 100%;
+  /* 2 */ }
+  .kuiSearchInput__input:invalid:not(.ng-untouched) {
+    /* 1 */
+    border-color: #D86051; }
+  .kuiSearchInput__input:focus {
+    outline: none;
+    border-color: #6EADC1; }
+  .kuiSearchInput__input:disabled {
+    opacity: 0.4;
+    cursor: not-allowed; }
+
 /**
  * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg).
  * 2. Make room on right side for the caret.
@@ -640,6 +690,23 @@ body {
     opacity: 0.4;
     cursor: not-allowed; }
 
+.kuiFieldGroup {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.kuiFieldGroupSection + .kuiFieldGroupSection {
+  margin-left: 10px; }
+
+.kuiFieldGroupSection--wide {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto; }
+  .kuiFieldGroupSection--wide > * {
+    width: 100%; }
+
 .kuiHeaderBar {
   display: -webkit-box;
   display: -webkit-flex;
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index d7c80f1eb2b9c..41b48ec0b3903 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -27,6 +27,9 @@ import EventsSandbox
 import FormExample
   from '../../views/form/form_example.jsx';
 
+import FormLayoutExample
+  from '../../views/form_layout/form_layout_example.jsx';
+
 import HeaderBarExample
   from '../../views/header_bar/header_bar_example.jsx';
 
@@ -112,6 +115,9 @@ const components = [{
 }, {
   name: 'Form',
   component: FormExample,
+}, {
+  name: 'FormLayout',
+  component: FormLayoutExample,
 }, {
   name: 'HeaderBar',
   component: HeaderBarExample,
diff --git a/ui_framework/doc_site/src/views/form/form_example.jsx b/ui_framework/doc_site/src/views/form/form_example.jsx
index 17195e4bf130d..1bca472abb246 100644
--- a/ui_framework/doc_site/src/views/form/form_example.jsx
+++ b/ui_framework/doc_site/src/views/form/form_example.jsx
@@ -13,6 +13,7 @@ import {
 } from '../../components';
 
 const textInputHtml = require('./text_input.html');
+const searchInputHtml = require('./search_input.html');
 const staticInputHtml = require('./static_input.html');
 const textAreaHtml = require('./text_area.html');
 const textAreaNonResizableHtml = require('./text_area_non_resizable.html');
@@ -33,6 +34,18 @@ export default props => (
       />
     </GuideSection>
 
+    <GuideSection
+      title="SearchInput"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: searchInputHtml,
+      }]}
+    >
+      <GuideDemo
+        html={searchInputHtml}
+      />
+    </GuideSection>
+
     <GuideSection
       title="StaticInput"
       source={[{
diff --git a/ui_framework/doc_site/src/views/form/search_input.html b/ui_framework/doc_site/src/views/form/search_input.html
new file mode 100644
index 0000000000000..928c7ac81483a
--- /dev/null
+++ b/ui_framework/doc_site/src/views/form/search_input.html
@@ -0,0 +1,8 @@
+<div class="kuiSearchInput">
+  <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
+  <input
+    class="kuiSearchInput__input"
+    type="text"
+    placeholder="Search..."
+  >
+</div>
diff --git a/ui_framework/doc_site/src/views/form/text_area.html b/ui_framework/doc_site/src/views/form/text_area.html
index 81e943e0b0fc0..802fe0226d36a 100644
--- a/ui_framework/doc_site/src/views/form/text_area.html
+++ b/ui_framework/doc_site/src/views/form/text_area.html
@@ -4,7 +4,7 @@
 <hr class="guideBreak">
 
 <textarea type="text" class="kuiTextArea">
-  Entered text
+Entered text
 </textarea>
 
 <hr class="guideBreak">
@@ -15,5 +15,5 @@
 <hr class="guideBreak">
 
 <textarea type="text" class="kuiTextArea" disabled>
-  Disabled
+Disabled
 </textarea>
diff --git a/ui_framework/doc_site/src/views/form/text_area_non_resizable.html b/ui_framework/doc_site/src/views/form/text_area_non_resizable.html
index f60eb20ff6b38..6be87c7af6e15 100644
--- a/ui_framework/doc_site/src/views/form/text_area_non_resizable.html
+++ b/ui_framework/doc_site/src/views/form/text_area_non_resizable.html
@@ -1,3 +1,3 @@
 <textarea type="text" class="kuiTextArea kuiTextArea--nonResizable">
-  Non-resizable
+Non-resizable
 </textarea>
diff --git a/ui_framework/doc_site/src/views/form_layout/field_group.html b/ui_framework/doc_site/src/views/form_layout/field_group.html
new file mode 100644
index 0000000000000..6a2ef810116b7
--- /dev/null
+++ b/ui_framework/doc_site/src/views/form_layout/field_group.html
@@ -0,0 +1,19 @@
+<div class="kuiFieldGroup">
+  <div class="kuiFieldGroupSection kuiFieldGroupSection--wide">
+    <div class="kuiSearchInput">
+      <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
+      <input
+        class="kuiSearchInput__input"
+        type="text"
+      >
+    </div>
+  </div>
+
+  <div class="kuiFieldGroupSection">
+    <select class="kuiSelect">
+      <option>Animal</option>
+      <option>Mineral</option>
+      <option>Vegetable</option>
+    </select>
+  </div>
+</div>
diff --git a/ui_framework/doc_site/src/views/form_layout/form_layout_example.jsx b/ui_framework/doc_site/src/views/form_layout/form_layout_example.jsx
new file mode 100644
index 0000000000000..9f47038699641
--- /dev/null
+++ b/ui_framework/doc_site/src/views/form_layout/form_layout_example.jsx
@@ -0,0 +1,31 @@
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+
+import {
+  GuideCode,
+  GuideDemo,
+  GuideLink,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+const fieldGroupHtml = require('./field_group.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="FieldGroup"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: fieldGroupHtml,
+      }]}
+    >
+      <GuideDemo
+        html={fieldGroupHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);

From 84eed3ae872ca0bbf1399aceb36c054c28ad931d Mon Sep 17 00:00:00 2001
From: Richard Hoffman <coverslide@users.noreply.github.com>
Date: Sat, 18 Mar 2017 05:31:03 -0700
Subject: [PATCH 109/150] Highlight area chart when hovered (#10460)

* Highlight area chart when hovered

* Added browser tests for area chart hover
---
 .../__tests__/visualizations/area_chart.js    | 22 +++++++++++++++++++
 .../visualizations/point_series/area_chart.js | 12 +++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/ui/public/vislib/__tests__/visualizations/area_chart.js b/src/ui/public/vislib/__tests__/visualizations/area_chart.js
index 8d7e1ed0f015c..bf7076966b89d 100644
--- a/src/ui/public/vislib/__tests__/visualizations/area_chart.js
+++ b/src/ui/public/vislib/__tests__/visualizations/area_chart.js
@@ -107,6 +107,28 @@ _.forOwn(dataTypesArray, function (dataType, dataTypeName) {
       });
     });
 
+    describe('addPathEvents method', function () {
+      let path;
+      let d3selectedPath;
+      let onMouseOver;
+
+      beforeEach(ngMock.inject(function () {
+        vis.handler.charts.forEach(function (chart) {
+          path = $(chart.chartEl).find('path')[0];
+          d3selectedPath = d3.select(path)[0][0];
+
+          // d3 instance of click and hover
+          onMouseOver = (!!d3selectedPath.__onmouseover);
+        });
+      }));
+
+      it('should attach a hover event', function () {
+        vis.handler.charts.forEach(function () {
+          expect(onMouseOver).to.be(true);
+        });
+      });
+    });
+
     describe('addCircleEvents method', function () {
       let circle;
       let brush;
diff --git a/src/ui/public/vislib/visualizations/point_series/area_chart.js b/src/ui/public/vislib/visualizations/point_series/area_chart.js
index 1742dd78e3629..8f96f65ecba92 100644
--- a/src/ui/public/vislib/visualizations/point_series/area_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/area_chart.js
@@ -208,6 +208,15 @@ export default function AreaChartFactory(Private) {
       return circles;
     }
 
+    addPathEvents(path) {
+      const events = this.events;
+      if (this.handler.visConfig.get('enableHover')) {
+        const hover = events.addHoverEvent();
+        const mouseout = events.addMouseoutEvent();
+        path.call(hover).call(mouseout);
+      }
+    }
+
     /**
      * Renders d3 visualization
      *
@@ -222,7 +231,8 @@ export default function AreaChartFactory(Private) {
           const svg = self.chartEl.append('g');
           svg.data([self.chartData]);
 
-          self.addPath(svg, self.chartData);
+          const path = self.addPath(svg, self.chartData);
+          self.addPathEvents(path);
           const circles = self.addCircles(svg, self.chartData);
           self.addCircleEvents(circles);
 

From 0c3444f214919484ab61c7ba91c29643a0c2756b Mon Sep 17 00:00:00 2001
From: Richard Hoffman <coverslide@users.noreply.github.com>
Date: Sat, 18 Mar 2017 05:32:54 -0700
Subject: [PATCH 110/150] Tilemap heatmap - to prevent flickering on mousemove,
 keep reference to the currently active feature and only change if nearest
 feature is not active (#10467)

Added patch from @thomasneirynck for tooltips to follow mouse
---
 .../visualizations/marker_types/base_marker.js  |  5 +++--
 .../visualizations/marker_types/heatmap.js      | 17 +++++++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/ui/public/vis_maps/visualizations/marker_types/base_marker.js b/src/ui/public/vis_maps/visualizations/marker_types/base_marker.js
index 6154019f51cc6..d398137af3ae4 100644
--- a/src/ui/public/vis_maps/visualizations/marker_types/base_marker.js
+++ b/src/ui/public/vis_maps/visualizations/marker_types/base_marker.js
@@ -234,8 +234,8 @@ export default function MarkerFactory() {
     }
 
     _createTooltip(content, latLng) {
-      L.popup({ autoPan: false })
-      .setLatLng(latLng)
+      this._popup = L.popup({ autoPan: false });
+      this._popup.setLatLng(latLng)
       .setContent(content)
       .openOn(this.map);
     }
@@ -249,6 +249,7 @@ export default function MarkerFactory() {
     _hidePopup() {
       if (!this.map) return;
 
+      this._popup = null;
       this.map.closePopup();
     }
 
diff --git a/src/ui/public/vis_maps/visualizations/marker_types/heatmap.js b/src/ui/public/vis_maps/visualizations/marker_types/heatmap.js
index 2410752864d98..46507c47c9607 100644
--- a/src/ui/public/vis_maps/visualizations/marker_types/heatmap.js
+++ b/src/ui/public/vis_maps/visualizations/marker_types/heatmap.js
@@ -70,13 +70,11 @@ export default function HeatmapMarkerFactory(Private) {
 
       function mouseMoveLocation(e) {
         const latlng = e.latlng;
-
-        this.map.closePopup();
-
         // unhighlight all svgs
         d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
 
         if (!this.geoJson.features.length || this._disableTooltips) {
+          this._hidePopup();
           return;
         }
 
@@ -85,7 +83,18 @@ export default function HeatmapMarkerFactory(Private) {
 
         // show tooltip if close enough to event latlng
         if (this._tooltipProximity(latlng, feature)) {
-          this._showTooltip(feature, latlng);
+          if (this.currentFeature !== feature) {
+            this._hidePopup();
+            this.currentFeature = feature;
+            this._showTooltip(feature, latlng);
+          } else {
+            if (this._popup) {
+              this._popup.setLatLng(latlng);
+            }
+          }
+        } else {
+          this._hidePopup();
+          this.currentFeature = null;
         }
       }
     }

From be2cb4b994eb0be618718d411d9cd6e5cb22fa9e Mon Sep 17 00:00:00 2001
From: Brandon Kobel <brandon.kobel@gmail.com>
Date: Mon, 20 Mar 2017 09:06:12 -0400
Subject: [PATCH 111/150] Moving handlebars from a devDependency to a
 dependency (#10801)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a0214b6394aba..401a5c8d9b59b 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,7 @@
     "good-squeeze": "2.1.0",
     "gridster": "0.5.6",
     "h2o2": "5.1.1",
+    "handlebars": "4.0.5",
     "hapi": "14.2.0",
     "imports-loader": "0.6.4",
     "inert": "4.0.2",
@@ -225,7 +226,6 @@
     "grunt-run": "0.6.0",
     "grunt-simple-mocha": "0.4.0",
     "gulp-sourcemaps": "1.7.3",
-    "handlebars": "4.0.5",
     "highlight.js": "9.0.0",
     "history": "2.1.1",
     "html-loader": "0.4.3",

From 5e7b4712690ed7fd3039e989543fd7c77f9013f3 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Mon, 20 Mar 2017 09:17:28 -0700
Subject: [PATCH 112/150] Fixes for resize bug that showed up in demo (#10750)

---
 .../public/visualizations/components/gauge.js | 138 +++++++-----------
 .../visualizations/components/gauge_vis.js    |  75 +++-------
 .../visualizations/components/metric.js       |  77 +++-------
 .../visualizations/components/resize.js       |   4 +-
 .../visualizations/lib/calc_dimensions.js     |   5 +
 .../lib/calculate_corrdinates.js              |  38 +++++
 6 files changed, 133 insertions(+), 204 deletions(-)
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/calc_dimensions.js
 create mode 100644 src/core_plugins/metrics/public/visualizations/lib/calculate_corrdinates.js

diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge.js b/src/core_plugins/metrics/public/visualizations/components/gauge.js
index d91017e5227dc..a30e52c426096 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge.js
@@ -6,8 +6,8 @@ import getLastValue from '../lib/get_last_value';
 import getValueBy from '../lib/get_value_by';
 import Resize from './resize';
 import GaugeVis from './gauge_vis';
-import { findDOMNode } from 'react-dom';
 import reactcss from 'reactcss';
+import calculateCorrdinates from '../lib/calculate_corrdinates';
 
 class Gauge extends Component {
 
@@ -24,68 +24,31 @@ class Gauge extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  calculateCorrdinates() {
-    const inner = findDOMNode(this.inner);
-    const resize = findDOMNode(this.resize);
-    let scale = this.state.scale;
-
-    if (!inner || !resize) return;
-
-    // Let's start by scaling to the largest dimension
-    if (resize.clientWidth - resize.clientHeight < 0) {
-      scale = resize.clientWidth / inner.clientWidth;
-    } else {
-      scale = resize.clientHeight / inner.clientHeight;
-    }
-    let [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
-
-    // Now we need to check to see if it will still fit
-    if (newWidth > resize.clientWidth) {
-      scale = resize.clientWidth / inner.clientWidth;
-    }
-    if (newHeight > resize.clientHeight) {
-      scale = resize.clientHeight / inner.clientHeight;
-    }
-
-    // Calculate the final dimensions
-    [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
-
-    // Because scale is middle out we need to translate
-    // the new X,Y corrdinates
-    const translateX = (newWidth - inner.clientWidth) / 2;
-    const translateY = (newHeight - inner.clientHeight) / 2;
-
-    // Center up and down
-    const top = Math.floor((resize.clientHeight - newHeight) / 2);
-    const left = Math.floor((resize.clientWidth - newWidth) / 2);
+  componentWillMount() {
+    const check = () => {
+      this.timeout = setTimeout(() => {
+        const newState = calculateCorrdinates(this.inner, this.resize, this.state);
+        if (newState && this.state && !_.isEqual(newState, this.state)) {
+          this.handleResize();
+        }
+        check();
+      }, 500);
+    };
+    check();
+  }
 
-    return { scale, top, left, translateY, translateX };
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
   }
 
   componentDidMount() {
     this.handleResize();
   }
 
-  // When the component updates it might need to be resized so we need to
-  // recalculate the corrdinates and only update if things changed a little. THis
-  // happens when the number is too wide or you add a new series.
-  componentDidUpdate() {
-    const newState = this.calculateCorrdinates();
-    if (newState && !_.isEqual(newState, this.state)) {
-      this.setState(newState);
-    }
-  }
-
-  calcDimensions(el, scale) {
-    const newWidth = Math.floor(el.clientWidth * scale);
-    const newHeight = Math.floor(el.clientHeight * scale);
-    return [newWidth, newHeight];
-  }
-
   handleResize() {
     // Bingo!
-    const newState = this.calculateCorrdinates();
-    newState && this.setState(newState);
+    const newState = calculateCorrdinates(this.inner, this.resize, this.state);
+    this.setState(newState);
   }
 
   render() {
@@ -122,50 +85,47 @@ class Gauge extends Component {
     }
 
     let metrics;
-    if (metric) {
-      if (type === 'half') {
-        metrics = (
+    if (type === 'half') {
+      metrics = (
+        <div
+          className="thorHalfGauge__metrics"
+          ref={(el) => this.inner = el}
+          style={styles.inner}>
           <div
-            className="thorHalfGauge__metrics"
-            ref={(el) => this.inner = el}
-            style={styles.inner}>
-            <div
-              className="thorHalfGauge__label"
-              ref="title">{ title }</div>
-            <div
-              className="thorHalfGauge__value"
-              style={valueStyle}
-              ref="label">{ formatter(value) }</div>
-          </div>
-        );
-      } else {
-        metrics = (
+            className="thorHalfGauge__label"
+            ref="title">{ title }</div>
           <div
-            className="thorCircleGauge__metrics"
-            ref="inner"
-            style={styles.inner}>
-            <div
-              className="thorCircleGauge__value"
-              style={valueStyle}
-              ref="label">{ formatter(value) }</div>
-            <div
-              className="thorCircleGauge__label"
-              ref="title">{ title }</div>
-          </div>
-        );
-      }
+            className="thorHalfGauge__value"
+            style={valueStyle}
+            ref="label">{ formatter(value) }</div>
+        </div>
+      );
+    } else {
+      metrics = (
+        <div
+          className="thorCircleGauge__metrics"
+          ref={(el) => this.inner = el}
+          style={styles.inner}>
+          <div
+            className="thorCircleGauge__value"
+            style={valueStyle}
+            ref="label">{ formatter(value) }</div>
+          <div
+            className="thorCircleGauge__label"
+            ref="title">{ title }</div>
+        </div>
+      );
     }
     let className = type === 'half' ? 'thorHalfGauge' : 'thorCircleGauge';
     if (this.props.reversed) className = `reversed ${className}`;
     return (
       <div className={className}>
-        <Resize
-          onResize={this.handleResize}
-          className={`${className}__resize`}
-          ref={(el) => this.resize = el}>
+        <div
+          ref={(el) => this.resize = el}
+          className={`${className}__resize`}>
           { metrics }
           <GaugeVis {...gaugeProps}/>
-        </Resize>
+        </div>
       </div>
     );
   }
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
index 3582537607f16..876c387d4620b 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
@@ -1,9 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import $ from '../lib/flot';
-import Resize from './resize';
 import _ from 'lodash';
-import { findDOMNode } from 'react-dom';
 import reactcss from 'reactcss';
+import calculateCorrdinates from '../lib/calculate_corrdinates';
 
 class GaugeVis extends Component {
 
@@ -19,66 +18,31 @@ class GaugeVis extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  calculateCorrdinates() {
-    const inner = findDOMNode(this.inner);
-    const resize = findDOMNode(this.resize);
-    let scale = this.state.scale;
-
-    // Let's start by scaling to the largest dimension
-    if (resize.clientWidth - resize.clientHeight < 0) {
-      scale = resize.clientWidth / inner.clientWidth;
-    } else {
-      scale = resize.clientHeight / inner.clientHeight;
-    }
-    let [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
-
-    // Now we need to check to see if it will still fit
-    if (newWidth > resize.clientWidth) {
-      scale = resize.clientWidth / inner.clientWidth;
-    }
-    if (newHeight > resize.clientHeight) {
-      scale = resize.clientHeight / inner.clientHeight;
-    }
-
-    // Calculate the final dimensions
-    [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
-
-    // Because scale is middle out we need to translate
-    // the new X,Y corrdinates
-    const translateX = (newWidth - inner.clientWidth) / 2;
-    const translateY = (newHeight - inner.clientHeight) / 2;
-
-    // Center up and down
-    const top = Math.floor((resize.clientHeight - newHeight) / 2);
-    const left = Math.floor((resize.clientWidth - newWidth) / 2);
+  componentWillMount() {
+    const check = () => {
+      this.timeout = setTimeout(() => {
+        const newState = calculateCorrdinates(this.inner, this.resize, this.state);
+        if (newState && this.state && !_.isEqual(newState, this.state)) {
+          this.handleResize();
+        }
+        check();
+      }, 500);
+    };
+    check();
+  }
 
-    return { scale, top, left, translateY, translateX };
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
   }
 
   componentDidMount() {
     this.handleResize();
   }
 
-  // When the component updates it might need to be resized so we need to
-  // recalculate the corrdinates and only update if things changed a little. THis
-  // happens when the number is too wide or you add a new series.
-  componentDidUpdate() {
-    const newState = this.calculateCorrdinates();
-    if (newState && !_.isEqual(newState, this.state)) {
-      this.setState(newState);
-    }
-  }
-
-  calcDimensions(el, scale) {
-    const newWidth = Math.floor(el.clientWidth * scale);
-    const newHeight = Math.floor(el.clientHeight * scale);
-    return [newWidth, newHeight];
-  }
-
   handleResize() {
     // Bingo!
-    const newState = this.calculateCorrdinates();
-    newState && this.setState(newState);
+    const newState = calculateCorrdinates(this.inner, this.resize, this.state);
+    this.setState(newState);
   }
 
   render() {
@@ -153,14 +117,13 @@ class GaugeVis extends Component {
       );
     }
     return (
-      <Resize
-        onResize={this.handleResize}
+      <div
         ref={(el) => this.resize = el}
         style={styles.resize}>
         <div style={styles.svg} ref={(el) => this.inner = el}>
           {svg}
         </div>
-      </Resize>
+      </div>
     );
   }
 
diff --git a/src/core_plugins/metrics/public/visualizations/components/metric.js b/src/core_plugins/metrics/public/visualizations/components/metric.js
index 0e0a1db352145..55fa32c9912bf 100644
--- a/src/core_plugins/metrics/public/visualizations/components/metric.js
+++ b/src/core_plugins/metrics/public/visualizations/components/metric.js
@@ -1,9 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import _ from 'lodash';
-import { findDOMNode } from 'react-dom';
 import getLastValue from '../lib/get_last_value';
-import Resize from './resize';
 import reactcss from 'reactcss';
+import calculateCorrdinates from '../lib/calculate_corrdinates';
 
 class Metric extends Component {
 
@@ -19,67 +18,30 @@ class Metric extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  componentDidMount() {
-    this.handleResize();
-  }
-
-  calculateCorrdinates() {
-    const inner = findDOMNode(this.inner);
-    const resize = findDOMNode(this.resize);
-    let scale = this.state.scale;
-
-    if (!resize) return;
-
-    // Let's start by scaling to the largest dimension
-    if (resize.clientWidth - resize.clientHeight < 0) {
-      scale = resize.clientWidth / inner.clientWidth;
-    } else {
-      scale = resize.clientHeight / inner.clientHeight;
-    }
-    let [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
-
-    // Now we need to check to see if it will still fit
-    if (newWidth > resize.clientWidth) {
-      scale = resize.clientWidth / inner.clientWidth;
-    }
-    if (newHeight > resize.clientHeight) {
-      scale = resize.clientHeight / inner.clientHeight;
-    }
-
-    // Calculate the final dimensions
-    [ newWidth, newHeight ] = this.calcDimensions(inner, scale);
-
-    // Because scale is middle out we need to translate
-    // the new X,Y corrdinates
-    const translateX = (newWidth - inner.clientWidth) / 2;
-    const translateY = (newHeight - inner.clientHeight) / 2;
-
-    // Center up and down
-    const top = Math.floor((resize.clientHeight - newHeight) / 2);
-    const left = Math.floor((resize.clientWidth - newWidth) / 2);
-
-    return { scale, top, left, translateY, translateX };
+  componentWillMount() {
+    const check = () => {
+      this.timeout = setTimeout(() => {
+        const newState = calculateCorrdinates(this.inner, this.resize, this.state);
+        if (newState && this.state && !_.isEqual(newState, this.state)) {
+          this.handleResize();
+        }
+        check();
+      }, 500);
+    };
+    check();
   }
 
-  // When the component updates it might need to be resized so we need to
-  // recalculate the corrdinates and only update if things changed a little. THis
-  // happens when the number is too wide or you add a new series.
-  componentDidUpdate() {
-    const newState = this.calculateCorrdinates();
-    if (!_.isEqual(newState, this.state)) {
-      this.setState(newState);
-    }
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
   }
 
-  calcDimensions(el, scale) {
-    const newWidth = Math.floor(el.clientWidth * scale);
-    const newHeight = Math.floor(el.clientHeight * scale);
-    return [newWidth, newHeight];
+  componentDidMount() {
+    this.handleResize();
   }
 
   handleResize() {
     // Bingo!
-    const newState = this.calculateCorrdinates();
+    const newState = calculateCorrdinates(this.inner, this.resize, this.state);
     this.setState(newState);
   }
 
@@ -152,8 +114,7 @@ class Metric extends Component {
 
     return (
       <div className="rhythm_metric" style={styles.container}>
-        <Resize
-          onResize={this.handleResize}
+        <div
           ref={(el) => this.resize = el}
           className="rhythm_metric__resize">
           <div ref={(el) => this.inner = el} className="rhythm_metric__inner" style={styles.inner}>
@@ -163,7 +124,7 @@ class Metric extends Component {
             </div>
             { secondarySnippet }
           </div>
-        </Resize>
+        </div>
       </div>
     );
   }
diff --git a/src/core_plugins/metrics/public/visualizations/components/resize.js b/src/core_plugins/metrics/public/visualizations/components/resize.js
index e43c59a82a8e9..618b795ba4165 100644
--- a/src/core_plugins/metrics/public/visualizations/components/resize.js
+++ b/src/core_plugins/metrics/public/visualizations/components/resize.js
@@ -10,15 +10,17 @@ class Resize extends Component {
 
   checkSize() {
     const el = findDOMNode(this.el);
+    if (!el) return;
     this.timeout = setTimeout(() => {
       const { currentHeight, currentWidth } = this.state;
-      if (currentHeight !== el.clientHeight || currentWidth !== el.clientWidth) {
+      if (currentHeight !== el.parentNode.clientHeight || currentWidth !== el.parentNode.clientWidth) {
         this.setState({
           currentWidth: el.parentNode.clientWidth,
           currentHeight: el.parentNode.clientHeight
         });
         this.handleResize();
       }
+      clearTimeout(this.timeout);
       this.checkSize();
     }, this.props.frequency);
   }
diff --git a/src/core_plugins/metrics/public/visualizations/lib/calc_dimensions.js b/src/core_plugins/metrics/public/visualizations/lib/calc_dimensions.js
new file mode 100644
index 0000000000000..f038c882c8f0a
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/calc_dimensions.js
@@ -0,0 +1,5 @@
+export default function calcDimensions(el, scale) {
+  const newWidth = Math.floor(el.clientWidth * scale);
+  const newHeight = Math.floor(el.clientHeight * scale);
+  return [newWidth, newHeight];
+}
diff --git a/src/core_plugins/metrics/public/visualizations/lib/calculate_corrdinates.js b/src/core_plugins/metrics/public/visualizations/lib/calculate_corrdinates.js
new file mode 100644
index 0000000000000..cfe0d8c3fcc31
--- /dev/null
+++ b/src/core_plugins/metrics/public/visualizations/lib/calculate_corrdinates.js
@@ -0,0 +1,38 @@
+import { findDOMNode } from 'react-dom';
+import calcDimensions from './calc_dimensions';
+export default function calculateCorrdinates(innerRef, resizeRef, state) {
+  const inner = findDOMNode(innerRef);
+  const resize = findDOMNode(resizeRef);
+  let scale = state.scale;
+
+  // Let's start by scaling to the largest dimension
+  if (resize.clientWidth - resize.clientHeight < 0) {
+    scale = resize.clientWidth / inner.clientWidth;
+  } else {
+    scale = resize.clientHeight / inner.clientHeight;
+  }
+  let [ newWidth, newHeight ] = calcDimensions(inner, scale);
+
+  // Now we need to check to see if it will still fit
+  if (newWidth > resize.clientWidth) {
+    scale = resize.clientWidth / inner.clientWidth;
+  }
+  if (newHeight > resize.clientHeight) {
+    scale = resize.clientHeight / inner.clientHeight;
+  }
+
+  // Calculate the final dimensions
+  [ newWidth, newHeight ] = calcDimensions(inner, scale);
+
+  // Because scale is middle out we need to translate
+  // the new X,Y corrdinates
+  const translateX = (newWidth - inner.clientWidth) / 2;
+  const translateY = (newHeight - inner.clientHeight) / 2;
+
+  // Center up and down
+  const top = Math.floor((resize.clientHeight - newHeight) / 2);
+  const left = Math.floor((resize.clientWidth - newWidth) / 2);
+
+  return { scale, top, left, translateY, translateX };
+
+}

From d22861f3ecadfaab79eaf6397569abdbc39274b9 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Mon, 20 Mar 2017 09:17:58 -0700
Subject: [PATCH 113/150] UI Tweaks for Time Series Visual Builder (#10739)

* A few UI tweaks for Time Series series config

* fixing number inputs for color rules and fixing picker
---
 .../metrics/public/components/color_picker.js    |  2 +-
 .../metrics/public/components/color_rules.js     |  5 +++--
 .../public/components/lib/new_series_fn.js       |  2 +-
 .../components/vis_types/timeseries/config.js    | 16 +++++++++-------
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/core_plugins/metrics/public/components/color_picker.js b/src/core_plugins/metrics/public/components/color_picker.js
index 81b9ca854da60..9694b63a55f8d 100644
--- a/src/core_plugins/metrics/public/components/color_picker.js
+++ b/src/core_plugins/metrics/public/components/color_picker.js
@@ -87,7 +87,7 @@ class ColorPicker extends Component {
 
 ColorPicker.propTypes = {
   name: PropTypes.string.isRequired,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   disableTrash: PropTypes.bool,
   onChange: PropTypes.func
 };
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
index 8ab4e0d058ef3..9bd7d4b505873 100644
--- a/src/core_plugins/metrics/public/components/color_rules.js
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -18,12 +18,13 @@ class ColorRules extends Component {
       const part = {};
       part[name] = cast(_.get(e, 'value', _.get(e, 'target.value')));
       if (part[name] === 'undefined') part[name] = undefined;
+      if (part[name] === NaN) part[name] = undefined;
       handleChange(_.assign({}, item, part));
     };
   }
 
   renderRow(row, i, items) {
-    const defaults = { value: '' };
+    const defaults = { value: 0 };
     const model = { ...defaults, ...row };
     const handleAdd = collectionActions.handleAdd.bind(null, this.props);
     const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
@@ -66,7 +67,7 @@ class ColorRules extends Component {
         </div>
         <input
           className="color_rules__input"
-          type="text"
+          type="number"
           value={model.value}
           onChange={this.handleChange(model, 'value', Number)}/>
         <div className="color_rules__control">
diff --git a/src/core_plugins/metrics/public/components/lib/new_series_fn.js b/src/core_plugins/metrics/public/components/lib/new_series_fn.js
index bd1ffa62af978..ef8292b6736ee 100644
--- a/src/core_plugins/metrics/public/components/lib/new_series_fn.js
+++ b/src/core_plugins/metrics/public/components/lib/new_series_fn.js
@@ -13,7 +13,7 @@ export default (obj = {}) => {
     chart_type: 'line',
     line_width: 1,
     point_size: 1,
-    fill: 0,
+    fill: 0.5,
     stacked: 'none'
   }, obj);
 };
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
index 35b6a07df9c6a..60ccfdc933ec4 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -68,19 +68,20 @@ function TimeseriesConfig(props) {
         <div className="vis_editor__label">Fill (0 to 1)</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
+          step="0.1"
           onChange={handleTextChange('fill')}
           value={model.fill}/>
         <div className="vis_editor__label">Line Width</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
           onChange={handleTextChange('line_width')}
           value={model.line_width}/>
         <div className="vis_editor__label">Point Size</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
           onChange={handleTextChange('point_size')}
           value={model.point_size}/>
         <div className="vis_editor__label">Steps</div>
@@ -113,13 +114,14 @@ function TimeseriesConfig(props) {
         <div className="vis_editor__label">Fill (0 to 1)</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
+          step="0.5"
           onChange={handleTextChange('fill')}
           value={model.fill}/>
         <div className="vis_editor__label">Line Width</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
           onChange={handleTextChange('line_width')}
           value={model.line_width}/>
       </div>
@@ -172,14 +174,14 @@ function TimeseriesConfig(props) {
           <div className="vis_editor__label">Axis Min</div>
           <input
             className="vis_editor__input-grows"
-            type="text"
+            type="number"
             disabled={disableSeperateYaxis}
             onChange={handleTextChange('axis_min')}
             value={model.axis_min}/>
           <div className="vis_editor__label">Axis Max</div>
           <input
             className="vis_editor__input-grows"
-            type="text"
+            type="number"
             disabled={disableSeperateYaxis}
             onChange={handleTextChange('axis_max')}
             value={model.axis_max}/>

From 3aa5938daaefc30e21bdd18d1ce2263923cfe12a Mon Sep 17 00:00:00 2001
From: Martin Hickey <martin.hickey@ie.ibm.com>
Date: Mon, 20 Mar 2017 18:09:06 +0000
Subject: [PATCH 114/150] Kibana Globalization - Phase 2 (#8766)

* Integrate angular-translate globalization framework with i18n engine
* Provide template for enabling translations in an AngularJS view by translating a view
* Verification tool for translation keys used in angular-translate
* Documentation
---
 .../development-internationalization.asciidoc | 187 ++++++++++++++++++
 package.json                                  |   2 +
 .../management/sections/indices/_create.html  |  96 ++++-----
 .../management/sections/indices/_create.js    |  18 +-
 .../management/sections/indices/index.html    |  10 +-
 src/core_plugins/kibana/translations/en.json  |  54 ++++-
 src/ui/index.js                               |   2 +
 src/ui/public/chrome/api/translations.js      |  15 ++
 src/ui/public/chrome/chrome.js                |   2 +
 src/ui/public/debounce/__tests__/debounce.js  |   3 +
 src/ui/ui_i18n.js                             |   4 +-
 tasks/build/verify_translations.js            |  39 +++-
 tasks/config/i18nextract.js                   |   9 +
 tasks/utils/i18n_verify_keys.js               |  11 +-
 webpackShims/angular.js                       |   3 +-
 webpackShims/ui-bootstrap.js                  |  10 +-
 16 files changed, 380 insertions(+), 85 deletions(-)
 create mode 100644 docs/development/plugin/development-internationalization.asciidoc
 create mode 100644 src/ui/public/chrome/api/translations.js
 create mode 100644 tasks/config/i18nextract.js

diff --git a/docs/development/plugin/development-internationalization.asciidoc b/docs/development/plugin/development-internationalization.asciidoc
new file mode 100644
index 0000000000000..2550187828838
--- /dev/null
+++ b/docs/development/plugin/development-internationalization.asciidoc
@@ -0,0 +1,187 @@
+[[translating-kibana]]
+Translating Kibana
+------------------
+
+[[background]]
+Background
+~~~~~~~~~
+
+Please see https://github.com/elastic/kibana/issues/6515[kibana#6515]
+for background discussion on the Kibana translation work.
+
+[[prerequisites]]
+Prerequisites
+~~~~~~~~~~~~
+
+Kibana must be installed and operational, see README.md
+
+[[audience]]
+Audience
+~~~~~~~
+
+There are three audiences for this document:
+
+* those that want to contribute language packs to Kibana
+* those that want to enable translations in existing Kibana plugins
+* those that want to create a new Kibana Plugin
+
+[[contributing-language-packs]]
+Contributing Language Packs
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+For this example, we will demonstrate translation into Maltese (Language
+code `mt`). Add-on functionality for Kibana is implemented with plug-in modules.
+Refer to
+https://www.elastic.co/guide/en/kibana/current/kibana-plugins.html[Kibana
+Plugins] for more details.
+
+* Fork the `kibana` source, and ensure you have an up to date copy of
+the source.
+* Ensure you have signed the agreement as in CONTRIBUTING.md
+* Choose the right link:[bcp47] language code for your work. In this
+example, we will use the `kibana` plugin for translating and `mt` for
+Maltese. Other examples might be `zh-Hans` for Chinese using Simplified
+characters, or `az-Cyrl` for Azerbaijani using Cyrillic characters. The
+following links can help:
+* https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes[List of ISO
+639-1 codes]
+*
+http://cldr.unicode.org/index/cldr-spec/picking-the-right-language-code[“Picking
+the right language code”]
+* Create a new branch for your work:
++
+git checkout -b translate-mt
+* For each translation scope (see link:#Enabling%20Translations%20on%20Existing%20Plugins[Enabling Translations on Existing Plugins], below), generate a Kibana plugin with name _plugin_-_languagecode_ using the https://github.com/elastic/generator-kibana-plugin[Kibana Plugin Yeoman Generator]:
++
+* Replace the the `es.json` translation file with _languagecode_`.json`:
+`mv src/plugins/kibana-mt/translations/es.json src/plugins/kibana-mt/translations/mt.json`
+* Translate the `mt.json` file in a JSON editor
+* Edit index file (`kibana-mt/index.js`), updating the
+'translations' item in 'uiExports' as per your plugin translation file(s)
+* Copy translations plugin (`kibana-mt/`) to the Kibana plugins (`<kibana_root>/plugins`) directory
+* Start up Kibana and verify the translation works as expected
+* Ensure Kibana tests pass
+* Commit the `kibana-mt` directory and files, and push them to your own
+fork of `kibana`
+* Open a pull request titled `Translation: Maltese (mt)`
+
+[[enabling-ranslations-on-existing-plugins]]
+Enabling Translations on Existing Plugins
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Kibana translates according to plugin scope, so there is a `.json` file
+in `translations` subdirectory for each plugin.
+
+[[enabling-translation-of-an-angular-view]]
+Enabling Translation of an Angular view
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+* Determine which views share a plugin scope. In this example, `create`
+and `edit` will share scope.
+* If it does not already exist, Create the appropriate `translation`
+directory and the new translation file `en.json` inside it. In the above
+example, it would be: `src/core_plugins/kibana/translations/en.json`
+* If it does not exist add 'translations' item to the 'uiExports' in the plugin creation (`src/core_plugins/kibana/translations/en.json`) as follows:
+-------------------------------------------------------------------------
+uiExports {
+  translations: [ 
+    resolve(__dirname, './translations/en.json')
+  ], ….
+}
+-------------------------------------------------------------------------
+
+* In the view (HTML) file, such as
+`src/core_plugins/kibana/public/management/sections/indices/_create.html`
+Replace English text with translation keys, and copy the English text
+into the `en.json` file appropriately. Note that loose text was put into
+a `<p></p>` tag for translation purposes. Also note the prefix `KIBANA-`
+matching the plugin being translated.
+
+[[before]]
+Before
+++++++
+
+`_create.html`
+
+-----------------------------------------------------------------------------------------------------
+    <h1>Configure an index pattern</h1>
+    In order to use Kibana you must configure at least one index pattern…
+
+    <kbn-info info="This field will be used to filter events with the global time filter"></kbn-info> 
+-----------------------------------------------------------------------------------------------------
+
+[[after]]
+After
++++++
+
+`_create.html`
+
+-------------------------------------------------------------------------------------------
+    <h1 translate="KIBANA-CONFIGURE_INDEX_PATTERN"</h1>
+    <p translate="KIBANA-MUST_CONFIGURE_INDEX_PATTERN"</p>
+
+    <kbn-info info="{{ 'KIBANA-FIELD_FILTER_EVENTS_GLOBAL_TIME' | translate }}"></kbn-info>
+-------------------------------------------------------------------------------------------
+
+* In the view (JS) file, such as
+`src/core_plugins/kibana/public/management/sections/indices/_create.js`
+As above, replace English text with translation keys, and copy the English text
+into the `en.json` file appropriately. Note that some strings may not be user facing
+and do not need to be replaced then. Also note the prefix `KIBANA-` matching the plugin
+being translated.
+
+[[before]]
+Before
+++++++
+
+`_create.js`
+
+--------------------------------------------------------------------------------------------------------------
+    notify.error('Could not locate any indices matching that pattern. Please add the index to Elasticsearch');
+--------------------------------------------------------------------------------------------------------------
+
+[[after]]
+After
++++++
+
+`_create.js`
+
+-------------------------------------------------------------------------------------------
+    notify.error($translate.instant('KIBANA-NO_INDICES_MATCHING_PATTERN'));
+-------------------------------------------------------------------------------------------
+
+`en.json`
+
+-----------------------------------------------------------------------------------------------------------------------------------------
+    {
+       "KIBANA-CONFIGURE_INDEX_PATTERN": "Configure an index pattern",
+       "KIBANA-MUST_CONFIGURE_INDEX_PATTERN": "In order to use Kibana you must…",
+       "KIBANA-FIELD_FILTER_EVENTS_GLOBAL_TIME" : "This field will be used to filter events with the global time filter",
+       "KIBANA-NO_INDICES_MATCHING_PATTERN": "Could not locate any indices matching that pattern. Please add the index to Elasticsearch",
+    }
+-----------------------------------------------------------------------------------------------------------------------------------------
+
+* Refresh the Kibana page and verify the UI looks the same.
+* Refer to Kibana core plugin (`src/core_plugins/kibana/`) for examples.
+
+[[new-plugin-authors]]
+New Plugin Authors
+~~~~~~~~~~~~~~~~~
+
+Add-on functionality for Kibana is implemented with plug-in modules.
+Refer to
+https://www.elastic.co/guide/en/kibana/current/kibana-plugins.html[Kibana
+Plugins] for more details. It is recommended that when creating a plugin
+you enable translations (see link:#Enabling%20Translations%20on%20Existing%20Plugins[Enabling Translations on Existing Plugins], above).
+
+[[enabling-translation-in-a-plugin]]
+Enabling Translation in a New Plugin
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+* Generate a Kibana plugin using the https://github.com/elastic/generator-kibana-plugin[Kibana Plugin Yeoman Generator]. In this
+example, `plugin1`
+* Add the translation IDs to the views
+* Add the corresponding translation IDs and text to the default translation file (`translations/en.json`)
+* Refer to link:#Enabling%20Translations%20on%20Existing%20Plugins[Enabling Translations on Existing Plugins] for more
+details on enabling translation in your plugin views and refer to Kibana
+core plugin (`src/core_plugins/kibana/`) for an example.
diff --git a/package.json b/package.json
index 401a5c8d9b59b..cc319058a07ff 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,7 @@
     "angular-route": "1.4.7",
     "angular-sanitize": "1.5.7",
     "angular-sortable-view": "0.0.15",
+    "angular-translate": "2.13.1",
     "ansicolors": "0.3.2",
     "autoprefixer": "6.5.4",
     "autoprefixer-loader": "2.0.0",
@@ -216,6 +217,7 @@
     "expect.js": "0.3.1",
     "faker": "1.1.0",
     "grunt": "1.0.1",
+    "grunt-angular-translate": "0.3.0",
     "grunt-aws-s3": "0.14.5",
     "grunt-babel": "6.0.0",
     "grunt-cli": "0.1.13",
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_create.html b/src/core_plugins/kibana/public/management/sections/indices/_create.html
index 9a6aa3a8bb05a..6a63343f8d532 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_create.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/_create.html
@@ -2,20 +2,16 @@
   <kbn-management-indices>
     <div ng-controller="managementIndicesCreate" class="kbn-management-indices-create">
       <div class="page-header">
-        <h1>Configure an index pattern</h1>
-        In order to use Kibana you must configure at least one index pattern. Index patterns are
-        used to identify the Elasticsearch index to run search and analytics against. They are also
-        used to configure fields.
+        <h1 translate="KIBANA-CONFIGURE_INDEX_PATTERN"></h1>
+        <p translate="KIBANA-MUST_CONFIGURE_INDEX_PATTERN"></p>
       </div>
       <div>
         <form name="form" role="form" class="well" ng-submit="createIndexPattern()">
           <div class="form-group">
-            <label>
-              Index name or pattern
-            </label>
-            <p class="help-block" ng-if="!index.nameIsPattern">Patterns allow you to define dynamic index names using * as a wildcard. Example: logstash-*</p>
-            <p class="help-block" ng-if="index.isTimeBased && index.nameIsPattern">Patterns allow you to define dynamic index names. Static text in an index name is denoted using brackets. Example: [logstash-]YYYY.MM.DD. Please note that weeks are setup to use ISO weeks which start on Monday. &mdash;
-              <small><a target="_blank" href="http://momentjs.com/docs/#/displaying/format/">Date Format Documentation</a></small></p>
+            <label translate="KIBANA-INDEX_NAME_OR_PATTERN"></label>
+            <p class="help-block" ng-if="!index.nameIsPattern" translate="KIBANA-WILDCARD_DYNAMIC_INDEX_PATTERNS"></p>
+            <p class="help-block" ng-if="index.isTimeBased && index.nameIsPattern"><span translate="KIBANA-STATIC_TEXT_IN_DYNAMIC_INDEX_PATTERNS"></span> &mdash;
+              <small><a target="_blank" href="http://momentjs.com/docs/#/displaying/format/" translate="KIBANA-DATE_FORMAT_DOCS"></a></small></p>
             <input
               ng-model="index.name"
               ng-attr-placeholder="{{index.defaultName}}"
@@ -27,9 +23,10 @@ <h1>Configure an index pattern</h1>
               type="text"
               class="form-control">
               <small ng-show="index.nameInterval.name == 'weeks'">
-                <strong>Note: </strong>
-                I noticed you're using weekly indices. Kibana requires ISO weeks be used in your index creation.
-                See <a href="https://en.wikipedia.org/wiki/ISO_week_date" target="_blank" title="Wikipedia: ISO Week Date">Wikipedia: ISO Week Date</a>
+                <strong translate="KIBANA-NOTE_COLON"></strong>&nbsp;
+                <span translate="KIBANA-WEEKLY_ISO_NOTICE"></span>
+                <span translate="KIBANA-SEE"></span>
+                <a href="https://en.wikipedia.org/wiki/ISO_week_date" target="_blank" title="Wikipedia: ISO Week Date" translate="KIBANA-WIKI_ISO_WEEK_DATE"></a>
               </small>
             </div>
 
@@ -38,18 +35,18 @@ <h1>Configure an index pattern</h1>
               <input
                 ng-model="index.isTimeBased"
                 type="checkbox">
-              Index contains time-based events
+              <span translate="KIBANA-CONTAINS_TIME_BASED_EVENTS"></span>
             </label>
           </div>
 
           <div class="form-group" ng-if="index.isTimeBased">
             <label>
-              Time-field name
+              <span translate="KIBANA-TIME_FIELD_NAME"></span>
               &nbsp;
-              <kbn-info info="This field will be used to filter events with the global time filter"></kbn-info>
+              <kbn-info info="{{ 'KIBANA-FIELD_FILTER_EVENTS_GLOBAL_TIME' | translate }}"></kbn-info>
               &nbsp;
               <small>
-                <a ng-click="refreshFieldList();"> refresh fields</a>
+                <a ng-click="refreshFieldList();" translate="KIBANA-REFRESH_FIELDS"></a>
               </small>
             </label>
             <select
@@ -65,58 +62,50 @@ <h1>Configure an index pattern</h1>
           <div class="form-group" ng-if="canExpandIndices()">
             <label>
               <input ng-model="index.notExpandable" type="checkbox">
-              Do not expand index pattern when searching <small>(Not recommended)</small>
+                <span translate="KIBANA-NOT_EXPAND_INDEX_PATTERN"></span>
+                <small translate="KIBANA-NOT_RECOMMENDED"></small>
             </label>
 
             <div ng-if="index.notExpandable" class="alert alert-info">
-              This index pattern will be queried directly rather than being
-              expanded into more performant searches against individual indices.
+              <span translate="KIBANA-NOT_EXPANDABLE"></span>
 
-              Elasticsearch will receive a query against <em>{{index.name}}</em>
-              and will have to search through all matching indices regardless
-              of whether they have data that matches the current time range.
+              <span translate="KIBANA-ES_QUERY"></span>
+              <em translate="KIBANA-INDEX_NAME_VAR" translate-values="{ indexName: '{{index.name}}' }"></em>
+              <span translate="KIBANA-SEARCH_ALL_DATA"></span>
             </div>
 
-            <p class="help-block">
-              By default, searches against any time-based index pattern that
-              contains a wildcard will automatically be expanded to query only
-              the indices that contain data within the currently selected time
-              range.
-            </p>
+            <p class="help-block" translate="KIBANA-WILDCARD_DEFAULT_EXPANDED_TO_CURRENT_TIME_RANGE"></p>
 
             <p class="help-block">
-              Searching against the index pattern <em>logstash-*</em> will
-              actually query elasticsearch for the specific matching indices
-              (e.g. <em>logstash-2015.12.21</em>) that fall within the current
-              time range.
+              <span translate="KIBANA-SEARCH_AGAINST_INDEX_PATTERN"></span>
+              <em translate="KIBANA-LOGSTASH_WILDCARD"></em>
+              <span translate="KIBANA-ACTUALLY_QUERY"></span>
+              <em translate="KIBANA-EXAMPLE_TIME_RANGE"></em>
+              <span translate="KIBANA-FALL_WITHIN_CURRENT_TIME_RANGE"></span>
             </p>
           </div>
 
           <div class="form-group time-and-pattern">
             <label ng-if="index.isTimeBased">
               <input ng-model="index.nameIsPattern" type="checkbox">
-              Use event times to create index names <small>[DEPRECATED]</small>
+              <span translate="KIBANA-INDEX_NAME_CREATED_BY_EVENT_TIMES"></span>
+              <small translate="KIBANA-DEPRECATED"></small>
             </label>
           </div>
 
           <div class="form-group" ng-if="index.isTimeBased && index.nameIsPattern">
             <div class="alert alert-warning">
-              <h4>Time-interval based index patterns are deprecated!</h4>
-              <p>
-                We <strong>strongly recommend</strong> using wildcard pattern names instead of
-                time-interval based index patterns.
               </p>
+              <h4 translate="KIBANA-ALERT_INDEX_PATTERN_DEPRECATED"></h4>
               <p>
-                Kibana is now smart enough to automatically determine which
-                indices to search against within the current time range for
-                wildcard index patterns. This means that wildcard
-                index patterns now get the same performance optimizations when
-                searching within a time range as time-interval patterns.
+                <span translate="KIBANA-WE"></span>
+                <strong translate="KIBANA-STRONGLY_RECOMMEND"></strong>
+                <span translate="KIBANA-WILD_CARD_PATTERN"></span>
               </p>
             </div>
             <label>
-              Index pattern interval&nbsp;
-              <kbn-info info="The interval at which index names rotate."></kbn-info>
+              <span translate="KIBANA-INDEX_PATTERN_INTERVAL"></span>&nbsp;
+              <kbn-info info="{{ 'KIBANA-INTERVAL_INDEX_NAMES_ROTATE' | translate }}"></kbn-info>
             </label>
             <select
               required
@@ -132,17 +121,17 @@ <h4>Time-interval based index patterns are deprecated!</h4>
             </div>
 
             <div class="alert alert-info" ng-if="index.samples">
-              Attempted to match the following indices and aliases:
+              <span translate="KIBANA-SAMPLE_ALERT"></span>
               <ul>
                 <li ng-repeat="sample in index.samples">{{sample}}</li>
               </ul>
               <button type="button" ng-click="moreSamples(true)" class="btn btn-default">
-                Expand Search
+                <span translate="KIBANA-EXPAND_SEARCH"></span>
               </button>
             </div>
 
             <div class="alert alert-{{index.existing.class}}" ng-if="index.existing">
-              Pattern matches {{index.existing.matchPercent}} of existing indices and aliases
+              <span translate="KIBANA-EXISTING_MATCH_PERCENT" translate-values="{ indexExistingMatchPercent: '{{index.existing.matchPercent}}' }"></span>
               <ul>
                 <li ng-repeat="match in index.existing.matches | orderBy:'toString()'| limitTo: index.sampleCount">{{match}}</li>
               </ul>
@@ -151,12 +140,12 @@ <h4>Time-interval based index patterns are deprecated!</h4>
                 ng-click="moreSamples()"
                 type="button"
                 class="btn btn-default">
-                Expand Search
+                <span translate="KIBANA-EXPAND_SEARCH"></span>
               </button>
             </div>
 
             <div class="alert alert-info" ng-if="index.existing.failures.length">
-              Indices and aliases that were found, but did not match the pattern:
+              <span translate="KIBANA-NON_MATCHING_INDICES_AND_ALIASES"></span>
               <ul>
                 <li ng-repeat="match in index.existing.failures | limitTo: index.sampleCount">{{match}}</li>
               </ul>
@@ -164,7 +153,7 @@ <h4>Time-interval based index patterns are deprecated!</h4>
                 ng-if="index.sampleCount < index.existing.matches.length"
                 ng-click="moreSamples()"
                 class="alert-link">
-                more
+                <span translate="KIBANA-MORE"></span>
               </a>
             </div>
           </section>
@@ -175,8 +164,9 @@ <h4>Time-interval based index patterns are deprecated!</h4>
             ng-class="index.fetchFieldsError ? 'btn-default' : 'btn-success'"
             type="submit"
             class="btn">
-            <span ng-hide="form.name.$error.indexNameInput">{{index.fetchFieldsError || "Create" }}</span>
-            <span ng-show="form.name.$error.indexNameInput">Invalid index name pattern.</span>
+            <span ng-hide="form.name.$error.indexNameInput" ng-if="index.fetchFieldsError">{{index.fetchFieldsError}}</span>
+            <span ng-hide="form.name.$error.indexNameInput" ng-if="!index.fetchFieldsError" translate="KIBANA-CREATE"></span>
+            <span ng-show="form.name.$error.indexNameInput" translate="KIBANA-INVALID_INDEX_PATTERN"></span>
           </button>
         </form>
       </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/_create.js b/src/core_plugins/kibana/public/management/sections/indices/_create.js
index 0efb97ad80d73..757f3fc885030 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/_create.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/_create.js
@@ -14,7 +14,7 @@ uiRoutes
 });
 
 uiModules.get('apps/management')
-.controller('managementIndicesCreate', function ($scope, kbnUrl, Private, Notifier, indexPatterns, es, config, Promise) {
+.controller('managementIndicesCreate', function ($scope, kbnUrl, Private, Notifier, indexPatterns, es, config, Promise, $translate) {
   const notify = new Notifier();
   const refreshKibanaIndex = Private(RefreshKibanaIndex);
   const intervals = indexPatterns.intervals;
@@ -29,7 +29,7 @@ uiModules.get('apps/management')
     sampleCount: 5,
     nameIntervalOptions: intervals,
 
-    fetchFieldsError: 'Loading'
+    fetchFieldsError: $translate.instant('KIBANA-LOADING')
   };
 
   index.nameInterval = _.find(index.nameIntervalOptions, { name: 'daily' });
@@ -88,7 +88,7 @@ uiModules.get('apps/management')
     })
     .catch(function (err) {
       if (err instanceof IndexPatternMissingIndices) {
-        notify.error('Could not locate any indices matching that pattern. Please add the index to Elasticsearch');
+        notify.error($translate.instant('KIBANA-NO_INDICES_MATCHING_PATTERN'));
       }
       else notify.fatal(err);
     });
@@ -192,12 +192,12 @@ uiModules.get('apps/management')
         return;
       }
 
-      patternErrors.push('Pattern does not match any existing indices');
+      patternErrors.push($translate.instant('KIBANA-PATTERN_DOES_NOT_MATCH_EXIST_INDICES'));
       const radius = Math.round(index.sampleCount / 2);
       const samples = intervals.toIndexList(index.name, index.nameInterval, -radius, radius);
 
       if (_.uniq(samples).length !== samples.length) {
-        patternErrors.push('Invalid pattern, interval does not create unique index names');
+        patternErrors.push($translate.instant('KIBANA-INVALID_NON_UNIQUE_INDEX_NAME_CREATED'));
       } else {
         index.samples = samples;
       }
@@ -214,12 +214,12 @@ uiModules.get('apps/management')
 
     // we don't have enough info to continue
     if (!index.name) {
-      fetchFieldsError = 'Set an index name first';
+      fetchFieldsError = $translate.instant('KIBANA-SET_INDEX_NAME_FIRST');
       return;
     }
 
     if (useIndexList && !index.nameInterval) {
-      fetchFieldsError = 'Select the interval at which your indices are populated.';
+      fetchFieldsError = $translate.instant('KIBANA-INTERVAL_INDICES_POPULATED');
       return;
     }
 
@@ -231,7 +231,7 @@ uiModules.get('apps/management')
       .catch(function (err) {
         // TODO: we should probably display a message of some kind
         if (err instanceof IndexPatternMissingIndices) {
-          fetchFieldsError = 'Unable to fetch mapping. Do you have indices matching the pattern?';
+          fetchFieldsError = $translate.instant('KIBANA-INDICES_MATCH_PATTERN');
           return [];
         }
 
@@ -287,7 +287,7 @@ uiModules.get('apps/management')
     index.patternErrors = [];
     index.samples = null;
     index.existing = null;
-    index.fetchFieldsError = 'Loading';
+    index.fetchFieldsError = $translate.instant('KIBANA-LOADING');
   }
 
   function getPatternDefault(interval) {
diff --git a/src/core_plugins/kibana/public/management/sections/indices/index.html b/src/core_plugins/kibana/public/management/sections/indices/index.html
index 56c30b16e5d0d..7dbde5849a346 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/index.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/index.html
@@ -6,9 +6,10 @@ <h5>
           ng-if="editingId"
           href="#/management/kibana/index"
           class="btn btn-primary btn-xs"
-          aria-label="Add New">
-          <span class="sr-only">Add New</span>
-          <i aria-hidden="true" class="fa fa-plus"></i> Add New
+          aria-label="{{ 'KIBANA-ADD_NEW' | translate }}">
+          <span class="sr-only" translate="KIBANA-ADD_NEW"></span>
+          <i aria-hidden="true" class="fa fa-plus"></i>
+          <span class="sr-only" translate="KIBANA-ADD_NEW"></span>
         </a>
       </h5>
     </div>
@@ -17,7 +18,8 @@ <h5>
         ng-if="!defaultIndex"
         class="sidebar-item">
         <div class="sidebar-item-title full-title">
-            <span class="label label-warning">Warning</span> No default index pattern. You must select or create one to continue.
+            <span class="label label-warning" translate="KIBANA-WARNING"></span>
+            <p translate="KIBANA-NO_DEFAULT_INDEX_PATTERN"></p>
         </div>
       </li>
       <li
diff --git a/src/core_plugins/kibana/translations/en.json b/src/core_plugins/kibana/translations/en.json
index ddb7a272e1129..62f56337231e4 100644
--- a/src/core_plugins/kibana/translations/en.json
+++ b/src/core_plugins/kibana/translations/en.json
@@ -1,4 +1,56 @@
 {
   "UI-WELCOME_MESSAGE": "Loading Kibana",
-  "UI-WELCOME_ERROR": "Kibana did not load properly. Check the server output for more information."
+  "UI-WELCOME_ERROR": "Kibana did not load properly. Check the server output for more information.",
+  "KIBANA-CONFIGURE_INDEX_PATTERN": "Configure an index pattern",
+  "KIBANA-MUST_CONFIGURE_INDEX_PATTERN": "In order to use Kibana you must configure at least one index pattern. Index patterns are used to identify the Elasticsearch index to run search and analytics against. They are also used to configure fields.",
+  "KIBANA-CONTAINS_TIME_BASED_EVENTS": "Index contains time-based events",
+  "KIBANA-INDEX_NAME_CREATED_BY_EVENT_TIMES": "Use event times to create index names ",
+  "KIBANA-DEPRECATED": "[DEPRECATED]",
+  "KIBANA-ALERT_INDEX_PATTERN_DEPRECATED": "Time-interval based index patterns are deprecated!",
+  "KIBANA-WE": " We",
+  "KIBANA-STRONGLY_RECOMMEND": " strongly recommend",
+  "KIBANA-WILD_CARD_PATTERN": " using wildcard pattern names instead of time-interval based index patterns.",
+  "KIBANA-RECOMMEND_WILD_CARD_PATTERN_DETAILS": "Kibana is now smart enough to automatically determine which indices to search against within the current time range for wildcard index patterns. This means that wildcard index patterns now get the same performance optimizations when searching within a time range as time-interval patterns.",
+  "KIBANA-INDEX_PATTERN_INTERVAL": "Index pattern interval",
+  "KIBANA-INDEX_NAME_OR_PATTERN": "Index name or pattern",
+  "KIBANA-WILDCARD_DYNAMIC_INDEX_PATTERNS": "Patterns allow you to define dynamic index names using * as a wildcard. Example: logstash-*",
+  "KIBANA-STATIC_TEXT_IN_DYNAMIC_INDEX_PATTERNS": "Patterns allow you to define dynamic index names. Static text in an index name is denoted using brackets. Example: [logstash-]YYYY.MM.DD. Please note that weeks are setup to use ISO weeks which start on Monday.",
+  "KIBANA-NOTE_COLON": "Note:",
+  "KIBANA-WEEKLY_ISO_NOTICE": "I noticed you are using weekly indices. Kibana requires ISO weeks be used in your index creation.",
+  "KIBANA-NOT_EXPAND_INDEX_PATTERN": "Do not expand index pattern when searching ",
+  "KIBANA-NOT_RECOMMENDED": "(Not recommended)",
+  "KIBANA-NOT_EXPANDABLE": "This index pattern will be queried directly rather than being expanded into more performant searches against individual indices.",
+  "KIBANA-ES_QUERY": "Elasticsearch will receive a query against ",
+  "KIBANA-INDEX_NAME_VAR": "{{indexName}} ",
+  "KIBANA-SEARCH_ALL_DATA": "and will have to search through all matching indices regardless of whether they have data that matches the current time range.",
+  "KIBANA-WILDCARD_DEFAULT_EXPANDED_TO_CURRENT_TIME_RANGE": "By default, searches against any time-based index pattern that contains a wildcard will automatically be expanded to query only the indices that contain data within the currently selected time range.",
+  "KIBANA-SEARCH_AGAINST_INDEX_PATTERN": "Searching against the index pattern ",
+  "KIBANA-LOGSTASH_WILDCARD": "logstash-*",
+  "KIBANA-ACTUALLY_QUERY": " will actually query elasticsearch for the specific matching indices (e.g. ",
+  "KIBANA-EXAMPLE_TIME_RANGE": "logstash-2015.12.21",
+  "KIBANA-FALL_WITHIN_CURRENT_TIME_RANGE": ") that fall within the current time range.",
+  "KIBANA-SAMPLE_ALERT": "Attempted to match the following indices and aliases:",
+  "KIBANA-EXPAND_SEARCH": "Expand Search",
+  "KIBANA-EXISTING_MATCH_PERCENT": "Pattern matches {{indexExistingMatchPercent}} of existing indices and aliases",
+  "KIBANA-NON_MATCHING_INDICES_AND_ALIASES": "Indices and aliases that were found, but did not match the pattern:",
+  "KIBANA-MORE": "more",
+  "KIBANA-TIME_FIELD_NAME": "Time-field name",
+  "KIBANA-REFRESH_FIELDS": "refresh fields",
+  "KIBANA-INVALID_INDEX_PATTERN": "Invalid index name pattern.",
+  "KIBANA-DATE_FORMAT_DOCS": "Date Format Documentation",
+  "KIBANA-WIKI_ISO_WEEK_DATE": "Wikipedia: ISO Week Date",
+  "KIBANA-NO_INDICES_MATCHING_PATTERN": "Could not locate any indices matching that pattern. Please add the index to Elasticsearch",
+  "KIBANA-PATTERN_DOES_NOT_MATCH_EXIST_INDICES": "Pattern does not match any existing indices",
+  "KIBANA-INVALID_NON_UNIQUE_INDEX_NAME_CREATED": "Invalid pattern, interval does not create unique index names",
+  "KIBANA-FIELD_FILTER_EVENTS_GLOBAL_TIME" : "This field will be used to filter events with the global time filter",
+  "KIBANA-INTERVAL_INDEX_NAMES_ROTATE" : "The interval at which index names rotate.",
+  "KIBANA-WARNING" : "Warning",
+  "KIBANA-NO_DEFAULT_INDEX_PATTERN" : "No default index pattern. You must select or create one to continue.",
+  "KIBANA-LOADING": "Loading",
+  "KIBANA-SET_INDEX_NAME_FIRST": "Set an index name first",
+  "KIBANA-INTERVAL_INDICES_POPULATED" : "Select the interval at which your indices are populated.",
+  "KIBANA-INDICES_MATCH_PATTERN" : "Unable to fetch mapping. Do you have indices matching the pattern?",
+  "KIBANA-ADD_NEW" : "Add New",
+  "KIBANA-SEE" : "See",
+  "KIBANA-CREATE" : "Create"
 }
diff --git a/src/ui/index.js b/src/ui/index.js
index 568ba449e9a39..0de674878ed18 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -66,6 +66,7 @@ export default async (kbnServer, server, config) => {
 
   async function getKibanaPayload({ app, request, includeUserProvidedConfig }) {
     const uiSettings = server.uiSettings();
+    const translations = await uiI18n.getTranslationsForRequest(request);
 
     return {
       app: app,
@@ -76,6 +77,7 @@ export default async (kbnServer, server, config) => {
       basePath: config.get('server.basePath'),
       serverName: config.get('server.name'),
       devMode: config.get('env.dev'),
+      translations: translations,
       uiSettings: await props({
         defaults: uiSettings.getDefaults(),
         user: includeUserProvidedConfig && uiSettings.getUserProvided(request)
diff --git a/src/ui/public/chrome/api/translations.js b/src/ui/public/chrome/api/translations.js
new file mode 100644
index 0000000000000..6d8455fa84c32
--- /dev/null
+++ b/src/ui/public/chrome/api/translations.js
@@ -0,0 +1,15 @@
+module.exports = function (chrome, internals) {
+  /**
+   * ui/chrome Translations API
+   *
+   *   Translations
+   *     Returns the translations which have been loaded by the Kibana server instance
+   */
+
+  /**
+   * @return {Object} - Translations
+   */
+  chrome.getTranslations = function () {
+    return internals.translations || [];
+  };
+};
diff --git a/src/ui/public/chrome/chrome.js b/src/ui/public/chrome/chrome.js
index 394a187e38f86..ca3180881733c 100644
--- a/src/ui/public/chrome/chrome.js
+++ b/src/ui/public/chrome/chrome.js
@@ -18,6 +18,7 @@ import controlsApi from './api/controls';
 import navApi from './api/nav';
 import templateApi from './api/template';
 import themeApi from './api/theme';
+import translationsApi from './api/translations';
 import xsrfApi from './api/xsrf';
 
 const chrome = {};
@@ -43,6 +44,7 @@ angularApi(chrome, internals);
 controlsApi(chrome, internals);
 templateApi(chrome, internals);
 themeApi(chrome, internals);
+translationsApi(chrome, internals);
 
 chrome.bootstrap = function () {
   chrome.setupAngular();
diff --git a/src/ui/public/debounce/__tests__/debounce.js b/src/ui/public/debounce/__tests__/debounce.js
index 9169c76a93568..56663744168c3 100644
--- a/src/ui/public/debounce/__tests__/debounce.js
+++ b/src/ui/public/debounce/__tests__/debounce.js
@@ -15,6 +15,9 @@ function init() {
     $timeoutSpy = sinon.spy($timeout);
 
     debounce = $injector.get('debounce');
+
+    // ensure there is a clean slate before testing deferred tasks
+    $timeout.flush();
   });
 }
 
diff --git a/src/ui/ui_i18n.js b/src/ui/ui_i18n.js
index ebb062bd25bcb..0895ec1add423 100644
--- a/src/ui/ui_i18n.js
+++ b/src/ui/ui_i18n.js
@@ -38,11 +38,11 @@ export class UiI18n {
    *  do with the uiExports defined by each plugin.
    *
    *  This consumer will allow plugins to define export with the
-   *  "language" type like so:
+   *  "translations" type like so:
    *
    *    new kibana.Plugin({
    *      uiExports: {
-   *        languages: [
+   *        translations: [
    *          resolve(__dirname, './translations/es.json'),
    *        ],
    *      },
diff --git a/tasks/build/verify_translations.js b/tasks/build/verify_translations.js
index 6a84d9b21017e..50dabda300210 100644
--- a/tasks/build/verify_translations.js
+++ b/tasks/build/verify_translations.js
@@ -6,9 +6,14 @@ import KbnServer from '../../src/server/kbn_server';
 import * as i18nVerify from '../utils/i18n_verify_keys';
 
 export default function (grunt) {
-  grunt.registerTask('_build:verifyTranslations', function () {
+
+  grunt.registerTask('_build:verifyTranslations', [
+    'i18nextract',
+    '_build:check'
+  ]);
+
+  grunt.registerTask('_build:check', function () {
     const done = this.async();
-    const parsePaths = [fromRoot('/src/ui/views/*.jade')];
 
     const serverConfig = {
       env: 'production',
@@ -35,7 +40,7 @@ export default function (grunt) {
 
     const kbnServer = new KbnServer(serverConfig);
     kbnServer.ready()
-    .then(() => verifyTranslations(kbnServer.uiI18n, parsePaths))
+    .then(() => verifyTranslations(kbnServer.uiI18n))
     .then(() => kbnServer.close())
     .then(done)
     .catch((err) => {
@@ -43,14 +48,32 @@ export default function (grunt) {
       .then(() => done(err));
     });
   });
+
 }
 
-function verifyTranslations(uiI18nObj, parsePaths)
+function verifyTranslations(uiI18nObj)
 {
-  return uiI18nObj.getAllTranslations()
-  .then(function (translations) {
-    return i18nVerify.getTranslationKeys(parsePaths)
-    .then(function (translationKeys) {
+  const angularTranslations = require(fromRoot('build/i18n_extract/en.json'));
+  const translationKeys = Object.keys(angularTranslations);
+  const translationPatterns = [
+    { regEx: 'i18n\\(\'(.*)\'\\)',
+      parsePaths: [fromRoot('/src/ui/views/*.jade')] }
+  ];
+
+  const keyPromises = _.map(translationPatterns, (pattern) => {
+    return i18nVerify.getTranslationKeys(pattern.regEx, pattern.parsePaths)
+    .then(function (keys) {
+      const arrayLength = keys.length;
+      for (let i = 0; i < arrayLength; i++) {
+        translationKeys.push(keys[i]);
+      }
+    });
+  });
+
+  return Promise.all(keyPromises)
+  .then(function () {
+    return uiI18nObj.getAllTranslations()
+    .then(function (translations) {
       const keysNotTranslatedPerLocale = i18nVerify.getNonTranslatedKeys(translationKeys, translations);
       if (!_.isEmpty(keysNotTranslatedPerLocale)) {
         const str  = JSON.stringify(keysNotTranslatedPerLocale);
diff --git a/tasks/config/i18nextract.js b/tasks/config/i18nextract.js
new file mode 100644
index 0000000000000..d7b5f689381b4
--- /dev/null
+++ b/tasks/config/i18nextract.js
@@ -0,0 +1,9 @@
+export default function (grunt) {
+  return {
+    default_options: {
+      src: ['src/**/*.js', 'src/**/*.html'],
+      lang: ['en'],
+      dest: 'build/i18n_extract'
+    }
+  };
+}
diff --git a/tasks/utils/i18n_verify_keys.js b/tasks/utils/i18n_verify_keys.js
index 9e431ab578c66..d6760289a9b55 100644
--- a/tasks/utils/i18n_verify_keys.js
+++ b/tasks/utils/i18n_verify_keys.js
@@ -9,15 +9,15 @@ const globProm = Promise.promisify(glob);
 
 /**
  * Return all the translation keys found for the file pattern
+ * @param {String} translationPattern - regEx pattern for translations
  * @param {Array<String>} filesPatterns - List of file patterns to be checkd for translation keys
- * @param {Array<String>} translations - List of translations keys
  * @return {Promise} - A Promise object which will return a String Array of the translation keys
  * not translated then the Object will contain all non translated translation keys with value of file the key is from
  */
-export function getTranslationKeys(filesPatterns) {
+export function getTranslationKeys(translationPattern, filesPatterns) {
   return getFilesToVerify(filesPatterns)
   .then(function (filesToVerify) {
-    return getKeys(filesToVerify);
+    return getKeys(translationPattern, filesToVerify);
   });
 }
 
@@ -44,7 +44,7 @@ function getFilesToVerify(verifyFilesPatterns) {
 
   return Promise.map(verifyFilesPatterns, (verifyFilesPattern) => {
     const baseSearchDir = path.dirname(verifyFilesPattern);
-    const pattern = path.basename(verifyFilesPattern);
+    const pattern = path.join('**', path.basename(verifyFilesPattern));
     return globProm(pattern, { cwd: baseSearchDir, matchBase: true })
     .then(function (files) {
       for (const file of files) {
@@ -57,9 +57,8 @@ function getFilesToVerify(verifyFilesPatterns) {
   });
 }
 
-function getKeys(filesToVerify) {
+function getKeys(translationPattern, filesToVerify) {
   const translationKeys = [];
-  const translationPattern = 'i18n\\(\'(.*)\'\\)';
   const translationRegEx = new RegExp(translationPattern, 'g');
 
   const filePromises = _.map(filesToVerify, (file) => {
diff --git a/webpackShims/angular.js b/webpackShims/angular.js
index df9833dbddd6c..9cc9932944d49 100644
--- a/webpackShims/angular.js
+++ b/webpackShims/angular.js
@@ -1,7 +1,8 @@
 require('jquery');
 require('node_modules/angular/angular');
+require('node_modules/angular-translate');
 module.exports = window.angular;
 
 require('node_modules/angular-elastic/elastic');
 
-require('ui/modules').get('kibana', ['monospaced.elastic']);
+require('ui/modules').get('kibana', ['monospaced.elastic', 'pascalprecht.translate']);
diff --git a/webpackShims/ui-bootstrap.js b/webpackShims/ui-bootstrap.js
index 92ddecab13d05..9dc879b6d8506 100644
--- a/webpackShims/ui-bootstrap.js
+++ b/webpackShims/ui-bootstrap.js
@@ -1,11 +1,19 @@
 define(function (require) {
   require('angular');
   require('ui/angular-bootstrap/index');
+  const chrome = require('../src/ui/public/chrome/chrome');
 
   return require('ui/modules')
-  .get('kibana', ['ui.bootstrap'])
+  .get('kibana', ['ui.bootstrap', 'pascalprecht.translate'])
   .config(function ($tooltipProvider) {
     $tooltipProvider.setTriggers({ 'mouseenter': 'mouseleave click' });
+  })
+  .config(function ($translateProvider) {
+    $translateProvider.translations('default', chrome.getTranslations());
+    $translateProvider.preferredLanguage('default');
+    // Enable escaping of HTML
+    // issue in https://angular-translate.github.io/docs/#/guide/19_security
+    $translateProvider.useSanitizeValueStrategy('escape');
   });
 
 });

From e1dbbf8321d051592fdab503cec5a77017912dc3 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 17 Feb 2017 16:22:06 -0500
Subject: [PATCH 115/150] bootstrap

---
 src/core_plugins/choropleth/index.js          |   9 +
 src/core_plugins/choropleth/package.json      |   4 +
 .../choropleth/public/choropleth.less         |   7 +
 .../public/choropleth_controller.html         |   3 +
 .../public/choropleth_controller.js           |  98 +++
 .../choropleth/public/choropleth_vis.js       |  57 ++
 .../public/choropleth_vis_params.html         |  46 +
 .../public/choropleth_vis_params.js           |  13 +
 .../choropleth/public/vector_maps.js          |  29 +
 .../kbn_vislib_vis_types/public/tile_map.js   |  62 +-
 src/ui/public/filter_bar/put_filter.js        |  36 +
 src/ui/public/filter_bar/remove_filter.js     |  33 +
 src/ui/public/utils/zoom_to_precision.js      |  26 +
 src/ui/public/vis_maps/kibana_map.js          | 794 ++++++++++++++++++
 src/ui/public/vis_maps/lib/data.js            | 200 -----
 src/ui/public/vis_maps/lib/dispatch.js        | 315 -------
 src/ui/public/vis_maps/lib/layout.js          |  50 --
 src/ui/public/vis_maps/lib/maps_config.js     |  38 -
 .../public/vis_maps/lib/splits/map_split.js   |  52 --
 src/ui/public/vis_maps/maps.js                | 123 ---
 src/ui/public/vis_maps/maps_renderbot.js      | 227 +++--
 .../public/vis_maps/visualizations/_chart.js  |  60 --
 src/ui/public/vis_maps/visualizations/_map.js | 362 --------
 .../vis_maps/visualizations/tile_map.js       | 128 ---
 24 files changed, 1349 insertions(+), 1423 deletions(-)
 create mode 100644 src/core_plugins/choropleth/index.js
 create mode 100644 src/core_plugins/choropleth/package.json
 create mode 100644 src/core_plugins/choropleth/public/choropleth.less
 create mode 100644 src/core_plugins/choropleth/public/choropleth_controller.html
 create mode 100644 src/core_plugins/choropleth/public/choropleth_controller.js
 create mode 100644 src/core_plugins/choropleth/public/choropleth_vis.js
 create mode 100644 src/core_plugins/choropleth/public/choropleth_vis_params.html
 create mode 100644 src/core_plugins/choropleth/public/choropleth_vis_params.js
 create mode 100644 src/core_plugins/choropleth/public/vector_maps.js
 create mode 100644 src/ui/public/filter_bar/put_filter.js
 create mode 100644 src/ui/public/filter_bar/remove_filter.js
 create mode 100644 src/ui/public/utils/zoom_to_precision.js
 create mode 100644 src/ui/public/vis_maps/kibana_map.js
 delete mode 100644 src/ui/public/vis_maps/lib/data.js
 delete mode 100644 src/ui/public/vis_maps/lib/dispatch.js
 delete mode 100644 src/ui/public/vis_maps/lib/layout.js
 delete mode 100644 src/ui/public/vis_maps/lib/maps_config.js
 delete mode 100644 src/ui/public/vis_maps/lib/splits/map_split.js
 delete mode 100644 src/ui/public/vis_maps/maps.js
 delete mode 100644 src/ui/public/vis_maps/visualizations/_chart.js
 delete mode 100644 src/ui/public/vis_maps/visualizations/_map.js
 delete mode 100644 src/ui/public/vis_maps/visualizations/tile_map.js

diff --git a/src/core_plugins/choropleth/index.js b/src/core_plugins/choropleth/index.js
new file mode 100644
index 0000000000000..7647e5e4023bd
--- /dev/null
+++ b/src/core_plugins/choropleth/index.js
@@ -0,0 +1,9 @@
+export default function (kibana) {
+
+  return new kibana.Plugin({
+    uiExports: {
+      visTypes: ['plugins/choropleth/choropleth_vis']
+    }
+  });
+
+}
diff --git a/src/core_plugins/choropleth/package.json b/src/core_plugins/choropleth/package.json
new file mode 100644
index 0000000000000..749682a5fb883
--- /dev/null
+++ b/src/core_plugins/choropleth/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "choropleth",
+  "version": "kibana"
+}
diff --git a/src/core_plugins/choropleth/public/choropleth.less b/src/core_plugins/choropleth/public/choropleth.less
new file mode 100644
index 0000000000000..308f3a26c59cc
--- /dev/null
+++ b/src/core_plugins/choropleth/public/choropleth.less
@@ -0,0 +1,7 @@
+.choropleth-vis {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/core_plugins/choropleth/public/choropleth_controller.html b/src/core_plugins/choropleth/public/choropleth_controller.html
new file mode 100644
index 0000000000000..f28b5a85e5e4b
--- /dev/null
+++ b/src/core_plugins/choropleth/public/choropleth_controller.html
@@ -0,0 +1,3 @@
+<div ng-controller="KbnChoroplethController" class="choropleth-vis">
+
+</div>
diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
new file mode 100644
index 0000000000000..d5358047870df
--- /dev/null
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -0,0 +1,98 @@
+import uiModules from 'ui/modules';
+import _ from 'lodash';
+import AggConfigResult from 'ui/vis/agg_config_result';
+import KibanaMap from 'ui/vis_maps/kibana_map.js';
+import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_click_handler';
+import colorramps from 'ui/vislib/components/color/colormaps';
+
+const module = uiModules.get('kibana/choropleth', ['kibana']);
+module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings) {
+
+  const containerNode = $element[0];
+  const kibanaMap = new KibanaMap(containerNode);
+  const url = tilemapSettings.getUrl();
+  const options = tilemapSettings.getTMSOptions();
+  kibanaMap.setBaseLayer({
+    baseLayerType: 'tms',
+    options: { url, ...options }
+  });
+
+  const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
+
+  kibanaMap.on('choropleth:select', function (event) {
+    const appState = getAppState();
+    const clickHandler = filterBarClickHandler(appState);
+    const aggs = $scope.vis.aggs.getResponseAggs();
+    const aggConfigResult = new AggConfigResult(aggs[0], false, event, event);
+    clickHandler({ point: { aggConfigResult: aggConfigResult } });
+  });
+
+  $scope.$watch('esResponse', async function (response) {
+
+
+    const termAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName.segment, 'id'));
+
+    let results;
+    if (!response || !response.aggregations) {
+      results = [];
+    } else {
+      const metricsAgg = _.first($scope.vis.aggs.bySchemaName.metric);
+      const buckets = response.aggregations[termAggId].buckets;
+      results = buckets.map((bucket) => {
+        return {
+          term: bucket.key,
+          value: getValue(metricsAgg, bucket)
+        };
+      });
+    }
+
+
+
+    const options = $scope.vis.params;
+    // if (!options.selectedLayer.url || !options.selectedJoinField) {
+    //   console.log('invalid selection');//todo: fix this
+    //   return;
+    // }
+
+    if (!options.selectedJoinField) {
+      options.selectedJoinField = options.selectedLayer.fields[0];
+    }
+
+    kibanaMap.setChoroplethLayer(options.selectedLayer.url, options.selectedJoinField);
+    kibanaMap.setChoroplethMetrics(results);
+    kibanaMap.resize();
+
+  });
+
+  $scope.$watch('vis.params', (options) => {
+    if (!options.selectedJoinField) {
+      options.selectedJoinField = options.selectedLayer.fields[0];
+    }
+    kibanaMap.setChoroplethLayer(options.selectedLayer.url, options.selectedJoinField);
+    kibanaMap.setChoroplethColorRamp(colorramps[options.colorSchema]);
+    kibanaMap.resize();
+  });
+
+  $scope.$watch(getContainerSize, _.debounce(() => {
+    kibanaMap.resize();
+  }, 500, { trailing: true }), true);
+
+  function getContainerSize() {
+    return { width: $element.width(), height: $element.height() };
+  }
+
+});
+
+
+function getValue(metricsAgg, bucket) {
+  let size = metricsAgg.getValue(bucket);
+  if (typeof size !== 'number' || isNaN(size)) {
+    try {
+      size = bucket[1].values[0].value;//lift out first value (e.g. median aggregations return as array)
+    } catch (e) {
+      size = 1;//punt
+    }
+  }
+  return size;
+}
+
diff --git a/src/core_plugins/choropleth/public/choropleth_vis.js b/src/core_plugins/choropleth/public/choropleth_vis.js
new file mode 100644
index 0000000000000..5d2363ab3392e
--- /dev/null
+++ b/src/core_plugins/choropleth/public/choropleth_vis.js
@@ -0,0 +1,57 @@
+import 'plugins/choropleth/choropleth.less';
+import 'plugins/choropleth/choropleth_controller';
+import 'plugins/choropleth/choropleth_vis_params';
+import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
+import VisSchemasProvider from 'ui/vis/schemas';
+import choroplethTemplate from 'plugins/choropleth/choropleth_controller.html';
+import visTypes from 'ui/registry/vis_types';
+import colorramps from 'ui/vislib/components/color/colormaps';
+import vectorMaps from 'plugins/choropleth/vector_maps';
+
+visTypes.register(function ChoroplethProvider(Private) {
+  const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);
+  const Schemas = Private(VisSchemasProvider);
+
+  return new TemplateVisType({
+    name: 'choropleth',
+    title: 'Vector Map',
+    implementsRenderComplete: true,
+    description: 'Show metrics on a thematic map. Darker colors represent higher values.',
+    icon: 'fa-globe',
+    template: choroplethTemplate,
+    params: {
+      defaults: {
+        colorSchema: 'Yellow to Red',
+        selectedLayer: vectorMaps.Countries,
+        selectedJoinField: vectorMaps.Countries.fields[0]
+      },
+      colorSchemas: Object.keys(colorramps),
+      vectorMaps: vectorMaps,
+      editor: '<choropleth-vis-params></choropleth-vis-params>'
+    },
+    schemas: new Schemas([
+      {
+        group: 'metrics',
+        name: 'metric',
+        title: '',
+        min: 1,
+        max: 1,
+        aggFilter: ['!std_dev', '!percentiles', '!percentile_ranks'],
+        defaults: [
+          { schema: 'metric', type: 'count' }
+        ]
+      },
+      {
+        group: 'buckets',
+        name: 'segment',
+        icon: 'fa fa-globe',
+        title: 'shape field',
+        min: 1,
+        max: 1,
+        aggFilter: ['terms']
+      }
+    ])
+  });
+});
+
+
diff --git a/src/core_plugins/choropleth/public/choropleth_vis_params.html b/src/core_plugins/choropleth/public/choropleth_vis_params.html
new file mode 100644
index 0000000000000..b70b6de0c60aa
--- /dev/null
+++ b/src/core_plugins/choropleth/public/choropleth_vis_params.html
@@ -0,0 +1,46 @@
+<div class="form-group">
+  <div class="kuiSideBarFormRow">
+    <label class="kuiSideBarFormRow__label" for="colorSchema">
+      Color Schema
+    </label>
+    <div class="kuiSideBarFormRow__control">
+      <select
+        id="colorSchema"
+        class="kuiSelect kuiSideBarSelect"
+        ng-model="vis.params.colorSchema"
+        ng-options="mode for mode in vis.type.params.colorSchemas"
+      ></select>
+    </div>
+  </div>
+  <div class="kuiSideBarFormRow">
+    <label class="kuiSideBarFormRow__label" for="vectorMap">
+      Vector map
+    </label>
+    <div class="kuiSideBarFormRow__control">
+      <select
+        id="vectorMap"
+        class="kuiSelect kuiSideBarSelect"
+        ng-model="vis.params.selectedLayer"
+        ng-options="layer for (layer, meta) in vis.type.params.vectorMaps"
+      ></select>
+    </div>
+  </div>
+
+  <div class="kuiSideBarFormRow">
+    <label class="kuiSideBarFormRow__label" for="joinField">
+      Join on field
+    </label>
+    <div class="kuiSideBarFormRow__control">
+      <select id="joinField"
+              ng-model="vis.params.selectedJoinField"
+              ng-options="field for field in vis.params.selectedLayer.fields"
+              ng-init="vis.params.selectedJoinField=vis.params.selectedLayer.fields[0]"
+      >
+        <option value=''>Select</option></select>
+    </div>
+  </div>
+
+
+
+
+</div>
diff --git a/src/core_plugins/choropleth/public/choropleth_vis_params.js b/src/core_plugins/choropleth/public/choropleth_vis_params.js
new file mode 100644
index 0000000000000..2495e89cccfa9
--- /dev/null
+++ b/src/core_plugins/choropleth/public/choropleth_vis_params.js
@@ -0,0 +1,13 @@
+import uiModules from 'ui/modules';
+import choroplethVisParamsTemplate from 'plugins/choropleth/choropleth_vis_params.html';
+
+uiModules.get('kibana/choropleth')
+  .directive('choroplethVisParams', function () {
+    return {
+      restrict: 'E',
+      template: choroplethVisParamsTemplate,
+      link: function ($scope, $element) {
+
+      }
+    };
+  });
diff --git a/src/core_plugins/choropleth/public/vector_maps.js b/src/core_plugins/choropleth/public/vector_maps.js
new file mode 100644
index 0000000000000..a3aa04e6da862
--- /dev/null
+++ b/src/core_plugins/choropleth/public/vector_maps.js
@@ -0,0 +1,29 @@
+const vectorMaps = {
+  'Countries': {
+    url: '../plugins/choropleth/data/world_countries.geojson',
+    fields: ['iso']
+  },
+  'States': {
+    url: '../plugins/choropleth/data/us_states.geojson',
+    fields: ['NAME']
+  }
+};
+
+// const vectorMaps = {
+//   'Countries': ['iso'],
+//   'States': ['name', 'abbr']
+// };
+//
+// const vectorMaps = [{
+//   name: 'Countries',
+//   url: '../plugins/choropleth/data/world_countries.geojson',
+//   fields: ['iso']
+// },
+//   {
+//   name: 'States',
+//     url: '../plugins/choropleth/data/us_states.geojson',
+//     fields: ['name', 'abbr']
+//   }];
+
+
+export default vectorMaps;
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
index 9ec130f84737f..6fd120b47f340 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
@@ -49,37 +49,37 @@ export default function TileMapVisType(Private, getAppState, courier, config) {
       canDesaturate: !!supports.cssFilters,
       editor: tileMapTemplate
     },
-    listeners: {
-      rectangle: function (event) {
-        const agg = _.get(event, 'chart.geohashGridAgg');
-        if (!agg) return;
-
-        const pushFilter = Private(FilterBarPushFilterProvider)(getAppState());
-        const indexPatternName = agg.vis.indexPattern.id;
-        const field = agg.fieldName();
-        const filter = { geo_bounding_box: {} };
-        filter.geo_bounding_box[field] = event.bounds;
-
-        pushFilter(filter, false, indexPatternName);
-      },
-      mapMoveEnd: function (event) {
-        const vis = _.get(event, 'chart.geohashGridAgg.vis');
-        if (vis && vis.hasUiState()) {
-          vis.getUiState().set('mapCenter', event.center);
-        }
-      },
-      mapZoomEnd: function (event) {
-        const vis = _.get(event, 'chart.geohashGridAgg.vis');
-        if (vis && vis.hasUiState()) {
-          vis.getUiState().set('mapZoom', event.zoom);
-        }
-
-        const autoPrecision = _.get(event, 'chart.geohashGridAgg.params.autoPrecision');
-        if (autoPrecision) {
-          courier.fetch();
-        }
-      }
-    },
+    // listeners: {
+    //   rectangle: function (event) {
+    //     const agg = _.get(event, 'chart.geohashGridAgg');
+    //     if (!agg) return;
+    //
+    //     const pushFilter = Private(FilterBarPushFilterProvider)(getAppState());
+    //     const indexPatternName = agg.vis.indexPattern.id;
+    //     const field = agg.fieldName();
+    //     const filter = { geo_bounding_box: {} };
+    //     filter.geo_bounding_box[field] = event.bounds;
+    //
+    //     pushFilter(filter, false, indexPatternName);
+    //   },
+    //   mapMoveEnd: function (event) {
+    //     const vis = _.get(event, 'chart.geohashGridAgg.vis');
+    //     if (vis && vis.hasUiState()) {
+    //       vis.getUiState().set('mapCenter', event.center);
+    //     }
+    //   },
+    //   mapZoomEnd: function (event) {
+    //     const vis = _.get(event, 'chart.geohashGridAgg.vis');
+    //     if (vis && vis.hasUiState()) {
+    //       vis.getUiState().set('mapZoom', event.zoom);
+    //     }
+    //
+    //     const autoPrecision = _.get(event, 'chart.geohashGridAgg.params.autoPrecision');
+    //     if (autoPrecision) {
+    //       courier.fetch();
+    //     }
+    //   }
+    // },
     responseConverter: geoJsonConverter,
     implementsRenderComplete: true,
     schemas: new Schemas([
diff --git a/src/ui/public/filter_bar/put_filter.js b/src/ui/public/filter_bar/put_filter.js
new file mode 100644
index 0000000000000..e88dc90e73548
--- /dev/null
+++ b/src/ui/public/filter_bar/put_filter.js
@@ -0,0 +1,36 @@
+import _ from 'lodash';
+
+export default function () {
+
+  return function ($state) {
+    if (!_.isObject($state)) throw new Error('pushFilters requires a state object');
+    return function (filter, negate, index, filterId) {
+      // Hierarchical and tabular data set their aggConfigResult parameter
+      // differently because of how the point is rewritten between the two. So
+      // we need to check if the point.orig is set, if not use try the point.aggConfigResult
+      const filters = _.clone($state.filters || []);
+      let position = -1;
+      if (filterId) {
+        filters.forEach((filter, ind) => {
+          if (filterId === filter.meta._id) {
+            position = ind;
+          }
+        });
+
+        if (position > -1) {
+          const pendingFilter = { meta: { negate: negate, index: index, _id: filterId } };
+          _.extend(pendingFilter, filter);
+          filters[position] = pendingFilter;
+          $state.filters = filters;
+          return false;
+        }
+      }
+
+      const pendingFilter = { meta: { negate: negate, index: index, _id: filterId } };
+      _.extend(pendingFilter, filter);
+      filters.push(pendingFilter);
+      $state.filters = filters;
+      return true;
+    };
+  };
+}
diff --git a/src/ui/public/filter_bar/remove_filter.js b/src/ui/public/filter_bar/remove_filter.js
new file mode 100644
index 0000000000000..d78f4be76e2f7
--- /dev/null
+++ b/src/ui/public/filter_bar/remove_filter.js
@@ -0,0 +1,33 @@
+import _ from 'lodash';
+
+export default function () {
+
+  return function ($state, $scope) {
+    if (!_.isObject($state)) throw new Error('pushFilters requires a state object');
+    return function (filterId) {
+      // Hierarchical and tabular data set their aggConfigResult parameter
+      // differently because of how the point is rewritten between the two. So
+      // we need to check if the point.orig is set, if not use try the point.aggConfigResult
+      const filters = _.clone($state.filters || []);
+      let position = -1;
+      if (filterId) {
+        filters.forEach((filter, ind) => {
+          if (filterId === filter.meta._id) {
+            position = ind;
+          }
+        });
+
+        if (position > -1) {
+          // const pendingFilter = {meta: {negate: negate, index: index, _id: filterId}};
+          // console.log('remove  the filter');
+          filters.splice(position, 1);
+
+          $state.filters = filters;
+          return true;
+        }
+      }
+
+      return false;
+    };
+  };
+}
diff --git a/src/ui/public/utils/zoom_to_precision.js b/src/ui/public/utils/zoom_to_precision.js
new file mode 100644
index 0000000000000..fafe324df5041
--- /dev/null
+++ b/src/ui/public/utils/zoom_to_precision.js
@@ -0,0 +1,26 @@
+import { geohashColumns } from 'ui/utils/decode_geo_hash';
+
+const maxPrecision = 12;
+/**
+ * Map Leaflet zoom levels to geohash precision levels.
+ * The size of a geohash column-width on the map should be at least `minGeohashPixels` pixels wide.
+ */
+const zoomPrecision = {};
+const minGeohashPixels = 16;
+for (let zoom = 0; zoom <= 21; zoom += 1) {
+  const worldPixels = 256 * Math.pow(2, zoom);
+  zoomPrecision[zoom] = 1;
+  for (let precision = 2; precision <= maxPrecision; precision += 1) {
+    const columns = geohashColumns(precision);
+    if ((worldPixels / columns) >= minGeohashPixels) {
+      zoomPrecision[zoom] = precision;
+    } else {
+      break;
+    }
+  }
+}
+
+
+export default function zoomToPrecision(mapZoom, maxPrecision) {
+  return Math.min(zoomPrecision[mapZoom], maxPrecision);
+}
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
new file mode 100644
index 0000000000000..1d7955257d1b0
--- /dev/null
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -0,0 +1,794 @@
+import { EventEmitter } from 'events';
+import L from 'leaflet';
+import _ from 'lodash';
+import d3 from 'd3';
+import $ from 'jquery';
+import colorramps from 'ui/vislib/components/color/colormaps';
+import zoomToPrecision from 'ui/utils/zoom_to_precision';
+// import Notifier from 'ui/notify/notifier';
+
+
+class GeohashGridOverlay {
+
+  constructor(featureCollection, layerOptions, targetZoom) {
+    this._featureCollection = featureCollection;
+    this._zoom = targetZoom;
+    this.createLeafletLayer(layerOptions);
+  }
+
+  createLeafletLayer(ignoreLayerOptions) {
+    this._leafletLayer = L.geoJson(null, {
+      pointToLayer: this.getMarkerFunction(),
+      style: this.getStyleFunction()
+    });
+    this._leafletLayer.addData(this._featureCollection);
+  }
+
+  getFeatureCollection() {
+    return this._featureCollection;
+  }
+
+  addToLeafletMap(leafletMap) {
+    leafletMap.invalidateSize();
+    this._leafletLayer.addTo(leafletMap);
+  }
+
+  removeFromMap(leafletMap) {
+    leafletMap.removeLayer(this._leafletLayer);
+  }
+
+  getMarkerFunction() {
+    throw new Error('should implement getMarkerFunction');
+  }
+
+  getStyleFunction() {
+    const min = _.get(this._featureCollection, 'properties.min', 0);
+    const max = _.get(this._featureCollection, 'properties.max', 1);
+    this._legendColors = makeCircleMarkerLegendColors(min, max);
+    const styleFunction = makeStyleFunction(min, max, this._legendColors);
+    return styleFunction;
+  }
+
+  _setStyle() {
+    const style = this.getStyleFunction();
+    this._leafletLayer.setStyle(style);
+  }
+
+
+}
+
+
+class ScaledCircleOverlay extends GeohashGridOverlay {
+  constructor() {
+    super(...arguments);
+  }
+
+  getMarkerFunction() {
+    const scaleFactor = 0.6;
+    return (feature, latlng) => {
+      const value = feature.properties.value;
+      const scaledRadius = this._radiusScale(value) * scaleFactor;
+      return L.circleMarker(latlng).setRadius(scaledRadius);
+    };
+  }
+
+  /**
+   * radiusScale returns a number for scaled circle markers
+   * for relative sizing of markers
+   *
+   * @method _radiusScale
+   * @param value {Number}
+   * @return {Number}
+   */
+  _radiusScale(value) {
+    const precisionBiasBase = 5;
+    const precisionBiasNumerator = 200;
+    // const zoom = this._featureCollection.properties.zoom;
+
+    const zoom = this._zoom;
+    const maxValue = this._featureCollection.properties.max;
+    const precision = _.max(this._featureCollection.features.map((feature) => {
+      return String(feature.properties.geohash).length;
+    }));
+
+    const pct = Math.abs(value) / Math.abs(maxValue);
+    const zoomRadius = 0.5 * Math.pow(2, zoom);
+    const precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
+
+    // square root value percentage
+    return Math.pow(pct, 0.5) * zoomRadius * precisionScale;
+  }
+
+  getBounds() {
+    return this._leafletLayer.getBounds();
+  }
+
+
+}
+
+
+/**
+ * Map overlay: canvas layer with leaflet.heat plugin
+ *
+ * @param map {Leaflet Object}
+ * @param geoJson {geoJson Object}
+ * @param params {Object}
+ */
+class HeatmapOverlay extends GeohashGridOverlay {
+
+  constructor(featureCollection, layerOptions) {
+    super(...arguments);
+    // super(map, geoJson, params);
+    // this._disableTooltips = false;
+    //
+    // this._createMarkerGroup({
+    //   radius: +this._attr.heatRadius,
+    //   blur: +this._attr.heatBlur,
+    //   maxZoom: +this._attr.heatMaxZoom,
+    //   minOpacity: +this._attr.heatMinOpacity
+    // });
+    //
+    // this.addLegend = _.noop;
+    //
+    // this._getLatLng = _.memoize(function (feature) {
+    //   return L.latLng(
+    //     feature.geometry.coordinates[1],
+    //     feature.geometry.coordinates[0]
+    //   );
+    // }, function (feature) {
+    //   // turn coords into a string for the memoize cache
+    //   return [feature.geometry.coordinates[1], feature.geometry.coordinates[0]].join(',');
+    // });
+  }
+
+
+  createLeafletLayer(heatmapOptions) {
+    const max = _.get(this._featureCollection, 'properties.max');
+    const points = dataToHeatArray(max, heatmapOptions.heatNormalizeData, this._featureCollection);
+    this._leafletLayer = L.heatLayer(points, heatmapOptions);
+    // this._fixTooltips();
+    // this._addToMap();
+  }
+
+  // _createMarkerGroup(options) {
+  //   const max = _.get(this.geoJson, 'properties.allmax');
+  //   const points = this._dataToHeatArray(max);
+  //
+  //   this._markerGroup = L.heatLayer(points, options);
+  //   this._fixTooltips();
+  //   this._addToMap();
+  // }
+  //
+  // _fixTooltips() {
+  //   const self = this;
+  //   const debouncedMouseMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
+  //     'leading': true,
+  //     'trailing': false
+  //   });
+  //
+  //   if (!this._disableTooltips && this._attr.addTooltip) {
+  //     this.map.on('mousemove', debouncedMouseMoveLocation);
+  //     this.map.on('mouseout', function () {
+  //       self.map.closePopup();
+  //     });
+  //     this.map.on('mousedown', function () {
+  //       self._disableTooltips = true;
+  //       self.map.closePopup();
+  //     });
+  //     this.map.on('mouseup', function () {
+  //       self._disableTooltips = false;
+  //     });
+  //   }
+  //
+  //   function mouseMoveLocation(e) {
+  //     const latlng = e.latlng;
+  //
+  //     this.map.closePopup();
+  //
+  //     // unhighlight all svgs
+  //     d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
+  //
+  //     if (!this.geoJson.features.length || this._disableTooltips) {
+  //       return;
+  //     }
+  //
+  //     // find nearest feature to event latlng
+  //     const feature = this._nearestFeature(latlng);
+  //
+  //     // show tooltip if close enough to event latlng
+  //     if (this._tooltipProximity(latlng, feature)) {
+  //       this._showTooltip(feature, latlng);
+  //     }
+  //   }
+  // }
+  //
+  // /**
+  //  * Finds nearest feature in mapData to event latlng
+  //  *
+  //  * @method _nearestFeature
+  //  * @param latLng {Leaflet latLng}
+  //  * @return nearestPoint {Leaflet latLng}
+  //  */
+  // _nearestFeature(latLng) {
+  //   const self = this;
+  //   let nearest;
+  //
+  //   if (latLng.lng < -180 || latLng.lng > 180) {
+  //     return;
+  //   }
+  //
+  //   _.reduce(this.geoJson.features, function (distance, feature) {
+  //     const featureLatLng = self._getLatLng(feature);
+  //     const dist = latLng.distanceTo(featureLatLng);
+  //
+  //     if (dist < distance) {
+  //       nearest = feature;
+  //       return dist;
+  //     }
+  //
+  //     return distance;
+  //   }, Infinity);
+  //
+  //   return nearest;
+  // }
+  //
+  // /**
+  //  * display tooltip if feature is close enough to event latlng
+  //  *
+  //  * @method _tooltipProximity
+  //  * @param latlng {Leaflet latLng  Object}
+  //  * @param feature {geoJson Object}
+  //  * @return {Boolean}
+  //  */
+  // _tooltipProximity(latlng, feature) {
+  //   if (!feature) return;
+  //
+  //   let showTip = false;
+  //   const featureLatLng = this._getLatLng(feature);
+  //
+  //   // zoomScale takes map zoom and returns proximity value for tooltip display
+  //   // domain (input values) is map zoom (min 1 and max 18)
+  //   // range (output values) is distance in meters
+  //   // used to compare proximity of event latlng to feature latlng
+  //   const zoomScale = d3.scale.linear()
+  //     .domain([1, 4, 7, 10, 13, 16, 18])
+  //     .range([1000000, 300000, 100000, 15000, 2000, 150, 50]);
+  //
+  //   const proximity = zoomScale(this.map.getZoom());
+  //   const distance = latlng.distanceTo(featureLatLng);
+  //
+  //   // maxLngDif is max difference in longitudes
+  //   // to prevent feature tooltip from appearing 360°
+  //   // away from event latlng
+  //   const maxLngDif = 40;
+  //   const lngDif = Math.abs(latlng.lng - featureLatLng.lng);
+  //
+  //   if (distance < proximity && lngDif < maxLngDif) {
+  //     showTip = true;
+  //   }
+  //
+  //   d3.scale.pow().exponent(0.2)
+  //     .domain([1, 18])
+  //     .range([1500000, 50]);
+  //   return showTip;
+  // }
+
+}
+
+
+/**
+ * Collects map functionality required for Kibana.
+ * Serves as simple abstraction for leaflet as well.
+ */
+class KibanaMap extends EventEmitter {
+
+  constructor(domNode) {
+
+    super();
+
+    this._leafletMap = L.map(domNode, {//todo: read this from meta
+      minZoom: 2,
+      maxZoom: 10
+    });
+    // this._leafletMap.setView([0, 0], 0);//todo: pass in from UI-state (if any)
+    this._leafletMap.fitWorld();//todo: pass in from UI-state (if any)
+
+    let previousZoom = this._leafletMap.getZoom();
+    this._leafletMap.on('zoomend', e=> {
+      if (previousZoom !== this._leafletMap.getZoom()) {
+        previousZoom = this._leafletMap.getZoom();
+        this.emit('zoomchange');
+      }
+    });
+
+    this._leafletMap.on('zoomend', e => {this.emit('zoomend');});
+    this._leafletMap.on('moveend', e => this.emit('moveend'));
+
+    this._leafletMap.on('draw:created', event => {
+      const drawType = event.layerType;
+      if (drawType === 'rectangle') {
+        const bounds = event.layer.getBounds();
+
+        const southEast = bounds.getSouthEast();
+        const northWest = bounds.getNorthWest();
+        let southEastLng = southEast.lng;
+        if (southEastLng > 180) {
+          southEastLng -= 360;
+        }
+        let northWestLng = northWest.lng;
+        if (northWestLng < -180) {
+          northWestLng += 360;
+        }
+
+        const southEastLat = southEast.lat;
+        const northWestLat = northWest.lat;
+
+        //Bounds cannot be created unless they form a box with larger than 0 dimensions
+        //Invalid areas are rejected by ES.
+        if (southEastLat === northWestLat || southEastLng === northWestLng) {
+          return;
+        }
+
+        this.emit('drawCreated:rectangle', {
+          bounds: {
+            bottom_right: {
+              lat: southEastLat,
+              lon: southEastLng
+            },
+            top_left: {
+              lat: northWestLat,
+              lon: northWestLng
+            }
+          }
+        });
+      } else if (drawType === 'polygon') {
+        const latLongs = event.layer.getLatLngs();
+        this.emit('drawCreated:polygon', {
+          points: latLongs.map(leafletLatLng => {
+            return {
+              lat: leafletLatLng.lat,
+              lon: leafletLatLng.lng
+            };
+          })
+        });
+      }
+
+
+    });
+
+    this.resize();
+
+    this._leafletBaseLayer = null;
+    this._geohashGridOverlay = null;
+    this._leafletDrawControl = null;
+    this._geohashOptions = {};
+
+    this._choroplethLeafletLayer = null;
+    this._choroplethMetrics = null;
+    this._choroplethColorRamp = colorramps['Yellow to Red'];
+
+  }
+
+
+  destroy() {
+    //todo
+    this._leafletMap.remove();
+  }
+
+  getCenter() {
+    const center = this._leafletMap.getCenter();
+    return { lon: center.lng, lat: center.lat };
+  }
+
+
+  setChoroplethLayer(url, joinfield) {
+
+    if (this._choroplethUrl === url) {
+      if (this._joinField !== joinfield) {
+        this._joinField = joinfield;
+        this._setChoroplethStyle();
+      }
+      // console.log('skip requesting data, is the same');
+      return;
+    }
+
+    this._joinField = joinfield;
+    this._choroplethUrl = url;
+
+    if (this._choroplethLeafletLayer) {
+      this._leafletMap.removeLayer(this._choroplethLeafletLayer);
+    }
+
+    this._choroplethLeafletLayer = L.geoJson(null, {
+      onEachFeature: (feature, layer) => {
+        layer.on('click', () => {
+          this.emit('choropleth:select', feature.properties[this._joinField]);
+        });
+      },
+      style: emptyStyle
+    });
+    this._choroplethLeafletLayer.addTo(this._leafletMap);
+
+    this._loaded = false;
+    $.ajax({
+      dataType: 'json',
+      url: url,
+      success: (data) => {
+        this._choroplethLeafletLayer.addData(data);
+        this._loaded = true;
+        this._setChoroplethStyle();
+      }
+    }).error(function (e) {
+      // notifier.fatal(e);
+      // console.error(e);
+    });
+  }
+
+  _setChoroplethStyle() {
+    if (!this._choroplethMetrics) {
+      return;
+    }
+    const styleFunction = makeChoroplethStyleFunction(this._choroplethMetrics, this._choroplethColorRamp, this._joinField);
+    if (this._choroplethLeafletLayer) {
+      this._choroplethLeafletLayer.setStyle(styleFunction);
+    }
+  }
+
+  setChoroplethMetrics(metrics) {
+    this._choroplethMetrics = metrics;
+    this._setChoroplethStyle();
+  }
+
+  setChoroplethColorRamp(colorRamp) {
+    if (_.isEqual(colorRamp, this._choroplethColorRamp)) {
+      return;
+    }
+    this._choroplethColorRamp = colorRamp;
+    this._setChoroplethStyle();
+  }
+
+  setCenter(latitude, longitude) {
+    const latLong = L.latLng(latitude, longitude);
+    if (latLong.equals && !latLong.equals(this._leafletMap.getCenter())) {
+      this._leafletMap.setView(latLong);
+    }
+  }
+
+
+  setZoomLevel(zoomLevel) {
+    if (this._leafletMap.getZoom() !== zoomLevel) {
+      this._leafletMap.setZoom(zoomLevel);
+    }
+  }
+
+  getZoomLevel() {
+    return this._leafletMap.getZoom();
+  }
+
+  getAutoPrecision() {
+    //todo: not correct, should take into account settigns...
+    return zoomToPrecision(this._leafletMap.getZoom(), 12);
+  }
+
+  getLeafletBounds() {
+    return this._leafletMap.getBounds();
+  }
+
+  getBounds() {
+
+    const bounds = this._leafletMap.getBounds();
+    if (!bounds) {
+      return null;
+    }
+
+    const southEast = bounds.getSouthEast();
+    const northWest = bounds.getNorthWest();
+    let southEastLng = southEast.lng;
+    if (southEastLng > 180) {
+      southEastLng -= 360;
+    }
+    let northWestLng = northWest.lng;
+    if (northWestLng < -180) {
+      northWestLng += 360;
+    }
+
+    const southEastLat = southEast.lat;
+    const northWestLat = northWest.lat;
+
+    //Bounds cannot be created unless they form a box with larger than 0 dimensions
+    //Invalid areas are rejected by ES.
+    if (southEastLat === northWestLat || southEastLng === northWestLng) {
+      return;
+    }
+
+    return {
+      bottom_right: {
+        lat: southEastLat,
+        lon: southEastLng
+      },
+      top_left: {
+        lat: northWestLat,
+        lon: northWestLng
+      }
+    };
+  }
+
+
+  setBaseLayer(settings) {
+    if (settings === null) {
+      if (this._leafletBaseLayer && this._leafletMap) {
+        this._leafletMap.removeLayer(this._leafletBaseLayer);
+      }
+      return;
+    }
+
+    //
+    if (settings.baseLayerType === 'wms') {
+      this._setWMSBaseLayer(settings.options);
+    } else {
+      this._setTMSBaseLayer((settings.options));
+    }
+
+
+  }
+
+  _setTMSBaseLayer(options) {
+    if (!this._leafletBaseLayer) {
+      this._leafletBaseLayer = L.tileLayer(options.url, {});
+      this._leafletBaseLayer.addTo(this._leafletMap);
+      this._leafletBaseLayer.bringToBack();
+      this.resize();
+      return;
+    }
+
+    //todo: make changes if settings change
+  }
+
+  _setWMSBaseLayer(options) {
+    // console.log('todo: _setWMSBaseLayer', arguments);
+  }
+
+  addDrawControl() {
+    const drawOptions = {
+      draw: {
+        polyline: false,
+        marker: false,
+        circle: false,
+        polygon: false,
+        rectangle: {
+          shapeOptions: {
+            stroke: false,
+            color: '#000'
+          }
+        }
+      }
+    };
+    this._leafletDrawControl = new L.Control.Draw(drawOptions);
+    this._leafletMap.addControl(this._leafletDrawControl);
+  }
+
+
+  _recreateOverlay() {
+
+    if (!this._featureCollection) {
+      return;
+    }
+
+    if (this._geohashGridOverlay) {
+      this._geohashGridOverlay.removeFromMap(this._leafletMap);
+    }
+
+    switch (this._geohashOptions.mapType) {
+      case 'Scaled Circle Markers':
+        this._geohashGridOverlay = new ScaledCircleOverlay(this._featureCollection, {}, this._leafletMap.getZoom());
+        break;
+      case 'Heatmap':
+        this._geohashGridOverlay = new HeatmapOverlay(this._featureCollection, {
+          radius: this._geohashOptions.heatmap.heatRadius,
+          blur: this._geohashOptions.heatmap.heatBlur,
+          maxZoom: this._geohashOptions.heatmap.heatMaxZoom,
+          minOpaxity: this._geohashOptions.heatmap.heatMinOpacity,
+          heatNormalizeData: this._geohashOptions.heatmap.heatNormalizeData
+        });
+        break;
+      default:
+        throw new Error(`${this._geohashOptions.mapType} mapType not recognized`);
+
+    }
+
+    this._geohashGridOverlay.addToLeafletMap(this._leafletMap);
+    // this.fitIfNotVisible(this._featureCollection);
+
+  }
+  fitIfNotVisible(featureCollection) {
+    const bounds = _.pluck(featureCollection.features, 'properties.rectangle');
+    const mapBounds = this._leafletMap.getBounds();
+
+    //layerbounds is sometimes empty:
+    try {
+      const layerbounds = this._geohashGridOverlay.getBounds();
+      if (mapBounds && layerbounds && !mapBounds.intersects(layerbounds)) {
+        this._leafletMap.fitBounds(bounds);
+      }
+    } catch (e) {
+      //todo; shouldn't do this under zooming, only when play button is pressed.
+    }
+  }
+
+  recreateGeohashOverlay() {
+    this._recreateOverlay();
+  }
+
+  setGeohashFeatureCollection(featureCollection) {
+    // if (this._geohashGridOverlay && _.isEqual(this._geohashGridOverlay.getFeatureCollection(), featureCollection)) {
+    //   no need to recreate layer.
+      // return;
+    // }
+    this._featureCollection = featureCollection;
+    this._recreateOverlay();
+  }
+
+  setGeohashLayerOptions(options) {
+
+    if (_.isEqual(this._geohashOptions, options)) {
+      return;
+    }
+
+    const previousOptions = this._geohashOptions;
+    this._geohashOptions = options;
+
+    //do smart refresh. only required changes.
+    if (previousOptions) {
+      if (this._geohashOptions.mapType !== previousOptions.mapType) {
+        this._recreateOverlay();
+      } else if (this._geohashOptions.mapType === 'Heatmap' && !_.isEqual(this._geohashOptions.heatmap, previousOptions)) {
+        this._recreateOverlay();//todo: can be optimized. does not require full refresh
+      }
+    }
+    //todo: when other configurations change (tooltip, etc... do NOT recreate the layer
+
+  }
+
+  resize() {
+    this._leafletMap.invalidateSize();
+  }
+
+}
+
+
+/**
+ * d3 quantize scale returns a hex color, used for marker fill color
+ *
+ * @method quantizeLegendColors
+ * return {undefined}
+ */
+function makeCircleMarkerLegendColors(min, max) {
+  const reds1 = ['#ff6128'];
+  const reds3 = ['#fecc5c', '#fd8d3c', '#e31a1c'];
+  const reds5 = ['#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'];
+  const bottomCutoff = 2;
+  const middleCutoff = 24;
+  let legendColors;
+  if (max - min <= bottomCutoff) {
+    legendColors = reds1;
+  } else if (max - min <= middleCutoff) {
+    legendColors = reds3;
+  } else {
+    legendColors = reds5;
+  }
+  return legendColors;
+}
+
+function makeColorDarker(color) {
+  const amount = 1.3;//magic number, carry over from earlier
+  return d3.hcl(color).darker(amount).toString();
+}
+
+function makeStyleFunction(min, max, legendColors) {
+  const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
+  const legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(legendColors);
+  return (feature) => {
+    const value = _.get(feature, 'properties.value');
+    const color = legendQuantizer(value);
+    return {
+      fillColor: color,
+      color: makeColorDarker(color),
+      weight: 1.5,
+      opacity: 1,
+      fillOpacity: 0.75
+    };
+  };
+}
+
+/**
+ * returns data for data for heat map intensity
+ * if heatNormalizeData attribute is checked/true
+ • normalizes data for heat map intensity
+ *
+ * @method _dataToHeatArray
+ * @param max {Number}
+ * @return {Array}
+ */
+function dataToHeatArray(max, heatNormalizeData, featureCollection) {
+
+  return featureCollection.features.map((feature) => {
+    // const lat = feature.properties.center[0];
+    // const lng = feature.properties.center[1];
+    const lat = feature.geometry.coordinates[1];
+    const lng = feature.geometry.coordinates[0];
+    let heatIntensity;
+    if (!heatNormalizeData) {
+      // show bucket value on heatmap
+      heatIntensity = feature.properties.value;
+    } else {
+      // show bucket value normalized to max value
+      heatIntensity = feature.properties.value / max;
+    }
+
+    return [lat, lng, heatIntensity];
+  });
+}
+
+function makeChoroplethStyleFunction(data, colorramp, joinField) {
+
+  if (data.length === 0) {
+    return function () {
+      return emptyStyle();
+    };
+  }
+
+  let min = data[0].value;
+  let max = data[0].value;
+  for (let i = 1; i < data.length; i += 1) {
+    min = Math.min(data[i].value, min);
+    max = Math.max(data[i].value, max);
+  }
+
+  return function (geojsonFeature) {
+
+    const match = data.find((bucket) => {
+      return bucket.term === geojsonFeature.properties[joinField];
+    });
+
+    if (!match) {
+      return emptyStyle();
+    }
+
+    return {
+      fillColor: getChoroplethColor(match.value, min, max, colorramp),
+      weight: 2,
+      opacity: 1,
+      color: 'white',
+      fillOpacity: 0.7
+    };
+  };
+
+}
+
+function getChoroplethColor(value, min, max, colorRamp) {
+  if (min === max) {
+    return colorRamp[colorRamp.length - 1];
+  }
+  const fraction = (value - min) / (max - min);
+  const index = Math.round(colorRamp.length * fraction) - 1;
+  const i = Math.max(Math.min(colorRamp.length - 1, index), 0);
+
+  const color = colorRamp[i][1];
+  const red = Math.floor(color[0] * 255);
+  const green = Math.floor(color[1] * 255);
+  const blue = Math.floor(color[2] * 255);
+  return `rgb(${red},${green},${blue})`;
+}
+
+
+const emptyStyleObject = {
+  weight: 1,
+  opacity: 0.6,
+  color: 'rgb(200,200,200)',
+  fillOpacity: 0
+};
+function emptyStyle() {
+  return emptyStyleObject;
+}
+
+export default KibanaMap;
diff --git a/src/ui/public/vis_maps/lib/data.js b/src/ui/public/vis_maps/lib/data.js
deleted file mode 100644
index 93dc77f90a2db..0000000000000
--- a/src/ui/public/vis_maps/lib/data.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import d3 from 'd3';
-import _ from 'lodash';
-export default function DataFactory(Private) {
-  /**
-   * Provides an API for pulling values off the data
-   * and calculating values using the data
-   *
-   * @class Data
-   * @constructor
-   * @param data {Object} Elasticsearch query results
-   * @param attr {Object|*} Visualization options
-   */
-  class Data {
-    constructor(data, uiState) {
-      this.uiState = uiState;
-      this.data = this.copyDataObj(data);
-      this._normalizeOrdered();
-    }
-
-    copyDataObj(data) {
-      const copyChart = data => {
-        const newData = {};
-        Object.keys(data).forEach(key => {
-          if (key !== 'series') {
-            newData[key] = data[key];
-          } else {
-            newData[key] = data[key].map(seri => {
-              return {
-                label: seri.label,
-                values: seri.values.map(val => {
-                  const newVal = _.clone(val);
-                  newVal.aggConfig = val.aggConfig;
-                  newVal.aggConfigResult = val.aggConfigResult;
-                  newVal.extraMetrics = val.extraMetrics;
-                  return newVal;
-                })
-              };
-            });
-          }
-        });
-        return newData;
-      };
-
-      if (!data.series) {
-        const newData = {};
-        Object.keys(data).forEach(key => {
-          if (!['rows', 'columns'].includes(key)) {
-            newData[key] = data[key];
-          }
-          else {
-            newData[key] = data[key].map(chart => {
-              return copyChart(chart);
-            });
-          }
-        });
-        return newData;
-      }
-      return copyChart(data);
-    }
-
-    /**
-     * Returns an array of the actual x and y data value objects
-     * from data with series keys
-     *
-     * @method chartData
-     * @returns {*} Array of data objects
-     */
-    chartData() {
-      if (!this.data.series) {
-        const arr = this.data.rows ? this.data.rows : this.data.columns;
-        return _.toArray(arr);
-      }
-      return [this.data];
-    }
-
-    /**
-     * Returns an array of chart data objects
-     *
-     * @method getVisData
-     * @returns {*} Array of chart data objects
-     */
-    getVisData() {
-      let visData;
-
-      if (this.data.rows) {
-        visData = this.data.rows;
-      } else if (this.data.columns) {
-        visData = this.data.columns;
-      } else {
-        visData = [this.data];
-      }
-
-      return visData;
-    }
-
-    /**
-     * get min and max for all cols, rows of data
-     *
-     * @method getMaxMin
-     * @return {Object}
-     */
-    getGeoExtents() {
-      const visData = this.getVisData();
-
-      return _.reduce(_.pluck(visData, 'geoJson.properties'), function (minMax, props) {
-        return {
-          min: Math.min(props.min, minMax.min),
-          max: Math.max(props.max, minMax.max)
-        };
-      }, { min: Infinity, max: -Infinity });
-    }
-
-    /**
-     * Get attributes off the data, e.g. `tooltipFormatter` or `xAxisFormatter`
-     * pulls the value off the first item in the array
-     * these values are typically the same between data objects of the same chart
-     * TODO: May need to verify this or refactor
-     *
-     * @method get
-     * @param thing {String} Data object key
-     * @returns {*} Data object value
-     */
-    get(thing, def) {
-      const source = (this.data.rows || this.data.columns || [this.data])[0];
-      return _.get(source, thing, def);
-    }
-
-    /**
-     * Return an array of all value objects
-     * Pluck the data.series array from each data object
-     * Create an array of all the value objects from the series array
-     *
-     * @method flatten
-     * @returns {Array} Value objects
-     */
-    flatten() {
-      return _(this.chartData())
-        .pluck('series')
-        .flattenDeep()
-        .pluck('values')
-        .flattenDeep()
-        .value();
-    }
-
-    /**
-     * ensure that the datas ordered property has a min and max
-     * if the data represents an ordered date range.
-     *
-     * @return {undefined}
-     */
-    _normalizeOrdered() {
-      const data = this.getVisData();
-      const self = this;
-
-      data.forEach(function (d) {
-        if (!d.ordered || !d.ordered.date) return;
-
-        const missingMin = d.ordered.min == null;
-        const missingMax = d.ordered.max == null;
-
-        if (missingMax || missingMin) {
-          const extent = d3.extent(self.xValues());
-          if (missingMin) d.ordered.min = extent[0];
-          if (missingMax) d.ordered.max = extent[1];
-        }
-      });
-    }
-
-    /**
-     * Calculates min and max values for all map data
-     * series.rows is an array of arrays
-     * each row is an array of values
-     * last value in row array is bucket count
-     *
-     * @method mapDataExtents
-     * @param series {Array} Array of data objects
-     * @returns {Array} min and max values
-     */
-    mapDataExtents(series) {
-      const values = _.map(series.rows, function (row) {
-        return row[row.length - 1];
-      });
-      return [_.min(values), _.max(values)];
-    }
-
-    /**
-     * Get the maximum number of series, considering each chart
-     * individually.
-     *
-     * @return {number} - the largest number of series from all charts
-     */
-    maxNumberOfSeries() {
-      return this.chartData().reduce(function (max, chart) {
-        return Math.max(max, chart.series.length);
-      }, 0);
-    }
-  }
-
-  return Data;
-}
diff --git a/src/ui/public/vis_maps/lib/dispatch.js b/src/ui/public/vis_maps/lib/dispatch.js
deleted file mode 100644
index 99217313348b2..0000000000000
--- a/src/ui/public/vis_maps/lib/dispatch.js
+++ /dev/null
@@ -1,315 +0,0 @@
-import d3 from 'd3';
-import _ from 'lodash';
-import $ from 'jquery';
-import SimpleEmitter from 'ui/utils/simple_emitter';
-
-export default function DispatchClass(Private, config) {
-
-  /**
-   * Handles event responses
-   *
-   * @class Dispatch
-   * @constructor
-   * @param handler {Object} Reference to Handler Class Object
-   */
-
-  class Dispatch extends SimpleEmitter {
-    constructor(handler) {
-      super();
-      this.handler = handler;
-      this._listeners = {};
-    }
-
-    /**
-     * Response to click and hover events
-     *
-     * @param d {Object} Data point
-     * @param i {Number} Index number of data point
-     * @returns {{value: *, point: *, label: *, color: *, pointIndex: *,
-     * series: *, config: *, data: (Object|*),
-     * e: (d3.event|*), handler: (Object|*)}} Event response object
-     */
-    eventResponse(d, i) {
-      const datum = d._input || d;
-      const data = d3.event.target.nearestViewportElement ?
-        d3.event.target.nearestViewportElement.__data__ : d3.event.target.__data__;
-      const label = d.label ? d.label : (d.series || 'Count');
-      const isSeries = !!(data && data.series);
-      const isSlices = !!(data && data.slices);
-      const series = isSeries ? data.series : undefined;
-      const slices = isSlices ? data.slices : undefined;
-      const handler = this.handler;
-      const color = _.get(handler, 'data.color');
-      const isPercentage = (handler && handler.visConfig.get('mode', 'normal') === 'percentage');
-
-      const eventData = {
-        value: d.y,
-        point: datum,
-        datum: datum,
-        label: label,
-        color: color ? color(label) : undefined,
-        pointIndex: i,
-        series: series,
-        slices: slices,
-        config: handler && handler.visConfig,
-        data: data,
-        e: d3.event,
-        handler: handler
-      };
-
-      if (isSeries) {
-        // Find object with the actual d value and add it to the point object
-        const object = _.find(series, { 'label': label });
-        if (object) {
-          eventData.value = +object.values[i].y;
-
-          if (isPercentage) {
-            // Add the formatted percentage to the point object
-            eventData.percent = (100 * d.y).toFixed(1) + '%';
-          }
-        }
-      }
-
-      return eventData;
-    }
-
-    /**
-     * Returns a function that adds events and listeners to a D3 selection
-     *
-     * @method addEvent
-     * @param event {String}
-     * @param callback {Function}
-     * @returns {Function}
-     */
-    addEvent(event, callback) {
-      return function (selection) {
-        selection.each(function () {
-          const element = d3.select(this);
-
-          if (typeof callback === 'function') {
-            return element.on(event, callback);
-          }
-        });
-      };
-    }
-
-    /**
-     *
-     * @method addHoverEvent
-     * @returns {Function}
-     */
-    addHoverEvent() {
-      const self = this;
-      const isClickable = this.listenerCount('click') > 0;
-      const addEvent = this.addEvent;
-      const $el = this.handler.el;
-      if (!this.handler.highlight) {
-        this.handler.highlight = self.highlight;
-      }
-
-      function hover(d, i) {
-        // Add pointer if item is clickable
-        if (isClickable) {
-          self.addMousePointer.call(this, arguments);
-        }
-
-        self.handler.highlight.call(this, $el);
-        self.emit('hover', self.eventResponse(d, i));
-      }
-
-      return addEvent('mouseover', hover);
-    }
-
-    /**
-     *
-     * @method addMouseoutEvent
-     * @returns {Function}
-     */
-    addMouseoutEvent() {
-      const self = this;
-      const addEvent = this.addEvent;
-      const $el = this.handler.el;
-      if (!this.handler.unHighlight) {
-        this.handler.unHighlight = self.unHighlight;
-      }
-
-      function mouseout() {
-        self.handler.unHighlight.call(this, $el);
-      }
-
-      return addEvent('mouseout', mouseout);
-    }
-
-    /**
-     *
-     * @method addClickEvent
-     * @returns {Function}
-     */
-    addClickEvent() {
-      const self = this;
-      const addEvent = this.addEvent;
-
-      function click(d, i) {
-        self.emit('click', self.eventResponse(d, i));
-      }
-
-      return addEvent('click', click);
-    }
-
-    /**
-     * Determine if we will allow brushing
-     *
-     * @method allowBrushing
-     * @returns {Boolean}
-     */
-    allowBrushing() {
-      const xAxis = this.handler.categoryAxes[0];
-
-      //Allow brushing for ordered axis - date histogram and histogram
-      return Boolean(xAxis.ordered);
-    }
-
-    /**
-     * Determine if brushing is currently enabled
-     *
-     * @method isBrushable
-     * @returns {Boolean}
-     */
-    isBrushable() {
-      return this.allowBrushing() && this.listenerCount('brush') > 0;
-    }
-
-    /**
-     * Mouseover Behavior
-     *
-     * @method addMousePointer
-     * @returns {d3.Selection}
-     */
-    addMousePointer() {
-      return d3.select(this).style('cursor', 'pointer');
-    }
-
-    /**
-     * Highlight the element that is under the cursor
-     * by reducing the opacity of all the elements on the graph.
-     * @param element {d3.Selection}
-     * @method highlight
-     */
-    highlight(element) {
-      const label = this.getAttribute('data-label');
-      if (!label) return;
-
-      const dimming = config.get('visualization:dimmingOpacity');
-      $(element).parent().find('[data-label]')
-        .css('opacity', 1)//Opacity 1 is needed to avoid the css application
-        .not((els, el) => String($(el).data('label')) === label)
-        .css('opacity', justifyOpacity(dimming));
-    }
-
-    /**
-     * Mouseout Behavior
-     *
-     * @param element {d3.Selection}
-     * @method unHighlight
-     */
-    unHighlight(element) {
-      $('[data-label]', element.parentNode).css('opacity', 1);
-    }
-
-    /**
-     * Adds D3 brush to SVG and returns the brush function
-     *
-     * @param xScale {Function} D3 xScale function
-     * @param svg {HTMLElement} Reference to SVG
-     * @returns {*} Returns a D3 brush function and a SVG with a brush group attached
-     */
-    createBrush(xScale, svg) {
-      const self = this;
-      const visConfig = self.handler.visConfig;
-      const { width, height } = svg.node().getBBox();
-      const isHorizontal = self.handler.categoryAxes[0].axisConfig.isHorizontal();
-
-      // Brush scale
-      const brush = d3.svg.brush();
-      if (isHorizontal) {
-        brush.x(xScale);
-      } else {
-        brush.y(xScale);
-      }
-
-      brush.on('brushend', function brushEnd() {
-
-        // Assumes data is selected at the chart level
-        // In this case, the number of data objects should always be 1
-        const data = d3.select(this).data()[0];
-        const isTimeSeries = (data.ordered && data.ordered.date);
-
-        // Allows for brushing on d3.scale.ordinal()
-        const selected = xScale.domain().filter(function (d) {
-          return (brush.extent()[0] <= xScale(d)) && (xScale(d) <= brush.extent()[1]);
-        });
-        const range = isTimeSeries ? brush.extent() : selected;
-
-        return self.emit('brush', {
-          range: range,
-          config: visConfig,
-          e: d3.event,
-          data: data
-        });
-      });
-
-      // if `addBrushing` is true, add brush canvas
-      if (self.listenerCount('brush')) {
-        const rect = svg.insert('g', 'g')
-          .attr('class', 'brush')
-          .call(brush)
-          .call(function (brushG) {
-            // hijack the brush start event to filter out right/middle clicks
-            const brushHandler = brushG.on('mousedown.brush');
-            if (!brushHandler) return; // touch events in use
-            brushG.on('mousedown.brush', function () {
-              if (validBrushClick(d3.event)) brushHandler.apply(this, arguments);
-            });
-          })
-          .selectAll('rect');
-
-        if (isHorizontal) {
-          rect.attr('height', height);
-        } else {
-          rect.attr('width', width);
-        }
-
-        return brush;
-      }
-    }
-  }
-
-  /**
-   * Determine if d3.Scale is quantitative
-   *
-   * @param element {d3.Scale}
-   * @method isQuantitativeScale
-   * @returns {boolean}
-   */
-  function isQuantitativeScale(scale) {
-    //Invert is a method that only exists on quantitative scales
-    if (scale.invert) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  function validBrushClick(event) {
-    return event.button === 0;
-  }
-
-
-  function justifyOpacity(opacity) {
-    const decimalNumber = parseFloat(opacity, 10);
-    const fallbackOpacity = 0.5;
-    return (0 <= decimalNumber  && decimalNumber <= 1) ? decimalNumber : fallbackOpacity;
-  }
-
-  return Dispatch;
-}
diff --git a/src/ui/public/vis_maps/lib/layout.js b/src/ui/public/vis_maps/lib/layout.js
deleted file mode 100644
index 24402f960c136..0000000000000
--- a/src/ui/public/vis_maps/lib/layout.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import d3 from 'd3';
-import MapSplitProvider from './splits/map_split';
-
-export default function LayoutFactory(Private) {
-  const mapSplit = Private(MapSplitProvider);
-  class Layout {
-    constructor(el, config, data) {
-      this.el = el;
-      this.config = config;
-      this.data = data;
-    }
-
-    render() {
-      this.removeAll();
-      this.createLayout();
-    }
-
-    createLayout() {
-      const wrapper = this.appendElem(this.el, 'div', 'vis-wrapper');
-      wrapper.datum(this.data.data);
-      const colWrapper = this.appendElem(wrapper.node(), 'div', 'vis-col-wrapper');
-      const chartWrapper = this.appendElem(colWrapper.node(), 'div', 'chart-wrapper');
-      chartWrapper.call(mapSplit, colWrapper.node(), this.config);
-    }
-
-    appendElem(el, type, className) {
-      if (!el || !type || !className) {
-        throw new Error('Function requires that an el, type, and class be provided');
-      }
-
-      if (typeof el === 'string') {
-        // Create a DOM reference with a d3 selection
-        // Need to make sure that the `el` is bound to this object
-        // to prevent it from being appended to another Layout
-        el = d3.select(this.el)
-          .select(el)[0][0];
-      }
-
-      return d3.select(el)
-      .append(type)
-      .attr('class', className);
-    }
-
-    removeAll() {
-      return d3.select(this.el).selectAll('*').remove();
-    }
-  }
-
-  return Layout;
-}
diff --git a/src/ui/public/vis_maps/lib/maps_config.js b/src/ui/public/vis_maps/lib/maps_config.js
deleted file mode 100644
index 3e5a036a4ca55..0000000000000
--- a/src/ui/public/vis_maps/lib/maps_config.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Provides vislib configuration, throws error if invalid property is accessed without providing defaults
- */
-import _ from 'lodash';
-
-export default function MapsConfigFactory() {
-
-  const DEFAULT_VIS_CONFIG = {
-    style: {
-      margin : { top: 10, right: 3, bottom: 5, left: 3 }
-    },
-    alerts: {},
-    categoryAxes: [],
-    valueAxes: []
-  };
-
-
-  class MapsConfig {
-    constructor(mapsConfigArgs) {
-      this._values = _.defaultsDeep({}, mapsConfigArgs, DEFAULT_VIS_CONFIG);
-    }
-
-    get(property, defaults) {
-      if (_.has(this._values, property) || typeof defaults !== 'undefined') {
-        return _.get(this._values, property, defaults);
-      } else {
-        throw new Error(`Accessing invalid config property: ${property}`);
-        return defaults;
-      }
-    }
-
-    set(property, value) {
-      return _.set(this._values, property, value);
-    }
-  }
-
-  return MapsConfig;
-}
diff --git a/src/ui/public/vis_maps/lib/splits/map_split.js b/src/ui/public/vis_maps/lib/splits/map_split.js
deleted file mode 100644
index 710c77083927a..0000000000000
--- a/src/ui/public/vis_maps/lib/splits/map_split.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import d3 from 'd3';
-define(function () {
-  return function ChartSplitFactory() {
-
-    /*
-     * Adds div DOM elements to the `.chart-wrapper` element based on the data layout.
-     * For example, if the data has rows, it returns the same number of
-     * `.chart` elements as row objects.
-     */
-    return function split(selection) {
-      selection.each(function (data) {
-        const div = d3.select(this)
-          .attr('class', function () {
-            // Determine the parent class
-            if (data.rows) {
-              return 'chart-wrapper-row';
-            } else if (data.columns) {
-              return 'chart-wrapper-column';
-            } else {
-              return 'chart-wrapper';
-            }
-          });
-        let divClass;
-
-        const charts = div.selectAll('charts')
-          .append('div')
-          .data(function (d) {
-            // Determine the child class
-            if (d.rows) {
-              divClass = 'chart-row';
-              return d.rows;
-            } else if (d.columns) {
-              divClass = 'chart-column';
-              return d.columns;
-            } else {
-              divClass = 'chart';
-              return [d];
-            }
-          })
-          .enter()
-          .append('div')
-          .attr('class', function () {
-            return divClass;
-          });
-
-        if (!data.geoJson) {
-          charts.call(split);
-        }
-      });
-    };
-  };
-});
diff --git a/src/ui/public/vis_maps/maps.js b/src/ui/public/vis_maps/maps.js
deleted file mode 100644
index 5a23cf13a48d5..0000000000000
--- a/src/ui/public/vis_maps/maps.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import _ from 'lodash';
-import $ from 'jquery';
-import d3 from 'd3';
-import MapsConfigProvider from './lib/maps_config';
-import TileMapChartProvider from './visualizations/tile_map';
-import EventsProvider from 'ui/events';
-import MapsDataProvider from './lib/data';
-import LayoutProvider from './lib/layout';
-import './styles/_tilemap.less';
-
-export default function MapsFactory(Private) {
-  const Events = Private(EventsProvider);
-  const MapsConfig = Private(MapsConfigProvider);
-  const TileMapChart = Private(TileMapChartProvider);
-  const Data = Private(MapsDataProvider);
-  const Layout = Private(LayoutProvider);
-
-  class Maps extends Events {
-    constructor($el, vis, mapsConfigArgs) {
-      super(arguments);
-      this.el = $el.get ? $el.get(0) : $el;
-      this.vis = vis;
-      this.mapsConfigArgs = mapsConfigArgs;
-
-      // memoize so that the same function is returned every time,
-      // allowing us to remove/re-add the same function
-      this.getProxyHandler = _.memoize(function (event) {
-        const self = this;
-        return function (e) {
-          self.emit(event, e);
-        };
-      });
-
-      this.enable = this.chartEventProxyToggle('on');
-      this.disable = this.chartEventProxyToggle('off');
-    }
-
-    chartEventProxyToggle(method) {
-      return function (event, chart) {
-        const proxyHandler = this.getProxyHandler(event);
-
-        _.each(chart ? [chart] : this.charts, function (chart) {
-          chart.events[method](event, proxyHandler);
-        });
-      };
-    }
-
-    on(event, listener) {
-      const first = this.listenerCount(event) === 0;
-      const ret = Events.prototype.on.call(this, event, listener);
-      const added = this.listenerCount(event) > 0;
-
-      // if this is the first listener added for the event
-      // enable the event in the handler
-      if (first && added && this.handler) this.handler.enable(event);
-
-      return ret;
-    }
-
-    off(event, listener) {
-      const last = this.listenerCount(event) === 1;
-      const ret = Events.prototype.off.call(this, event, listener);
-      const removed = this.listenerCount(event) === 0;
-
-      // Once all listeners are removed, disable the events in the handler
-      if (last && removed && this.handler) this.handler.disable(event);
-      return ret;
-    }
-
-    render(data, uiState) {
-      if (!data) {
-        throw new Error('No valid data!');
-      }
-
-      this.uiState = uiState;
-      this.data = new Data(data, this.uiState);
-      this.visConfig = new MapsConfig(this.mapsConfigArgs, this.data, this.uiState);
-      this.layout = new Layout(this.el, this.visConfig, this.data);
-      this.draw();
-    }
-
-    destroy() {
-      this.charts.forEach(chart => chart.destroy());
-      d3.select(this.el).selectAll('*').remove();
-    }
-
-    draw() {
-      // Destroy the charts before they get removed from the DOM on the new
-      // layout render.
-      if(this.charts !== undefined) {
-        this.charts.forEach(chart => chart.destroy());
-      }
-
-      this.layout.render();
-      const self = this;
-      this.charts = [];
-
-
-      let loadedCount = 0;
-      const chartSelection = d3.select(this.el).selectAll('.chart');
-      chartSelection.each(function (chartData) {
-        const chart = new TileMapChart(self, this, chartData);
-
-        self.activeEvents().forEach(function (event) {
-          self.enable(event, chart);
-        });
-
-        self.charts.push(chart);
-        chart.render();
-
-        chart.events.on('rendered', function () {
-          loadedCount++;
-          if (loadedCount === chartSelection.length) {
-            $(self.el).trigger('renderComplete');
-          }
-        });
-      });
-    }
-
-  }
-
-  return Maps;
-}
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 19a3cd7921655..9d67f1f5f0b02 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -1,86 +1,185 @@
+import $ from 'jquery';
 import _ from 'lodash';
-import MapsProvider from 'ui/vis_maps/maps';
 import VisRenderbotProvider from 'ui/vis/renderbot';
 import MapsVisTypeBuildChartDataProvider from 'ui/vislib_vis_type/build_chart_data';
+import FilterBarPushFilterProvider from 'ui/filter_bar/push_filter';
+import KibanaMap from './kibana_map';
+import './lib/tilemap_settings';
+import './styles/_tilemap.less';
+
+
+module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettings, Notifier, courier, getAppState) {
 
-module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettings, Notifier) {
-  const AngularPromise = $injector.get('Promise');
-  const Maps = Private(MapsProvider);
   const Renderbot = Private(VisRenderbotProvider);
   const buildChartData = Private(MapsVisTypeBuildChartDataProvider);
-  const notify = new Notifier({
-    location: 'Tilemap'
-  });
-
-  _.class(MapsRenderbot).inherits(Renderbot);
-  function MapsRenderbot(vis, $el, uiState) {
-    MapsRenderbot.Super.call(this, vis, $el, uiState);
-    this._createVis();
-  }
+  const notify = new Notifier({ location: 'Tilemap' });
+
+  class MapsRenderbot extends Renderbot {
+
+    constructor(vis, $el, uiState) {
+      super(vis, $el, uiState);
+
+      this._buildChartData = buildChartData.bind(this);//todo: buildChartData shouldn't be a mixin. too confusing.
+
+
+      if (tilemapSettings.getError()) {
+        //Still allow the visualization to be build, but show a toast that there was a problem retrieving map settings
+        //Even though the basemap will not display, the user will at least still see the overlay data
+        notify.warning(tilemapSettings.getError().message);
+      }
+      const containerElement = $($el)[0];
+      this._kibanaMap = new KibanaMap(containerElement);
+      this._kibanaMap.addDrawControl();
+
+      this._configureGeoHashLayer();
+      this._useUIState();
+
+      let previousPrecision = this._kibanaMap.getAutoPrecision();
+      let precisionChange = false;
+      this._kibanaMap.on('zoomchange', e => {
+        precisionChange = (previousPrecision !== this._kibanaMap.getAutoPrecision());
+        previousPrecision = this._kibanaMap.getAutoPrecision();
+      });
+      this._kibanaMap.on('moveend', ignore => {
+        this._persistUIStateFromMap();
+      });
+      this._kibanaMap.on('zoomend', ignore => {
+        if (precisionChange) {
+          courier.fetch();
+        } else {
+          this._kibanaMap.recreateGeohashOverlay();
+        }
+      });
+      this._kibanaMap.on('drawCreated:rectangle', event => {
+        addSpatialFilter(_.get(this.mapsData, 'geohashGridAgg'), 'geo_bounding_box', event.bounds);
+      });
+      this._kibanaMap.on('drawCreated:polygon', event => {
+        addSpatialFilter(_.get(this.mapsData, 'geohashGridAgg'), 'geo_polygon', { points: event.points });
+      });
 
-  MapsRenderbot.prototype._createVis = function () {
-    if (tilemapSettings.getError()) {
-      //Still allow the visualization to be build, but show a toast that there was a problem retrieving map settings
-      //Even though the basemap will not display, the user will at least still see the overlay data
-      notify.warning(tilemapSettings.getError().message);
     }
-    if (this.mapsVis) this.destroy();
-    this.mapsParams = this._getMapsParams();
-    this.mapsVis = new Maps(this.$el[0], this.vis, this.mapsParams);
 
-    _.each(this.vis.listeners, (listener, event) => {
-      this.mapsVis.on(event, listener);
-    });
+    /**
+     * called on data change
+     * @param esResponse
+     */
+    render(esResponse) {
+      this.mapsData = this._buildChartData(esResponse);
+      // const params = this._getMapsParams();
+      // this.mapsParams = params;
+      this._kibanaMap.setGeohashFeatureCollection(this.mapsData.geoJson);
+      this._useUIState();
+      this._kibanaMap.resize();
+    }
 
-    if (this.mapsData) {
-      this.mapsVis.render(this.mapsData, this.uiState);
+    destroy() {
+      this._kibanaMap.destroy();
     }
-  };
-
-  MapsRenderbot.prototype._getMapsParams = function () {
-    const self = this;
-
-    return _.assign(
-      {},
-      self.vis.type.params.defaults,
-      {
-        type: self.vis.type.name,
-        // Add attribute which determines whether an index is time based or not.
-        hasTimeField: self.vis.indexPattern && self.vis.indexPattern.hasTimeField()
-      },
-      self.vis.params
-    );
-  };
 
-  MapsRenderbot.prototype.buildChartData = buildChartData;
-  MapsRenderbot.prototype.render = function (esResponse) {
-    this.mapsData = this.buildChartData(esResponse);
-    return AngularPromise.delay(1).then(() => {
-      this.mapsVis.render(this.mapsData, this.uiState);
-    });
-  };
+    /**
+     * called on options change
+     */
+    updateParams() {
+      const newParams = this._getMapsParams();
+      this._configureGeoHashLayer();
+
+      if (newParams.wms.enabled) {
+        this._kibanaMap.setBaseLayer({
+          baseLayerType: 'wms',
+          options: {
+            url: newParams.wms.url,
+            ...newParams.wms.options
+          }
+        });
+      } else {
+        const url = tilemapSettings.getUrl();
+        const options = tilemapSettings.getTMSOptions();
+        this._kibanaMap.setBaseLayer({
+          baseLayerType: 'tms',
+          options: { url, ...options }
+        });
+      }
+
+      this._useUIState();
+    }
+
+
+    _useUIState() {
+      const uiState = this.vis.getUiState();
+      const newParams = this._getMapsParams();
+
+      const zoomFromUiState = parseInt(uiState.get('mapZoom'));
+      const centerFromUIState = uiState.get('mapCenter');
+      if (!isNaN(zoomFromUiState)) {
+        this._kibanaMap.setZoomLevel(zoomFromUiState);
+      } else {
+        this._kibanaMap.setZoomLevel(newParams.mapZoom);
+      }
+      if (centerFromUIState) {
+        this._kibanaMap.setCenter(centerFromUIState[0], centerFromUIState[1]);
+      } else {
+        this._kibanaMap.setCenter(newParams.mapCenter[0], newParams.mapCenter[1]);
+      }
+    }
+
+    _persistUIStateFromMap() {
+
+      const uiState = this.vis.getUiState();
+      const zoomFromUIState = parseInt(uiState.get('mapZoom'));
+      const centerFromUIState = uiState.get('mapCenter');
+      if (isNaN(zoomFromUIState) || this._kibanaMap.getZoomLevel() !== zoomFromUIState) {
+        uiState.set('mapZoom', this._kibanaMap.getZoomLevel());
+      }
 
-  MapsRenderbot.prototype.destroy = function () {
-    const self = this;
+      const centerFromMap = this._kibanaMap.getCenter();
+      if (!centerFromUIState || centerFromMap.lon !== centerFromUIState[1] || centerFromMap.lat !== centerFromUIState[0]) {
+        uiState.set('mapCenter', [centerFromMap.lat, centerFromMap.lon]);
+      }
+    }
 
-    const mapsVis = self.mapsVis;
+    _getMapsParams() {
+      return _.assign({}, this.vis.type.params.defaults, {
+        type: this.vis.type.name,
+        hasTimeField: this.vis.indexPattern && this.vis.indexPattern.hasTimeField()// Add attribute which determines whether an index is time based or not.
+      },
+        this.vis.params
+      );
+    }
 
-    _.forOwn(self.vis.listeners, function (listener, event) {
-      mapsVis.off(event, listener);
-    });
 
-    mapsVis.destroy();
-  };
+    _configureGeoHashLayer() {
+      const newParams = this._getMapsParams();
+      this._kibanaMap.setGeohashLayerOptions({
+        mapType: newParams.mapType,
+        heatmap: {
+          heatBlur: newParams.heatBlur,
+          heatMaxZoom: newParams.heatMaxZoom,
+          heatMinOpacity: newParams.heatMinOpacity,
+          heatNormalizeData: newParams.heatNormalizeData,
+          heatRadius: newParams.heatRadius
+        }
+      });
+    }
+  }
 
-  MapsRenderbot.prototype.updateParams = function () {
-    const self = this;
 
-    // get full maps params object
-    const newParams = self._getMapsParams();
+  function addSpatialFilter(agg, filterName, filterData) {
+    if (!agg) {
+      return;
+    }
+
+    const indexPatternName = agg.vis.indexPattern.id;
+    const field = agg.fieldName();
+    const filter = {};
+    filter[filterName] = {};
+    filter[filterName][field] = filterData;
+
+    const putFilter = Private(FilterBarPushFilterProvider)(getAppState());
+    return putFilter(filter, false, indexPatternName);
+  }
 
-    // if there's been a change, replace the vis
-    if (!_.isEqual(newParams, self.mapsParams)) self._createVis();
-  };
 
   return MapsRenderbot;
 };
+
+
diff --git a/src/ui/public/vis_maps/visualizations/_chart.js b/src/ui/public/vis_maps/visualizations/_chart.js
deleted file mode 100644
index a18682e36e81e..0000000000000
--- a/src/ui/public/vis_maps/visualizations/_chart.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import d3 from 'd3';
-import _ from 'lodash';
-import VislibLibDispatchProvider from '../lib/dispatch';
-import TooltipProvider from 'ui/vis/components/tooltip';
-export default function ChartBaseClass(Private) {
-
-  const Dispatch = Private(VislibLibDispatchProvider);
-  const Tooltip = Private(TooltipProvider);
-  /**
-   * The Base Class for all visualizations.
-   *
-   * @class Chart
-   * @constructor
-   * @param handler {Object} Reference to the Handler Class Constructor
-   * @param el {HTMLElement} HTML element to which the chart will be appended
-   * @param chartData {Object} Elasticsearch query results for this specific chart
-   */
-  class Chart {
-    constructor(handler, el, chartData) {
-      this.handler = handler;
-      this.chartEl = el;
-      this.chartData = chartData;
-      this.tooltips = [];
-
-      const events = this.events = new Dispatch(handler);
-
-      if (this.handler.visConfig && this.handler.visConfig.get('addTooltip', false)) {
-        const $el = this.handler.el;
-        const formatter = this.handler.data.get('tooltipFormatter');
-
-        // Add tooltip
-        this.tooltip = new Tooltip('chart', $el, formatter, events);
-        this.tooltips.push(this.tooltip);
-      }
-    }
-
-    render() {
-      const selection = d3.select(this.chartEl);
-      selection.selectAll('*').remove();
-      selection.call(this.draw());
-    }
-
-
-    /**
-     * Removes all DOM elements from the root element
-     *
-     * @method destroy
-     */
-    destroy() {
-      const selection = d3.select(this.chartEl);
-      this.events.removeAllListeners();
-      this.tooltips.forEach(function (tooltip) {
-        tooltip.destroy();
-      });
-      selection.remove();
-    }
-  }
-
-  return Chart;
-}
diff --git a/src/ui/public/vis_maps/visualizations/_map.js b/src/ui/public/vis_maps/visualizations/_map.js
deleted file mode 100644
index f77279dec63c5..0000000000000
--- a/src/ui/public/vis_maps/visualizations/_map.js
+++ /dev/null
@@ -1,362 +0,0 @@
-import _ from 'lodash';
-import $ from 'jquery';
-import L from 'leaflet';
-import VislibVisualizationsMarkerTypesScaledCirclesProvider from './marker_types/scaled_circles';
-import VislibVisualizationsMarkerTypesShadedCirclesProvider from './marker_types/shaded_circles';
-import VislibVisualizationsMarkerTypesGeohashGridProvider from './marker_types/geohash_grid';
-import VislibVisualizationsMarkerTypesHeatmapProvider from './marker_types/heatmap';
-import '../lib/tilemap_settings';
-
-export default function MapFactory(Private, tilemapSettings) {
-  const defaultMapZoom = 2;
-  const defaultMapCenter = [15, 5];
-  const defaultMarkerType = 'Scaled Circle Markers';
-
-  const markerTypes = {
-    'Scaled Circle Markers': Private(VislibVisualizationsMarkerTypesScaledCirclesProvider),
-    'Shaded Circle Markers': Private(VislibVisualizationsMarkerTypesShadedCirclesProvider),
-    'Shaded Geohash Grid': Private(VislibVisualizationsMarkerTypesGeohashGridProvider),
-    'Heatmap': Private(VislibVisualizationsMarkerTypesHeatmapProvider),
-  };
-
-  /**
-   * Tile Map Maps
-   *
-   * @class Map
-   * @constructor
-   * @param container {HTML Element} Element to render map into
-   * @param chartData {Object} Elasticsearch query results for this map
-   * @param params {Object} Parameters used to build a map
-   */
-  class TileMapMap {
-    constructor(container, chartData, params) {
-
-      this._container = $(container).get(0);
-      this._chartData = chartData;
-
-      // keep a reference to all of the optional params
-      this._events = _.get(params, 'events');
-      this._markerType = markerTypes[params.markerType] ? params.markerType : defaultMarkerType;
-      this._valueFormatter = params.valueFormatter || _.identity;
-      this._tooltipFormatter = params.tooltipFormatter;
-      this._geoJson = _.get(this._chartData, 'geoJson');
-      this._attr = params.attr || {};
-
-      const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(this._isWMSEnabled());
-      const zoom = typeof params.zoom === 'number' ?  params.zoom : defaultMapZoom;
-      this._mapZoom = Math.max(Math.min(zoom, maxZoom), minZoom);
-      this._mapCenter = params.center || defaultMapCenter;
-      this._createMap();
-    }
-
-    addBoundingControl() {
-      if (this._boundingControl) return;
-
-      const self = this;
-      const drawOptions = { draw: {} };
-
-      _.each(['polyline', 'polygon', 'circle', 'marker', 'rectangle'], function (drawShape) {
-        if (self._events && !self._events.listenerCount(drawShape)) {
-          drawOptions.draw[drawShape] = false;
-        } else {
-          drawOptions.draw[drawShape] = {
-            shapeOptions: {
-              stroke: false,
-              color: '#000'
-            }
-          };
-        }
-      });
-
-      this._boundingControl = new L.Control.Draw(drawOptions);
-      this.map.addControl(this._boundingControl);
-    }
-
-    addFitControl() {
-      if (this._fitControl) return;
-
-      const self = this;
-      const fitContainer = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-control-fit');
-
-      // Add button to fit container to points
-      const FitControl = L.Control.extend({
-        options: {
-          position: 'topleft'
-        },
-        onAdd: function () {
-          $(fitContainer).html('<a class="fa fa-crop" href="#" title="Fit Data Bounds"></a>')
-            .on('click', function (e) {
-              e.preventDefault();
-              self._fitBounds();
-            });
-
-          return fitContainer;
-        },
-        onRemove: function () {
-          $(fitContainer).off('click');
-        }
-      });
-
-      this._fitControl = new FitControl();
-      this.map.addControl(this._fitControl);
-    }
-
-    /**
-     * Adds label div to each map when data is split
-     *
-     * @method addTitle
-     * @param mapLabel {String}
-     * @return {undefined}
-     */
-    addTitle(mapLabel) {
-      if (this._label) return;
-
-      const label = this._label = L.control();
-
-      label.onAdd = function () {
-        this._div = L.DomUtil.create('div', 'tilemap-info tilemap-label');
-        this.update();
-        return this._div;
-      };
-      label.update = function () {
-        this._div.innerHTML = '<h2>' + _.escape(mapLabel) + '</h2>';
-      };
-
-      // label.addTo(this.map);
-      this.map.addControl(label);
-    }
-
-    /**
-     * remove css class for desat filters on map tiles
-     *
-     * @method saturateTiles
-     * @return undefined
-     */
-    saturateTiles() {
-      if (!this._attr.isDesaturated) {
-        $('img.leaflet-tile-loaded').addClass('filters-off');
-      }
-    }
-
-    updateSize() {
-      this.map.invalidateSize({
-        debounceMoveend: true
-      });
-    }
-
-    destroy() {
-      if (this._label) this._label.removeFrom(this.map);
-      if (this._fitControl) this._fitControl.removeFrom(this.map);
-      if (this._boundingControl) this._boundingControl.removeFrom(this.map);
-      if (this._markers) this._markers.destroy();
-      this.map.remove();
-      this.map = undefined;
-    }
-
-    /**
-     * Switch type of data overlay for map:
-     * creates featurelayer from mapData (geoJson)
-     *
-     * @method _addMarkers
-     */
-    _addMarkers() {
-      if (!this._geoJson) return;
-      if (this._markers) this._markers.destroy();
-
-      this._markers = this._createMarkers({
-        tooltipFormatter: this._tooltipFormatter,
-        valueFormatter: this._valueFormatter,
-        attr: this._attr
-      });
-
-      if (this._geoJson.features.length > 1) {
-        this._markers.addLegend();
-      }
-    }
-
-    /**
-     * Create the marker instance using the given options
-     *
-     * @method _createMarkers
-     * @param options {Object} options to give to marker class
-     * @return {Object} marker layer
-     */
-    _createMarkers(options) {
-      const MarkerType = markerTypes[this._markerType];
-      return new MarkerType(this.map, this._geoJson, options);
-    }
-
-    _attachEvents() {
-      const self = this;
-      const saturateTiles = self.saturateTiles.bind(self);
-
-      this._tileLayer.on('tileload', saturateTiles);
-      this._tileLayer.on('load', () => {
-
-        if (!self._events) {
-          return;
-        }
-
-        self._events.emit('rendered', {
-          chart: self._chartData,
-          map: self.map,
-          center: self._mapCenter,
-          zoom: self._mapZoom,
-        });
-      });
-
-      this.map.on('unload', function () {
-        self._tileLayer.off('tileload', saturateTiles);
-      });
-
-      this.map.on('moveend', function setZoomCenter() {
-        if (!self.map) return;
-        // update internal center and zoom references
-        const uglyCenter = self.map.getCenter();
-        self._mapCenter = [uglyCenter.lat, uglyCenter.lng];
-        self._mapZoom = self.map.getZoom();
-        self._addMarkers();
-
-        if (!self._events) return;
-
-        self._events.emit('mapMoveEnd', {
-          chart: self._chartData,
-          map: self.map,
-          center: self._mapCenter,
-          zoom: self._mapZoom,
-        });
-      });
-
-      this.map.on('draw:created', function (e) {
-        const drawType = e.layerType;
-        if (!self._events || !self._events.listenerCount(drawType)) return;
-
-        // TODO: Different drawTypes need differ info. Need a switch on the object creation
-        const bounds = e.layer.getBounds();
-
-        const southEast = bounds.getSouthEast();
-        const northWest = bounds.getNorthWest();
-        let southEastLng = southEast.lng;
-        if (southEastLng > 180) {
-          southEastLng -= 360;
-        }
-        let northWestLng = northWest.lng;
-        if (northWestLng < -180) {
-          northWestLng += 360;
-        }
-
-        const southEastLat = southEast.lat;
-        const northWestLat = northWest.lat;
-
-        //Bounds cannot be created unless they form a box with larger than 0 dimensions
-        //Invalid areas are rejected by ES.
-        if (southEastLat === northWestLat || southEastLng === northWestLng) {
-          return;
-        }
-
-        self._events.emit(drawType, {
-          e: e,
-          chart: self._chartData,
-          bounds: {
-            bottom_right: {
-              lat: southEastLat,
-              lon: southEastLng
-            },
-            top_left: {
-              lat: northWestLat,
-              lon: northWestLng
-            }
-          }
-        });
-      });
-
-      this.map.on('zoomend', function () {
-        if (!self.map) return;
-        self._mapZoom = self.map.getZoom();
-        if (!self._events) return;
-
-        self._events.emit('mapZoomEnd', {
-          chart: self._chartData,
-          map: self.map,
-          zoom: self._mapZoom,
-        });
-      });
-    }
-
-    _isWMSEnabled() {
-      return this._attr.wms ? this._attr.wms.enabled : false;
-    }
-
-    _createTileLayer() {
-      if (this._isWMSEnabled()) {
-        const wmsOpts = this._attr.wms;
-        const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(true);
-        // http://leafletjs.com/reference.html#tilelayer-wms-options
-        return L.tileLayer.wms(wmsOpts.url, {
-          // user settings
-          ...wmsOpts.options,
-          minZoom: minZoom,
-          maxZoom: maxZoom,
-        });
-      }
-
-      const tileUrl = tilemapSettings.hasError() ? '' : tilemapSettings.getUrl();
-      const leafletOptions = tilemapSettings.getTMSOptions();
-      return L.tileLayer(tileUrl, leafletOptions);
-    }
-
-    /**
-     *  Create the leaflet Map object. In our implementation this is basically just
-     *  a container for the layer created by `this._createTileLayer()`. User settings
-     *  are passed as options to the layer and inherited by the map so we can keep
-     *  this function pretty generic.
-     *
-     *  The map is responsible for the current center and zoom level though, as those
-     *  are global to each map.
-     *
-     *  @return undefined
-     */
-    _createMap() {
-      if (this.map) this.destroy();
-
-      // expose at `this._tileLayer`, `this._attachEvents()` accesses it this way
-      this._tileLayer = this._createTileLayer();
-
-      // http://leafletjs.com/reference.html#map-options
-      this.map = L.map(this._container, {
-        center: this._mapCenter,
-        zoom: this._mapZoom,
-        layers: [this._tileLayer],
-        maxBounds: L.latLngBounds([-90, -220], [90, 220]),
-        scrollWheelZoom: false,
-        fadeAnimation: true,
-      });
-
-      this._attachEvents();
-      this._addMarkers();
-    }
-
-    /**
-     * zoom map to fit all features in featureLayer
-     *
-     * @method _fitBounds
-     * @param map {Leaflet Object}
-     * @return {boolean}
-     */
-    _fitBounds() {
-      this.map.fitBounds(this._getDataRectangles());
-    }
-
-    /**
-     * Get the Rectangles representing the geohash grid
-     *
-     * @return {LatLngRectangles[]}
-     */
-    _getDataRectangles() {
-      if (!this._geoJson) return [];
-      return _.pluck(this._geoJson.features, 'properties.rectangle');
-    }
-  }
-
-  return TileMapMap;
-}
diff --git a/src/ui/public/vis_maps/visualizations/tile_map.js b/src/ui/public/vis_maps/visualizations/tile_map.js
deleted file mode 100644
index 1c423d6fee24a..0000000000000
--- a/src/ui/public/vis_maps/visualizations/tile_map.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import _ from 'lodash';
-import $ from 'jquery';
-import VislibVisualizationsChartProvider from './_chart';
-import VislibVisualizationsMapProvider from './_map';
-export default function TileMapFactory(Private) {
-
-  const Chart = Private(VislibVisualizationsChartProvider);
-  const TileMapMap = Private(VislibVisualizationsMapProvider);
-
-  /**
-   * Tile Map Visualization: renders maps
-   *
-   * @class TileMap
-   * @constructor
-   * @extends Chart
-   * @param handler {Object} Reference to the Handler Class Constructor
-   * @param chartEl {HTMLElement} HTML element to which the map will be appended
-   * @param chartData {Object} Elasticsearch query results for this map
-   */
-  class TileMap extends Chart {
-    constructor(handler, chartEl, chartData) {
-      super(handler, chartEl, chartData);
-
-      // track the map objects
-      this.maps = [];
-      this._chartData = chartData || {};
-      _.assign(this, this._chartData);
-
-      this._appendGeoExtents();
-    }
-
-    /**
-     * Draws tile map, called on chart render
-     *
-     * @method draw
-     * @return {Function} - function to add a map to a selection
-     */
-    draw() {
-      const self = this;
-
-      return function (selection) {
-        selection.each(function () {
-          self._appendMap(this);
-        });
-      };
-    }
-
-    /**
-     * Invalidate the size of the map, so that leaflet will resize to fit.
-     * then moves to center
-     *
-     * @method resizeArea
-     * @return {undefined}
-     */
-    resizeArea() {
-      this.maps.forEach(function (map) {
-        map.updateSize();
-      });
-    }
-
-    /**
-     * clean up the maps
-     *
-     * @method destroy
-     * @return {undefined}
-     */
-    destroy() {
-      this.maps = this.maps.filter(function (map) {
-        map.destroy();
-      });
-    }
-
-    /**
-     * Adds allmin and allmax properties to geoJson data
-     *
-     * @method _appendMap
-     * @param selection {Object} d3 selection
-     */
-    _appendGeoExtents() {
-      // add allmin and allmax to geoJson
-      const geoMinMax = this.handler.data.getGeoExtents();
-      this.geoJson.properties.allmin = geoMinMax.min;
-      this.geoJson.properties.allmax = geoMinMax.max;
-    }
-
-    /**
-     * Renders map
-     *
-     * @method _appendMap
-     * @param selection {Object} d3 selection
-     */
-    _appendMap(selection) {
-      const container = $(selection).addClass('tilemap');
-      const uiStateParams = {
-        mapCenter: this.handler.uiState.get('mapCenter'),
-        mapZoom: this.handler.uiState.get('mapZoom')
-      };
-
-      const params = _.assign({}, _.get(this._chartData, 'geoAgg.vis.params'), uiStateParams);
-
-      const tooltipFormatter = this.handler.visConfig.get('addTooltip') ? this.tooltipFormatter : null;
-      const map = new TileMapMap(container, this._chartData, {
-        center: params.mapCenter,
-        zoom: params.mapZoom,
-        events: this.events,
-        markerType: this.handler.visConfig.get('mapType'),
-        tooltipFormatter: tooltipFormatter,
-        valueFormatter: this.valueFormatter,
-        attr: this.handler.visConfig._values
-      });
-
-      // add title for splits
-      if (this.title) {
-        map.addTitle(this.title);
-      }
-
-      // add fit to bounds control
-      if (_.get(this.geoJson, 'features.length') > 0) {
-        map.addFitControl();
-        map.addBoundingControl();
-      }
-
-      this.maps.push(map);
-    }
-  }
-
-  return TileMap;
-}

From 96d5ba78e18de30235c26b0a67ea2fdcf907720c Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Mon, 20 Feb 2017 19:35:53 -0500
Subject: [PATCH 116/150] enable WMS

---
 src/ui/public/vis_maps/kibana_map.js     | 45 ++++++++++++++----------
 src/ui/public/vis_maps/maps_renderbot.js |  6 ++++
 2 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 1d7955257d1b0..99114891f81bf 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -301,7 +301,9 @@ class KibanaMap extends EventEmitter {
       }
     });
 
-    this._leafletMap.on('zoomend', e => {this.emit('zoomend');});
+    this._leafletMap.on('zoomend', e => {
+      this.emit('zoomend');
+    });
     this._leafletMap.on('moveend', e => this.emit('moveend'));
 
     this._leafletMap.on('draw:created', event => {
@@ -518,34 +520,40 @@ class KibanaMap extends EventEmitter {
     if (settings === null) {
       if (this._leafletBaseLayer && this._leafletMap) {
         this._leafletMap.removeLayer(this._leafletBaseLayer);
+        this._leafletBaseLayer = null;
       }
       return;
     }
 
-    //
+    if (this._leafletBaseLayer) {
+      //todo: do this correctly, by checking if there is a difference.
+      this._leafletMap.removeLayer(this._leafletBaseLayer);
+      this._leafletBaseLayer = null;
+    }
+
+    let baseLayer;
     if (settings.baseLayerType === 'wms') {
-      this._setWMSBaseLayer(settings.options);
-    } else {
-      this._setTMSBaseLayer((settings.options));
+      baseLayer = this._getWMSBaseLayer(settings.options);
+    } else if (settings.baseLayerType === 'tms') {
+      baseLayer = this._getTMSBaseLayer((settings.options));
     }
 
 
-  }
+    this._leafletBaseLayer = baseLayer;
+    this._leafletBaseLayer.addTo(this._leafletMap);
+    this._leafletBaseLayer.bringToBack();
+    this.resize();
 
-  _setTMSBaseLayer(options) {
-    if (!this._leafletBaseLayer) {
-      this._leafletBaseLayer = L.tileLayer(options.url, {});
-      this._leafletBaseLayer.addTo(this._leafletMap);
-      this._leafletBaseLayer.bringToBack();
-      this.resize();
-      return;
-    }
+  }
 
-    //todo: make changes if settings change
+  _getTMSBaseLayer(options) {
+    return L.tileLayer(options.url, {
+      //todo
+    });
   }
 
-  _setWMSBaseLayer(options) {
-    // console.log('todo: _setWMSBaseLayer', arguments);
+  _getWMSBaseLayer(options) {
+    return L.tileLayer.wms(options.url, options);
   }
 
   addDrawControl() {
@@ -600,6 +608,7 @@ class KibanaMap extends EventEmitter {
     // this.fitIfNotVisible(this._featureCollection);
 
   }
+
   fitIfNotVisible(featureCollection) {
     const bounds = _.pluck(featureCollection.features, 'properties.rectangle');
     const mapBounds = this._leafletMap.getBounds();
@@ -622,7 +631,7 @@ class KibanaMap extends EventEmitter {
   setGeohashFeatureCollection(featureCollection) {
     // if (this._geohashGridOverlay && _.isEqual(this._geohashGridOverlay.getFeatureCollection(), featureCollection)) {
     //   no need to recreate layer.
-      // return;
+    // return;
     // }
     this._featureCollection = featureCollection;
     this._recreateOverlay();
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 9d67f1f5f0b02..bce5dee423859 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -83,10 +83,16 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       const newParams = this._getMapsParams();
       this._configureGeoHashLayer();
 
+
+      // http://leafletjs.com/reference.html#tilelayer-wms-options
+
       if (newParams.wms.enabled) {
+        const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(true);
         this._kibanaMap.setBaseLayer({
           baseLayerType: 'wms',
           options: {
+            minZoom: minZoom,
+            maxZoom: maxZoom,
             url: newParams.wms.url,
             ...newParams.wms.options
           }

From 0900e9a7651b9afe918c22116fc6aa07fab4658f Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 21 Feb 2017 00:57:44 -0500
Subject: [PATCH 117/150] extract choropleth in separate class

---
 .../public/choropleth_controller.js           |  53 ++---
 src/ui/public/vis_maps/choropleth_layer.js    | 142 ++++++++++++++
 src/ui/public/vis_maps/kibana_map.js          | 181 ++++--------------
 src/ui/public/vis_maps/kibana_map_layer.js    |  31 +++
 4 files changed, 238 insertions(+), 169 deletions(-)
 create mode 100644 src/ui/public/vis_maps/choropleth_layer.js
 create mode 100644 src/ui/public/vis_maps/kibana_map_layer.js

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index d5358047870df..d348e852523b4 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -1,7 +1,8 @@
 import uiModules from 'ui/modules';
 import _ from 'lodash';
 import AggConfigResult from 'ui/vis/agg_config_result';
-import KibanaMap from 'ui/vis_maps/kibana_map.js';
+import KibanaMap from 'ui/vis_maps/kibana_map';
+import ChoroplethLayer from 'ui/vis_maps/choropleth_layer';
 import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_click_handler';
 import colorramps from 'ui/vislib/components/color/colormaps';
 
@@ -19,19 +20,10 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
 
   const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
 
-  kibanaMap.on('choropleth:select', function (event) {
-    const appState = getAppState();
-    const clickHandler = filterBarClickHandler(appState);
-    const aggs = $scope.vis.aggs.getResponseAggs();
-    const aggConfigResult = new AggConfigResult(aggs[0], false, event, event);
-    clickHandler({ point: { aggConfigResult: aggConfigResult } });
-  });
+  let choroplethLayer = null;
 
   $scope.$watch('esResponse', async function (response) {
-
-
     const termAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName.segment, 'id'));
-
     let results;
     if (!response || !response.aggregations) {
       results = [];
@@ -46,20 +38,13 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       });
     }
 
-
-
     const options = $scope.vis.params;
-    // if (!options.selectedLayer.url || !options.selectedJoinField) {
-    //   console.log('invalid selection');//todo: fix this
-    //   return;
-    // }
-
     if (!options.selectedJoinField) {
       options.selectedJoinField = options.selectedLayer.fields[0];
     }
 
-    kibanaMap.setChoroplethLayer(options.selectedLayer.url, options.selectedJoinField);
-    kibanaMap.setChoroplethMetrics(results);
+    updateChoroplethLayer(options.selectedLayer.url);
+    choroplethLayer.setChoroplethMetrics(results);
     kibanaMap.resize();
 
   });
@@ -68,8 +53,10 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     if (!options.selectedJoinField) {
       options.selectedJoinField = options.selectedLayer.fields[0];
     }
-    kibanaMap.setChoroplethLayer(options.selectedLayer.url, options.selectedJoinField);
-    kibanaMap.setChoroplethColorRamp(colorramps[options.colorSchema]);
+
+    updateChoroplethLayer(options.selectedLayer.url);
+    choroplethLayer.setChoroplethJoinField(options.selectedJoinField);
+    choroplethLayer.setChoroplethColorRamp(colorramps[options.colorSchema]);
     kibanaMap.resize();
   });
 
@@ -81,6 +68,28 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     return { width: $element.width(), height: $element.height() };
   }
 
+
+  function updateChoroplethLayer(url) {
+
+    if (choroplethLayer && choroplethLayer.equalsGeoJsonUrl(url)) {
+      return;
+    }
+    kibanaMap.removeLayer(choroplethLayer);
+    choroplethLayer = new ChoroplethLayer(url);
+    choroplethLayer.on('select', function (event) {
+      console.log('select!', arguments);
+      const appState = getAppState();
+      const clickHandler = filterBarClickHandler(appState);
+      const aggs = $scope.vis.aggs.getResponseAggs();
+      const aggConfigResult = new AggConfigResult(aggs[0], false, event, event);
+      clickHandler({ point: { aggConfigResult: aggConfigResult } });
+    });
+    kibanaMap.addLayer(choroplethLayer);
+  }
+
+
+
+
 });
 
 
diff --git a/src/ui/public/vis_maps/choropleth_layer.js b/src/ui/public/vis_maps/choropleth_layer.js
new file mode 100644
index 0000000000000..867c36b285535
--- /dev/null
+++ b/src/ui/public/vis_maps/choropleth_layer.js
@@ -0,0 +1,142 @@
+import KibanaMapLayer from './kibana_map_layer';
+import $ from 'jquery';
+import L from 'leaflet';
+import _ from 'lodash';
+import colorramps from 'ui/vislib/components/color/colormaps';
+
+
+export default class ChoroplethLayer extends KibanaMapLayer {
+
+  constructor(geojsonUrl) {
+    super();
+
+    this._metrics = null;
+    this._joinField = null;
+    this._colorRamp = colorramps['Yellow to Red'];
+
+    this._geojsonUrl = geojsonUrl;
+    this._leafletLayer = L.geoJson(null, {
+      onEachFeature: (feature, layer) => {
+        layer.on('click', () => {
+          this.emit('select', feature.properties[this._joinField]);
+        });
+      },
+      style: emptyStyle
+    });
+
+    this._loaded = false;
+    $.ajax({
+      dataType: 'json',
+      url: geojsonUrl,
+      success: (data) => {
+        this._leafletLayer.addData(data);
+        this._loaded = true;
+        this._setChoroplethStyle();
+      }
+    }).error(function (e) {
+      // notifier.fatal(e);
+      // console.error(e);
+    });
+  }
+
+  _setChoroplethStyle() {
+    if (!this._loaded || !this._metrics || !this._joinField) {
+      return;
+    }
+    const styleFunction = makeChoroplethStyleFunction(this._metrics, this._colorRamp, this._joinField);
+    this._leafletLayer.setStyle(styleFunction);
+  }
+
+
+  setChoroplethJoinField(joinfield) {
+    if (joinfield === this._joinField) {
+      return;
+    }
+    this._joinField = joinfield;
+    this._setChoroplethStyle();
+  }
+
+
+  setChoroplethMetrics(metrics) {
+    this._metrics = metrics;
+    this._setChoroplethStyle();
+  }
+
+  setChoroplethColorRamp(colorRamp) {
+    if (_.isEqual(colorRamp, this._colorRamp)) {
+      return;
+    }
+    this._colorRamp = colorRamp;
+    this._setChoroplethStyle();
+  }
+
+  equalsGeoJsonUrl(geojsonUrl) {
+    return this._geojsonUrl === geojsonUrl;
+  }
+
+
+}
+
+
+function makeChoroplethStyleFunction(data, colorramp, joinField) {
+
+  if (data.length === 0) {
+    return function () {
+      return emptyStyle();
+    };
+  }
+
+  let min = data[0].value;
+  let max = data[0].value;
+  for (let i = 1; i < data.length; i += 1) {
+    min = Math.min(data[i].value, min);
+    max = Math.max(data[i].value, max);
+  }
+
+  return function (geojsonFeature) {
+
+    const match = data.find((bucket) => {
+      return bucket.term === geojsonFeature.properties[joinField];
+    });
+
+    if (!match) {
+      return emptyStyle();
+    }
+
+    return {
+      fillColor: getChoroplethColor(match.value, min, max, colorramp),
+      weight: 2,
+      opacity: 1,
+      color: 'white',
+      fillOpacity: 0.7
+    };
+  };
+
+}
+
+function getChoroplethColor(value, min, max, colorRamp) {
+  if (min === max) {
+    return colorRamp[colorRamp.length - 1];
+  }
+  const fraction = (value - min) / (max - min);
+  const index = Math.round(colorRamp.length * fraction) - 1;
+  const i = Math.max(Math.min(colorRamp.length - 1, index), 0);
+
+  const color = colorRamp[i][1];
+  const red = Math.floor(color[0] * 255);
+  const green = Math.floor(color[1] * 255);
+  const blue = Math.floor(color[2] * 255);
+  return `rgb(${red},${green},${blue})`;
+}
+
+
+const emptyStyleObject = {
+  weight: 1,
+  opacity: 0.6,
+  color: 'rgb(200,200,200)',
+  fillOpacity: 0
+};
+function emptyStyle() {
+  return emptyStyleObject;
+}
+
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 99114891f81bf..97fb18ec57425 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -290,6 +290,8 @@ class KibanaMap extends EventEmitter {
       minZoom: 2,
       maxZoom: 10
     });
+
+
     // this._leafletMap.setView([0, 0], 0);//todo: pass in from UI-state (if any)
     this._leafletMap.fitWorld();//todo: pass in from UI-state (if any)
 
@@ -365,88 +367,35 @@ class KibanaMap extends EventEmitter {
     this._leafletDrawControl = null;
     this._geohashOptions = {};
 
-    this._choroplethLeafletLayer = null;
-    this._choroplethMetrics = null;
-    this._choroplethColorRamp = colorramps['Yellow to Red'];
+    this._layers = [];
 
   }
 
-
-  destroy() {
-    //todo
-    this._leafletMap.remove();
+  addLayer(layer) {
+    this._layers.push(layer);
+    layer.addToLeafletMap(this._leafletMap);
   }
 
-  getCenter() {
-    const center = this._leafletMap.getCenter();
-    return { lon: center.lng, lat: center.lat };
-  }
-
-
-  setChoroplethLayer(url, joinfield) {
-
-    if (this._choroplethUrl === url) {
-      if (this._joinField !== joinfield) {
-        this._joinField = joinfield;
-        this._setChoroplethStyle();
-      }
-      // console.log('skip requesting data, is the same');
-      return;
-    }
-
-    this._joinField = joinfield;
-    this._choroplethUrl = url;
-
-    if (this._choroplethLeafletLayer) {
-      this._leafletMap.removeLayer(this._choroplethLeafletLayer);
+  removeLayer(layer) {
+    const index = this._layers.indexOf(layer);
+    if (index >= 0) {
+      this._layers.splice(index, 1);
+      layer.removeFromLeafletMap(this._leafletMap);
     }
-
-    this._choroplethLeafletLayer = L.geoJson(null, {
-      onEachFeature: (feature, layer) => {
-        layer.on('click', () => {
-          this.emit('choropleth:select', feature.properties[this._joinField]);
-        });
-      },
-      style: emptyStyle
-    });
-    this._choroplethLeafletLayer.addTo(this._leafletMap);
-
-    this._loaded = false;
-    $.ajax({
-      dataType: 'json',
-      url: url,
-      success: (data) => {
-        this._choroplethLeafletLayer.addData(data);
-        this._loaded = true;
-        this._setChoroplethStyle();
-      }
-    }).error(function (e) {
-      // notifier.fatal(e);
-      // console.error(e);
-    });
   }
 
-  _setChoroplethStyle() {
-    if (!this._choroplethMetrics) {
-      return;
-    }
-    const styleFunction = makeChoroplethStyleFunction(this._choroplethMetrics, this._choroplethColorRamp, this._joinField);
-    if (this._choroplethLeafletLayer) {
-      this._choroplethLeafletLayer.setStyle(styleFunction);
+  destroy() {
+    this.setBaseLayer(null);
+    for (const layer of this._layers) {
+      layer.removeFromLeafletMap(this._leafletMap);
+      layer.destroy();
     }
+    this._leafletMap.remove();
   }
 
-  setChoroplethMetrics(metrics) {
-    this._choroplethMetrics = metrics;
-    this._setChoroplethStyle();
-  }
-
-  setChoroplethColorRamp(colorRamp) {
-    if (_.isEqual(colorRamp, this._choroplethColorRamp)) {
-      return;
-    }
-    this._choroplethColorRamp = colorRamp;
-    this._setChoroplethStyle();
+  getCenter() {
+    const center = this._leafletMap.getCenter();
+    return { lon: center.lng, lat: center.lat };
   }
 
   setCenter(latitude, longitude) {
@@ -538,7 +487,6 @@ class KibanaMap extends EventEmitter {
       baseLayer = this._getTMSBaseLayer((settings.options));
     }
 
-
     this._leafletBaseLayer = baseLayer;
     this._leafletBaseLayer.addTo(this._leafletMap);
     this._leafletBaseLayer.bringToBack();
@@ -609,20 +557,20 @@ class KibanaMap extends EventEmitter {
 
   }
 
-  fitIfNotVisible(featureCollection) {
-    const bounds = _.pluck(featureCollection.features, 'properties.rectangle');
-    const mapBounds = this._leafletMap.getBounds();
-
-    //layerbounds is sometimes empty:
-    try {
-      const layerbounds = this._geohashGridOverlay.getBounds();
-      if (mapBounds && layerbounds && !mapBounds.intersects(layerbounds)) {
-        this._leafletMap.fitBounds(bounds);
-      }
-    } catch (e) {
-      //todo; shouldn't do this under zooming, only when play button is pressed.
-    }
-  }
+  // fitIfNotVisible(featureCollection) {
+  //   const bounds = _.pluck(featureCollection.features, 'properties.rectangle');
+  //   const mapBounds = this._leafletMap.getBounds();
+  //
+  //   //layerbounds is sometimes empty:
+  //   try {
+  //     const layerbounds = this._geohashGridOverlay.getBounds();
+  //     if (mapBounds && layerbounds && !mapBounds.intersects(layerbounds)) {
+  //       this._leafletMap.fitBounds(bounds);
+  //     }
+  //   } catch (e) {
+  //     //todo; shouldn't do this under zooming, only when play button is pressed.
+  //   }
+  // }
 
   recreateGeohashOverlay() {
     this._recreateOverlay();
@@ -738,66 +686,5 @@ function dataToHeatArray(max, heatNormalizeData, featureCollection) {
   });
 }
 
-function makeChoroplethStyleFunction(data, colorramp, joinField) {
-
-  if (data.length === 0) {
-    return function () {
-      return emptyStyle();
-    };
-  }
-
-  let min = data[0].value;
-  let max = data[0].value;
-  for (let i = 1; i < data.length; i += 1) {
-    min = Math.min(data[i].value, min);
-    max = Math.max(data[i].value, max);
-  }
-
-  return function (geojsonFeature) {
-
-    const match = data.find((bucket) => {
-      return bucket.term === geojsonFeature.properties[joinField];
-    });
-
-    if (!match) {
-      return emptyStyle();
-    }
-
-    return {
-      fillColor: getChoroplethColor(match.value, min, max, colorramp),
-      weight: 2,
-      opacity: 1,
-      color: 'white',
-      fillOpacity: 0.7
-    };
-  };
-
-}
-
-function getChoroplethColor(value, min, max, colorRamp) {
-  if (min === max) {
-    return colorRamp[colorRamp.length - 1];
-  }
-  const fraction = (value - min) / (max - min);
-  const index = Math.round(colorRamp.length * fraction) - 1;
-  const i = Math.max(Math.min(colorRamp.length - 1, index), 0);
-
-  const color = colorRamp[i][1];
-  const red = Math.floor(color[0] * 255);
-  const green = Math.floor(color[1] * 255);
-  const blue = Math.floor(color[2] * 255);
-  return `rgb(${red},${green},${blue})`;
-}
-
-
-const emptyStyleObject = {
-  weight: 1,
-  opacity: 0.6,
-  color: 'rgb(200,200,200)',
-  fillOpacity: 0
-};
-function emptyStyle() {
-  return emptyStyleObject;
-}
 
 export default KibanaMap;
diff --git a/src/ui/public/vis_maps/kibana_map_layer.js b/src/ui/public/vis_maps/kibana_map_layer.js
new file mode 100644
index 0000000000000..81bbb23540bd3
--- /dev/null
+++ b/src/ui/public/vis_maps/kibana_map_layer.js
@@ -0,0 +1,31 @@
+import { EventEmitter } from 'events';
+// import L from 'leaflet';
+// import $ from 'jquery';
+
+
+export default class KibanaMapLayer extends EventEmitter {
+  constructor() {
+    super();
+    this._leafletLayer = null;
+  }
+
+  destroy() {
+
+  }
+
+  addToLeafletMap(leafletMap) {
+    this._leafletLayer.addTo(leafletMap);
+  }
+
+  removeFromLeafletMap(leafletMap) {
+    leafletMap.removeLayer(this._leafletLayer);
+  }
+}
+
+
+
+
+
+
+
+

From 35dda8a8eca377b77d756f3ce62e29b1ac360939 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 21 Feb 2017 02:22:37 -0500
Subject: [PATCH 118/150] isolate geohash layer in separate module

---
 .../kbn_vislib_vis_types/public/tile_map.js   |   7 +-
 src/ui/public/vis_maps/geohash_layer.js       | 364 ++++++++++++++
 src/ui/public/vis_maps/kibana_map.js          | 446 +-----------------
 src/ui/public/vis_maps/kibana_map_layer.js    |   4 -
 src/ui/public/vis_maps/maps_renderbot.js      |  53 ++-
 5 files changed, 411 insertions(+), 463 deletions(-)
 create mode 100644 src/ui/public/vis_maps/geohash_layer.js

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
index 6fd120b47f340..f34ce8f0f9d23 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
@@ -45,7 +45,12 @@ export default function TileMapVisType(Private, getAppState, courier, config) {
         value: 'topright',
         text: 'top right',
       }],
-      mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid', 'Heatmap'],
+      // mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid', 'Heatmap'],
+      mapTypes: ['Scaled Circle Markers',
+        // 'Shaded Circle Markers',
+        // 'Shaded Geohash Grid',
+        'Heatmap'
+      ],
       canDesaturate: !!supports.cssFilters,
       editor: tileMapTemplate
     },
diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
new file mode 100644
index 0000000000000..c0089503771af
--- /dev/null
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -0,0 +1,364 @@
+import KibanaMapLayer from './kibana_map_layer';
+import L from 'leaflet';
+import _ from 'lodash';
+import d3 from 'd3';
+
+class GeohashGridOverlay {
+
+  constructor(featureCollection, layerOptions, targetZoom) {
+    this._geohashGeoJson = featureCollection;
+    this._zoom = targetZoom;
+  }
+
+  getLeafletLayer() {
+    return this._leafletLayer;
+  }
+
+  getMarkerFunction() {
+    throw new Error('should implement getMarkerFunction');
+  }
+
+  getStyleFunction() {
+    const min = _.get(this._geohashGeoJson, 'properties.min', 0);
+    const max = _.get(this._geohashGeoJson, 'properties.max', 1);
+    this._legendColors = makeCircleMarkerLegendColors(min, max);
+    return makeStyleFunction(min, max, this._legendColors);
+  }
+
+}
+
+
+class ScaledCircleOverlay extends GeohashGridOverlay {
+  constructor() {
+    super(...arguments);
+    this._leafletLayer = L.geoJson(null, {
+      pointToLayer: this.getMarkerFunction(),
+      style: this.getStyleFunction()
+    });
+    this._leafletLayer.addData(this._geohashGeoJson);
+  }
+
+  getMarkerFunction() {
+    const scaleFactor = 0.6;
+    return (feature, latlng) => {
+      const value = feature.properties.value;
+      const scaledRadius = this._radiusScale(value) * scaleFactor;
+      return L.circleMarker(latlng).setRadius(scaledRadius);
+    };
+  }
+
+  /**
+   * radiusScale returns a number for scaled circle markers
+   * for relative sizing of markers
+   *
+   * @method _radiusScale
+   * @param value {Number}
+   * @return {Number}
+   */
+  _radiusScale(value) {
+    const precisionBiasBase = 5;
+    const precisionBiasNumerator = 200;
+
+    const zoom = this._zoom;
+    const maxValue = this._geohashGeoJson.properties.max;
+    const precision = _.max(this._geohashGeoJson.features.map((feature) => {
+      return String(feature.properties.geohash).length;
+    }));
+
+    const pct = Math.abs(value) / Math.abs(maxValue);
+    const zoomRadius = 0.5 * Math.pow(2, zoom);
+    const precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
+
+    // square root value percentage
+    return Math.pow(pct, 0.5) * zoomRadius * precisionScale;
+  }
+
+  getBounds() {
+    return this._leafletLayer.getBounds();
+  }
+
+
+}
+
+
+/**
+ * Map overlay: canvas layer with leaflet.heat plugin
+ *
+ * @param map {Leaflet Object}
+ * @param geoJson {geoJson Object}
+ * @param params {Object}
+ */
+class HeatmapOverlay extends GeohashGridOverlay {
+
+  constructor(featureCollection, heatmapOptions) {
+    super(...arguments);
+    const max = _.get(this._geohashGeoJson, 'properties.max');
+    const points = dataToHeatArray(max, heatmapOptions.heatNormalizeData, this._geohashGeoJson);
+    this._leafletLayer = L.heatLayer(points, heatmapOptions);
+    // super(map, geoJson, params);
+    // this._disableTooltips = false;
+    //
+    //
+    // this.addLegend = _.noop;
+    //
+    // this._getLatLng = _.memoize(function (feature) {
+    //   return L.latLng(
+    //     feature.geometry.coordinates[1],
+    //     feature.geometry.coordinates[0]
+    //   );
+    // }, function (feature) {
+    //   // turn coords into a string for the memoize cache
+    //   return [feature.geometry.coordinates[1], feature.geometry.coordinates[0]].join(',');
+    // });
+  }
+
+
+  // _createMarkerGroup(options) {
+  //   const max = _.get(this.geoJson, 'properties.allmax');
+  //   const points = this._dataToHeatArray(max);
+  //
+  //   this._markerGroup = L.heatLayer(points, options);
+  //   this._fixTooltips();
+  //   this._addToMap();
+  // }
+  //
+  // _fixTooltips() {
+  //   const self = this;
+  //   const debouncedMouseMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
+  //     'leading': true,
+  //     'trailing': false
+  //   });
+  //
+  //   if (!this._disableTooltips && this._attr.addTooltip) {
+  //     this.map.on('mousemove', debouncedMouseMoveLocation);
+  //     this.map.on('mouseout', function () {
+  //       self.map.closePopup();
+  //     });
+  //     this.map.on('mousedown', function () {
+  //       self._disableTooltips = true;
+  //       self.map.closePopup();
+  //     });
+  //     this.map.on('mouseup', function () {
+  //       self._disableTooltips = false;
+  //     });
+  //   }
+  //
+  //   function mouseMoveLocation(e) {
+  //     const latlng = e.latlng;
+  //
+  //     this.map.closePopup();
+  //
+  //     // unhighlight all svgs
+  //     d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
+  //
+  //     if (!this.geoJson.features.length || this._disableTooltips) {
+  //       return;
+  //     }
+  //
+  //     // find nearest feature to event latlng
+  //     const feature = this._nearestFeature(latlng);
+  //
+  //     // show tooltip if close enough to event latlng
+  //     if (this._tooltipProximity(latlng, feature)) {
+  //       this._showTooltip(feature, latlng);
+  //     }
+  //   }
+  // }
+  //
+  // /**
+  //  * Finds nearest feature in mapData to event latlng
+  //  *
+  //  * @method _nearestFeature
+  //  * @param latLng {Leaflet latLng}
+  //  * @return nearestPoint {Leaflet latLng}
+  //  */
+  // _nearestFeature(latLng) {
+  //   const self = this;
+  //   let nearest;
+  //
+  //   if (latLng.lng < -180 || latLng.lng > 180) {
+  //     return;
+  //   }
+  //
+  //   _.reduce(this.geoJson.features, function (distance, feature) {
+  //     const featureLatLng = self._getLatLng(feature);
+  //     const dist = latLng.distanceTo(featureLatLng);
+  //
+  //     if (dist < distance) {
+  //       nearest = feature;
+  //       return dist;
+  //     }
+  //
+  //     return distance;
+  //   }, Infinity);
+  //
+  //   return nearest;
+  // }
+  //
+  // /**
+  //  * display tooltip if feature is close enough to event latlng
+  //  *
+  //  * @method _tooltipProximity
+  //  * @param latlng {Leaflet latLng  Object}
+  //  * @param feature {geoJson Object}
+  //  * @return {Boolean}
+  //  */
+  // _tooltipProximity(latlng, feature) {
+  //   if (!feature) return;
+  //
+  //   let showTip = false;
+  //   const featureLatLng = this._getLatLng(feature);
+  //
+  //   // zoomScale takes map zoom and returns proximity value for tooltip display
+  //   // domain (input values) is map zoom (min 1 and max 18)
+  //   // range (output values) is distance in meters
+  //   // used to compare proximity of event latlng to feature latlng
+  //   const zoomScale = d3.scale.linear()
+  //     .domain([1, 4, 7, 10, 13, 16, 18])
+  //     .range([1000000, 300000, 100000, 15000, 2000, 150, 50]);
+  //
+  //   const proximity = zoomScale(this.map.getZoom());
+  //   const distance = latlng.distanceTo(featureLatLng);
+  //
+  //   // maxLngDif is max difference in longitudes
+  //   // to prevent feature tooltip from appearing 360°
+  //   // away from event latlng
+  //   const maxLngDif = 40;
+  //   const lngDif = Math.abs(latlng.lng - featureLatLng.lng);
+  //
+  //   if (distance < proximity && lngDif < maxLngDif) {
+  //     showTip = true;
+  //   }
+  //
+  //   d3.scale.pow().exponent(0.2)
+  //     .domain([1, 18])
+  //     .range([1500000, 50]);
+  //   return showTip;
+  // }
+
+}
+
+export default class GeohashLayer extends KibanaMapLayer {
+
+  constructor(featureCollection, options, zoom) {
+
+    super();
+
+    this._geohashGeoJson = featureCollection;
+    this._geohashOptions = options;
+    this._zoom = zoom;
+
+    this._geohashGridOverlay = null;
+    switch (this._geohashOptions.mapType) {
+      case 'Scaled Circle Markers':
+        this._geohashGridOverlay = new ScaledCircleOverlay(this._geohashGeoJson, {}, zoom);
+        break;
+      case 'Heatmap':
+        this._geohashGridOverlay = new HeatmapOverlay(this._geohashGeoJson, {
+          radius: +this._geohashOptions.heatmap.heatRadius,
+          blur: +this._geohashOptions.heatmap.heatBlur,
+          maxZoom: +this._geohashOptions.heatmap.heatMaxZoom,
+          minOpaxity: +this._geohashOptions.heatmap.heatMinOpacity,
+          heatNormalizeData: this._geohashOptions.heatmap.heatNormalizeData
+        });
+        break;
+      default:
+        throw new Error(`${this._geohashOptions.mapType} mapType not recognized`);
+
+    }
+
+    this._leafletLayer = this._geohashGridOverlay.getLeafletLayer();
+  }
+
+
+  isReusable(options) {
+
+    if (_.isEqual(this._geohashOptions, options)) {
+      return true;
+    }
+
+    if (this._geohashOptions.mapType !== options.mapType) {
+      return false;
+    } else if (this._geohashOptions.mapType === 'Heatmap' && !_.isEqual(this._geohashOptions.heatmap, options)) {
+      return false;
+    }
+
+    return true;
+  }
+}
+
+
+
+
+/**
+ * d3 quantize scale returns a hex color, used for marker fill color
+ *
+ * @method quantizeLegendColors
+ * return {undefined}
+ */
+function makeCircleMarkerLegendColors(min, max) {
+  const reds1 = ['#ff6128'];
+  const reds3 = ['#fecc5c', '#fd8d3c', '#e31a1c'];
+  const reds5 = ['#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'];
+  const bottomCutoff = 2;
+  const middleCutoff = 24;
+  let legendColors;
+  if (max - min <= bottomCutoff) {
+    legendColors = reds1;
+  } else if (max - min <= middleCutoff) {
+    legendColors = reds3;
+  } else {
+    legendColors = reds5;
+  }
+  return legendColors;
+}
+
+function makeColorDarker(color) {
+  const amount = 1.3;//magic number, carry over from earlier
+  return d3.hcl(color).darker(amount).toString();
+}
+
+function makeStyleFunction(min, max, legendColors) {
+  const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
+  const legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(legendColors);
+  return (feature) => {
+    const value = _.get(feature, 'properties.value');
+    const color = legendQuantizer(value);
+    return {
+      fillColor: color,
+      color: makeColorDarker(color),
+      weight: 1.5,
+      opacity: 1,
+      fillOpacity: 0.75
+    };
+  };
+}
+
+/**
+ * returns data for data for heat map intensity
+ * if heatNormalizeData attribute is checked/true
+ • normalizes data for heat map intensity
+ *
+ * @method _dataToHeatArray
+ * @param max {Number}
+ * @return {Array}
+ */
+function dataToHeatArray(max, heatNormalizeData, featureCollection) {
+
+  return featureCollection.features.map((feature) => {
+    // const lat = feature.properties.center[0];
+    // const lng = feature.properties.center[1];
+    const lat = feature.geometry.coordinates[1];
+    const lng = feature.geometry.coordinates[0];
+    let heatIntensity;
+    if (!heatNormalizeData) {
+      // show bucket value on heatmap
+      heatIntensity = feature.properties.value;
+    } else {
+      // show bucket value normalized to max value
+      heatIntensity = feature.properties.value / max;
+    }
+
+    return [lat, lng, heatIntensity];
+  });
+}
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 97fb18ec57425..8b4fa666ce394 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -1,280 +1,9 @@
 import { EventEmitter } from 'events';
 import L from 'leaflet';
-import _ from 'lodash';
-import d3 from 'd3';
-import $ from 'jquery';
-import colorramps from 'ui/vislib/components/color/colormaps';
 import zoomToPrecision from 'ui/utils/zoom_to_precision';
 // import Notifier from 'ui/notify/notifier';
 
 
-class GeohashGridOverlay {
-
-  constructor(featureCollection, layerOptions, targetZoom) {
-    this._featureCollection = featureCollection;
-    this._zoom = targetZoom;
-    this.createLeafletLayer(layerOptions);
-  }
-
-  createLeafletLayer(ignoreLayerOptions) {
-    this._leafletLayer = L.geoJson(null, {
-      pointToLayer: this.getMarkerFunction(),
-      style: this.getStyleFunction()
-    });
-    this._leafletLayer.addData(this._featureCollection);
-  }
-
-  getFeatureCollection() {
-    return this._featureCollection;
-  }
-
-  addToLeafletMap(leafletMap) {
-    leafletMap.invalidateSize();
-    this._leafletLayer.addTo(leafletMap);
-  }
-
-  removeFromMap(leafletMap) {
-    leafletMap.removeLayer(this._leafletLayer);
-  }
-
-  getMarkerFunction() {
-    throw new Error('should implement getMarkerFunction');
-  }
-
-  getStyleFunction() {
-    const min = _.get(this._featureCollection, 'properties.min', 0);
-    const max = _.get(this._featureCollection, 'properties.max', 1);
-    this._legendColors = makeCircleMarkerLegendColors(min, max);
-    const styleFunction = makeStyleFunction(min, max, this._legendColors);
-    return styleFunction;
-  }
-
-  _setStyle() {
-    const style = this.getStyleFunction();
-    this._leafletLayer.setStyle(style);
-  }
-
-
-}
-
-
-class ScaledCircleOverlay extends GeohashGridOverlay {
-  constructor() {
-    super(...arguments);
-  }
-
-  getMarkerFunction() {
-    const scaleFactor = 0.6;
-    return (feature, latlng) => {
-      const value = feature.properties.value;
-      const scaledRadius = this._radiusScale(value) * scaleFactor;
-      return L.circleMarker(latlng).setRadius(scaledRadius);
-    };
-  }
-
-  /**
-   * radiusScale returns a number for scaled circle markers
-   * for relative sizing of markers
-   *
-   * @method _radiusScale
-   * @param value {Number}
-   * @return {Number}
-   */
-  _radiusScale(value) {
-    const precisionBiasBase = 5;
-    const precisionBiasNumerator = 200;
-    // const zoom = this._featureCollection.properties.zoom;
-
-    const zoom = this._zoom;
-    const maxValue = this._featureCollection.properties.max;
-    const precision = _.max(this._featureCollection.features.map((feature) => {
-      return String(feature.properties.geohash).length;
-    }));
-
-    const pct = Math.abs(value) / Math.abs(maxValue);
-    const zoomRadius = 0.5 * Math.pow(2, zoom);
-    const precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
-
-    // square root value percentage
-    return Math.pow(pct, 0.5) * zoomRadius * precisionScale;
-  }
-
-  getBounds() {
-    return this._leafletLayer.getBounds();
-  }
-
-
-}
-
-
-/**
- * Map overlay: canvas layer with leaflet.heat plugin
- *
- * @param map {Leaflet Object}
- * @param geoJson {geoJson Object}
- * @param params {Object}
- */
-class HeatmapOverlay extends GeohashGridOverlay {
-
-  constructor(featureCollection, layerOptions) {
-    super(...arguments);
-    // super(map, geoJson, params);
-    // this._disableTooltips = false;
-    //
-    // this._createMarkerGroup({
-    //   radius: +this._attr.heatRadius,
-    //   blur: +this._attr.heatBlur,
-    //   maxZoom: +this._attr.heatMaxZoom,
-    //   minOpacity: +this._attr.heatMinOpacity
-    // });
-    //
-    // this.addLegend = _.noop;
-    //
-    // this._getLatLng = _.memoize(function (feature) {
-    //   return L.latLng(
-    //     feature.geometry.coordinates[1],
-    //     feature.geometry.coordinates[0]
-    //   );
-    // }, function (feature) {
-    //   // turn coords into a string for the memoize cache
-    //   return [feature.geometry.coordinates[1], feature.geometry.coordinates[0]].join(',');
-    // });
-  }
-
-
-  createLeafletLayer(heatmapOptions) {
-    const max = _.get(this._featureCollection, 'properties.max');
-    const points = dataToHeatArray(max, heatmapOptions.heatNormalizeData, this._featureCollection);
-    this._leafletLayer = L.heatLayer(points, heatmapOptions);
-    // this._fixTooltips();
-    // this._addToMap();
-  }
-
-  // _createMarkerGroup(options) {
-  //   const max = _.get(this.geoJson, 'properties.allmax');
-  //   const points = this._dataToHeatArray(max);
-  //
-  //   this._markerGroup = L.heatLayer(points, options);
-  //   this._fixTooltips();
-  //   this._addToMap();
-  // }
-  //
-  // _fixTooltips() {
-  //   const self = this;
-  //   const debouncedMouseMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
-  //     'leading': true,
-  //     'trailing': false
-  //   });
-  //
-  //   if (!this._disableTooltips && this._attr.addTooltip) {
-  //     this.map.on('mousemove', debouncedMouseMoveLocation);
-  //     this.map.on('mouseout', function () {
-  //       self.map.closePopup();
-  //     });
-  //     this.map.on('mousedown', function () {
-  //       self._disableTooltips = true;
-  //       self.map.closePopup();
-  //     });
-  //     this.map.on('mouseup', function () {
-  //       self._disableTooltips = false;
-  //     });
-  //   }
-  //
-  //   function mouseMoveLocation(e) {
-  //     const latlng = e.latlng;
-  //
-  //     this.map.closePopup();
-  //
-  //     // unhighlight all svgs
-  //     d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
-  //
-  //     if (!this.geoJson.features.length || this._disableTooltips) {
-  //       return;
-  //     }
-  //
-  //     // find nearest feature to event latlng
-  //     const feature = this._nearestFeature(latlng);
-  //
-  //     // show tooltip if close enough to event latlng
-  //     if (this._tooltipProximity(latlng, feature)) {
-  //       this._showTooltip(feature, latlng);
-  //     }
-  //   }
-  // }
-  //
-  // /**
-  //  * Finds nearest feature in mapData to event latlng
-  //  *
-  //  * @method _nearestFeature
-  //  * @param latLng {Leaflet latLng}
-  //  * @return nearestPoint {Leaflet latLng}
-  //  */
-  // _nearestFeature(latLng) {
-  //   const self = this;
-  //   let nearest;
-  //
-  //   if (latLng.lng < -180 || latLng.lng > 180) {
-  //     return;
-  //   }
-  //
-  //   _.reduce(this.geoJson.features, function (distance, feature) {
-  //     const featureLatLng = self._getLatLng(feature);
-  //     const dist = latLng.distanceTo(featureLatLng);
-  //
-  //     if (dist < distance) {
-  //       nearest = feature;
-  //       return dist;
-  //     }
-  //
-  //     return distance;
-  //   }, Infinity);
-  //
-  //   return nearest;
-  // }
-  //
-  // /**
-  //  * display tooltip if feature is close enough to event latlng
-  //  *
-  //  * @method _tooltipProximity
-  //  * @param latlng {Leaflet latLng  Object}
-  //  * @param feature {geoJson Object}
-  //  * @return {Boolean}
-  //  */
-  // _tooltipProximity(latlng, feature) {
-  //   if (!feature) return;
-  //
-  //   let showTip = false;
-  //   const featureLatLng = this._getLatLng(feature);
-  //
-  //   // zoomScale takes map zoom and returns proximity value for tooltip display
-  //   // domain (input values) is map zoom (min 1 and max 18)
-  //   // range (output values) is distance in meters
-  //   // used to compare proximity of event latlng to feature latlng
-  //   const zoomScale = d3.scale.linear()
-  //     .domain([1, 4, 7, 10, 13, 16, 18])
-  //     .range([1000000, 300000, 100000, 15000, 2000, 150, 50]);
-  //
-  //   const proximity = zoomScale(this.map.getZoom());
-  //   const distance = latlng.distanceTo(featureLatLng);
-  //
-  //   // maxLngDif is max difference in longitudes
-  //   // to prevent feature tooltip from appearing 360°
-  //   // away from event latlng
-  //   const maxLngDif = 40;
-  //   const lngDif = Math.abs(latlng.lng - featureLatLng.lng);
-  //
-  //   if (distance < proximity && lngDif < maxLngDif) {
-  //     showTip = true;
-  //   }
-  //
-  //   d3.scale.pow().exponent(0.2)
-  //     .domain([1, 18])
-  //     .range([1500000, 50]);
-  //   return showTip;
-  // }
-
-}
-
 
 /**
  * Collects map functionality required for Kibana.
@@ -286,8 +15,12 @@ class KibanaMap extends EventEmitter {
 
     super();
 
+
+    this._leafletBaseLayer = null;
+    this._leafletDrawControl = null;
+    this._layers = [];
     this._leafletMap = L.map(domNode, {//todo: read this from meta
-      minZoom: 2,
+      minZoom: 0,
       maxZoom: 10
     });
 
@@ -356,19 +89,10 @@ class KibanaMap extends EventEmitter {
           })
         });
       }
-
-
     });
 
     this.resize();
 
-    this._leafletBaseLayer = null;
-    this._geohashGridOverlay = null;
-    this._leafletDrawControl = null;
-    this._geohashOptions = {};
-
-    this._layers = [];
-
   }
 
   addLayer(layer) {
@@ -405,7 +129,6 @@ class KibanaMap extends EventEmitter {
     }
   }
 
-
   setZoomLevel(zoomLevel) {
     if (this._leafletMap.getZoom() !== zoomLevel) {
       this._leafletMap.setZoom(zoomLevel);
@@ -421,10 +144,6 @@ class KibanaMap extends EventEmitter {
     return zoomToPrecision(this._leafletMap.getZoom(), 12);
   }
 
-  getLeafletBounds() {
-    return this._leafletMap.getBounds();
-  }
-
   getBounds() {
 
     const bounds = this._leafletMap.getBounds();
@@ -523,89 +242,6 @@ class KibanaMap extends EventEmitter {
     this._leafletMap.addControl(this._leafletDrawControl);
   }
 
-
-  _recreateOverlay() {
-
-    if (!this._featureCollection) {
-      return;
-    }
-
-    if (this._geohashGridOverlay) {
-      this._geohashGridOverlay.removeFromMap(this._leafletMap);
-    }
-
-    switch (this._geohashOptions.mapType) {
-      case 'Scaled Circle Markers':
-        this._geohashGridOverlay = new ScaledCircleOverlay(this._featureCollection, {}, this._leafletMap.getZoom());
-        break;
-      case 'Heatmap':
-        this._geohashGridOverlay = new HeatmapOverlay(this._featureCollection, {
-          radius: this._geohashOptions.heatmap.heatRadius,
-          blur: this._geohashOptions.heatmap.heatBlur,
-          maxZoom: this._geohashOptions.heatmap.heatMaxZoom,
-          minOpaxity: this._geohashOptions.heatmap.heatMinOpacity,
-          heatNormalizeData: this._geohashOptions.heatmap.heatNormalizeData
-        });
-        break;
-      default:
-        throw new Error(`${this._geohashOptions.mapType} mapType not recognized`);
-
-    }
-
-    this._geohashGridOverlay.addToLeafletMap(this._leafletMap);
-    // this.fitIfNotVisible(this._featureCollection);
-
-  }
-
-  // fitIfNotVisible(featureCollection) {
-  //   const bounds = _.pluck(featureCollection.features, 'properties.rectangle');
-  //   const mapBounds = this._leafletMap.getBounds();
-  //
-  //   //layerbounds is sometimes empty:
-  //   try {
-  //     const layerbounds = this._geohashGridOverlay.getBounds();
-  //     if (mapBounds && layerbounds && !mapBounds.intersects(layerbounds)) {
-  //       this._leafletMap.fitBounds(bounds);
-  //     }
-  //   } catch (e) {
-  //     //todo; shouldn't do this under zooming, only when play button is pressed.
-  //   }
-  // }
-
-  recreateGeohashOverlay() {
-    this._recreateOverlay();
-  }
-
-  setGeohashFeatureCollection(featureCollection) {
-    // if (this._geohashGridOverlay && _.isEqual(this._geohashGridOverlay.getFeatureCollection(), featureCollection)) {
-    //   no need to recreate layer.
-    // return;
-    // }
-    this._featureCollection = featureCollection;
-    this._recreateOverlay();
-  }
-
-  setGeohashLayerOptions(options) {
-
-    if (_.isEqual(this._geohashOptions, options)) {
-      return;
-    }
-
-    const previousOptions = this._geohashOptions;
-    this._geohashOptions = options;
-
-    //do smart refresh. only required changes.
-    if (previousOptions) {
-      if (this._geohashOptions.mapType !== previousOptions.mapType) {
-        this._recreateOverlay();
-      } else if (this._geohashOptions.mapType === 'Heatmap' && !_.isEqual(this._geohashOptions.heatmap, previousOptions)) {
-        this._recreateOverlay();//todo: can be optimized. does not require full refresh
-      }
-    }
-    //todo: when other configurations change (tooltip, etc... do NOT recreate the layer
-
-  }
-
   resize() {
     this._leafletMap.invalidateSize();
   }
@@ -613,78 +249,6 @@ class KibanaMap extends EventEmitter {
 }
 
 
-/**
- * d3 quantize scale returns a hex color, used for marker fill color
- *
- * @method quantizeLegendColors
- * return {undefined}
- */
-function makeCircleMarkerLegendColors(min, max) {
-  const reds1 = ['#ff6128'];
-  const reds3 = ['#fecc5c', '#fd8d3c', '#e31a1c'];
-  const reds5 = ['#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'];
-  const bottomCutoff = 2;
-  const middleCutoff = 24;
-  let legendColors;
-  if (max - min <= bottomCutoff) {
-    legendColors = reds1;
-  } else if (max - min <= middleCutoff) {
-    legendColors = reds3;
-  } else {
-    legendColors = reds5;
-  }
-  return legendColors;
-}
-
-function makeColorDarker(color) {
-  const amount = 1.3;//magic number, carry over from earlier
-  return d3.hcl(color).darker(amount).toString();
-}
-
-function makeStyleFunction(min, max, legendColors) {
-  const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
-  const legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(legendColors);
-  return (feature) => {
-    const value = _.get(feature, 'properties.value');
-    const color = legendQuantizer(value);
-    return {
-      fillColor: color,
-      color: makeColorDarker(color),
-      weight: 1.5,
-      opacity: 1,
-      fillOpacity: 0.75
-    };
-  };
-}
-
-/**
- * returns data for data for heat map intensity
- * if heatNormalizeData attribute is checked/true
- • normalizes data for heat map intensity
- *
- * @method _dataToHeatArray
- * @param max {Number}
- * @return {Array}
- */
-function dataToHeatArray(max, heatNormalizeData, featureCollection) {
-
-  return featureCollection.features.map((feature) => {
-    // const lat = feature.properties.center[0];
-    // const lng = feature.properties.center[1];
-    const lat = feature.geometry.coordinates[1];
-    const lng = feature.geometry.coordinates[0];
-    let heatIntensity;
-    if (!heatNormalizeData) {
-      // show bucket value on heatmap
-      heatIntensity = feature.properties.value;
-    } else {
-      // show bucket value normalized to max value
-      heatIntensity = feature.properties.value / max;
-    }
-
-    return [lat, lng, heatIntensity];
-  });
-}
 
 
 export default KibanaMap;
diff --git a/src/ui/public/vis_maps/kibana_map_layer.js b/src/ui/public/vis_maps/kibana_map_layer.js
index 81bbb23540bd3..bff3a7d2eae0b 100644
--- a/src/ui/public/vis_maps/kibana_map_layer.js
+++ b/src/ui/public/vis_maps/kibana_map_layer.js
@@ -1,6 +1,4 @@
 import { EventEmitter } from 'events';
-// import L from 'leaflet';
-// import $ from 'jquery';
 
 
 export default class KibanaMapLayer extends EventEmitter {
@@ -8,9 +6,7 @@ export default class KibanaMapLayer extends EventEmitter {
     super();
     this._leafletLayer = null;
   }
-
   destroy() {
-
   }
 
   addToLeafletMap(leafletMap) {
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index bce5dee423859..fe04c3a628f1e 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -4,6 +4,7 @@ import VisRenderbotProvider from 'ui/vis/renderbot';
 import MapsVisTypeBuildChartDataProvider from 'ui/vislib_vis_type/build_chart_data';
 import FilterBarPushFilterProvider from 'ui/filter_bar/push_filter';
 import KibanaMap from './kibana_map';
+import GeohashLayer from './geohash_layer';
 import './lib/tilemap_settings';
 import './styles/_tilemap.less';
 
@@ -28,10 +29,10 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         notify.warning(tilemapSettings.getError().message);
       }
       const containerElement = $($el)[0];
+
       this._kibanaMap = new KibanaMap(containerElement);
       this._kibanaMap.addDrawControl();
 
-      this._configureGeoHashLayer();
       this._useUIState();
 
       let previousPrecision = this._kibanaMap.getAutoPrecision();
@@ -47,27 +48,40 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         if (precisionChange) {
           courier.fetch();
         } else {
-          this._kibanaMap.recreateGeohashOverlay();
+          this._recreateGeohashLayer();
         }
       });
       this._kibanaMap.on('drawCreated:rectangle', event => {
         addSpatialFilter(_.get(this.mapsData, 'geohashGridAgg'), 'geo_bounding_box', event.bounds);
       });
-      this._kibanaMap.on('drawCreated:polygon', event => {
-        addSpatialFilter(_.get(this.mapsData, 'geohashGridAgg'), 'geo_polygon', { points: event.points });
-      });
 
+
+      this._geohashLayer = null;
+
+    }
+
+    _recreateGeohashLayer() {
+      if (this._geohashLayer) {
+        this._kibanaMap.removeLayer(this._geohashLayer);
+      }
+      if (!this._geohashGeoJson) {
+        return;
+      }
+      const geohashOptions = this._getGeohashOptions();
+      this._geohashLayer = new GeohashLayer(this.mapsData.geoJson, geohashOptions, this._kibanaMap.getZoomLevel());
+      this._kibanaMap.addLayer(this._geohashLayer);
     }
 
+
     /**
      * called on data change
      * @param esResponse
      */
     render(esResponse) {
       this.mapsData = this._buildChartData(esResponse);
-      // const params = this._getMapsParams();
-      // this.mapsParams = params;
-      this._kibanaMap.setGeohashFeatureCollection(this.mapsData.geoJson);
+
+      this._geohashGeoJson = this.mapsData.geoJson;
+      this._recreateGeohashLayer();
       this._useUIState();
       this._kibanaMap.resize();
     }
@@ -77,15 +91,10 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
     }
 
     /**
-     * called on options change
+     * called on options change (vis.params change)
      */
     updateParams() {
       const newParams = this._getMapsParams();
-      this._configureGeoHashLayer();
-
-
-      // http://leafletjs.com/reference.html#tilelayer-wms-options
-
       if (newParams.wms.enabled) {
         const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(true);
         this._kibanaMap.setBaseLayer({
@@ -106,7 +115,16 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         });
       }
 
+
+      const geohashOptions = this._getGeohashOptions();
+      if (!this._geohashLayer || !this._geohashLayer.isReusable(geohashOptions)) {
+        this._recreateGeohashLayer();
+      }
+
+      //todo: all other options (e.g. tooltips...)
+
       this._useUIState();
+      this._kibanaMap.resize();
     }
 
 
@@ -153,9 +171,9 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
     }
 
 
-    _configureGeoHashLayer() {
+    _getGeohashOptions() {
       const newParams = this._getMapsParams();
-      this._kibanaMap.setGeohashLayerOptions({
+      return {
         mapType: newParams.mapType,
         heatmap: {
           heatBlur: newParams.heatBlur,
@@ -164,8 +182,9 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
           heatNormalizeData: newParams.heatNormalizeData,
           heatRadius: newParams.heatRadius
         }
-      });
+      };
     }
+
   }
 
 

From 58f72630b696fa04ee8f8232323e7c730a200526 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Wed, 22 Feb 2017 00:29:03 -0500
Subject: [PATCH 119/150] add desaturation flag / more efficient refreshing of
 baselayer

---
 src/ui/public/vis_maps/kibana_map.js     | 76 +++++++++++++++++-------
 src/ui/public/vis_maps/maps_renderbot.js |  5 +-
 2 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 8b4fa666ce394..b5679dddc2767 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -1,5 +1,7 @@
 import { EventEmitter } from 'events';
 import L from 'leaflet';
+import $ from 'jquery';
+import _ from 'lodash';
 import zoomToPrecision from 'ui/utils/zoom_to_precision';
 // import Notifier from 'ui/notify/notifier';
 
@@ -15,9 +17,12 @@ class KibanaMap extends EventEmitter {
 
     super();
 
-
     this._leafletBaseLayer = null;
+    this._baseLayerSettings = null;
+    this._baseLayerIsDesaturated = true;
+
     this._leafletDrawControl = null;
+
     this._layers = [];
     this._leafletMap = L.map(domNode, {//todo: read this from meta
       minZoom: 0,
@@ -29,7 +34,7 @@ class KibanaMap extends EventEmitter {
     this._leafletMap.fitWorld();//todo: pass in from UI-state (if any)
 
     let previousZoom = this._leafletMap.getZoom();
-    this._leafletMap.on('zoomend', e=> {
+    this._leafletMap.on('zoomend', () => {
       if (previousZoom !== this._leafletMap.getZoom()) {
         previousZoom = this._leafletMap.getZoom();
         this.emit('zoomchange');
@@ -184,7 +189,44 @@ class KibanaMap extends EventEmitter {
   }
 
 
+  setDesaturateBaseLayer(isDesaturated) {
+    this._baseLayerIsDesaturated = isDesaturated;
+
+  }
+
+  addDrawControl() {
+    const drawOptions = {
+      draw: {
+        polyline: false,
+        marker: false,
+        circle: false,
+        polygon: false,
+        rectangle: {
+          shapeOptions: {
+            stroke: false,
+            color: '#000'
+          }
+        }
+      }
+    };
+    this._leafletDrawControl = new L.Control.Draw(drawOptions);
+    this._leafletMap.addControl(this._leafletDrawControl);
+  }
+
+  resize() {
+    this._leafletMap.invalidateSize();
+  }
+
+
   setBaseLayer(settings) {
+
+    if (_.isEqual(settings, this._baseLayerSettings)) {
+      this._updateDesaturation();
+      this._leafletBaseLayer.redraw();
+      return;
+    }
+
+    this._baseLayerSettings = settings;
     if (settings === null) {
       if (this._leafletBaseLayer && this._leafletMap) {
         this._leafletMap.removeLayer(this._leafletBaseLayer);
@@ -194,7 +236,6 @@ class KibanaMap extends EventEmitter {
     }
 
     if (this._leafletBaseLayer) {
-      //todo: do this correctly, by checking if there is a difference.
       this._leafletMap.removeLayer(this._leafletBaseLayer);
       this._leafletBaseLayer = null;
     }
@@ -206,6 +247,8 @@ class KibanaMap extends EventEmitter {
       baseLayer = this._getTMSBaseLayer((settings.options));
     }
 
+    baseLayer.on('tileload', () => this._updateDesaturation());
+
     this._leafletBaseLayer = baseLayer;
     this._leafletBaseLayer.addTo(this._leafletMap);
     this._leafletBaseLayer.bringToBack();
@@ -223,28 +266,15 @@ class KibanaMap extends EventEmitter {
     return L.tileLayer.wms(options.url, options);
   }
 
-  addDrawControl() {
-    const drawOptions = {
-      draw: {
-        polyline: false,
-        marker: false,
-        circle: false,
-        polygon: false,
-        rectangle: {
-          shapeOptions: {
-            stroke: false,
-            color: '#000'
-          }
-        }
-      }
-    };
-    this._leafletDrawControl = new L.Control.Draw(drawOptions);
-    this._leafletMap.addControl(this._leafletDrawControl);
+  _updateDesaturation() {
+    const tiles = $('img.leaflet-tile-loaded');
+    if (this._baseLayerIsDesaturated) {
+      tiles.removeClass('filters-off');
+    } else if (!this._baseLayerIsDesaturated) {
+      tiles.addClass('filters-off');
+    }
   }
 
-  resize() {
-    this._leafletMap.invalidateSize();
-  }
 
 }
 
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index fe04c3a628f1e..10932dba027c6 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -55,7 +55,6 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         addSpatialFilter(_.get(this.mapsData, 'geohashGridAgg'), 'geo_bounding_box', event.bounds);
       });
 
-
       this._geohashLayer = null;
 
     }
@@ -79,7 +78,6 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
      */
     render(esResponse) {
       this.mapsData = this._buildChartData(esResponse);
-
       this._geohashGeoJson = this.mapsData.geoJson;
       this._recreateGeohashLayer();
       this._useUIState();
@@ -120,8 +118,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       if (!this._geohashLayer || !this._geohashLayer.isReusable(geohashOptions)) {
         this._recreateGeohashLayer();
       }
-
-      //todo: all other options (e.g. tooltips...)
+      this._kibanaMap.setDesaturateBaseLayer(newParams.isDesaturated);
 
       this._useUIState();
       this._kibanaMap.resize();

From b053d9601b8890e76e8b731a1bf48bac01c4b0f5 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Wed, 22 Feb 2017 01:11:57 -0500
Subject: [PATCH 120/150] add remaining map types

---
 .../kbn_vislib_vis_types/public/tile_map.js   |  4 +-
 .../vis_maps/__tests__/tile_maps/map.js       |  2 +-
 src/ui/public/vis_maps/geohash_layer.js       | 91 ++++++++++++++++---
 .../marker_types/geohash_grid.js              | 34 -------
 .../marker_types/scaled_circles.js            | 59 ------------
 .../marker_types/shaded_circles.js            | 65 -------------
 6 files changed, 83 insertions(+), 172 deletions(-)
 delete mode 100644 src/ui/public/vis_maps/visualizations/marker_types/geohash_grid.js
 delete mode 100644 src/ui/public/vis_maps/visualizations/marker_types/scaled_circles.js
 delete mode 100644 src/ui/public/vis_maps/visualizations/marker_types/shaded_circles.js

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
index f34ce8f0f9d23..a4713d0309874 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
@@ -47,8 +47,8 @@ export default function TileMapVisType(Private, getAppState, courier, config) {
       }],
       // mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid', 'Heatmap'],
       mapTypes: ['Scaled Circle Markers',
-        // 'Shaded Circle Markers',
-        // 'Shaded Geohash Grid',
+        'Shaded Circle Markers',
+        'Shaded Geohash Grid',
         'Heatmap'
       ],
       canDesaturate: !!supports.cssFilters,
diff --git a/src/ui/public/vis_maps/__tests__/tile_maps/map.js b/src/ui/public/vis_maps/__tests__/tile_maps/map.js
index b7b0f99417524..bb28e07465c7c 100644
--- a/src/ui/public/vis_maps/__tests__/tile_maps/map.js
+++ b/src/ui/public/vis_maps/__tests__/tile_maps/map.js
@@ -13,7 +13,7 @@ import VislibVisualizationsMapProvider from 'ui/vis_maps/visualizations/_map';
 // const dataArray = [
 //   ['geojson', require('fixtures/vislib/mock_data/geohash/_geo_json')],
 //   ['columns', require('fixtures/vislib/mock_data/geohash/_columns')],
-//   ['rows', require('fixtures/vislib/mock_data/geohash/_rows')],
+//   ['rows', require('fixtures/vislib/mock_data/geohash/_rows')],N
 // ];
 
 // TODO: Test the specific behavior of each these
diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index c0089503771af..020663e31f450 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -3,7 +3,7 @@ import L from 'leaflet';
 import _ from 'lodash';
 import d3 from 'd3';
 
-class GeohashGridOverlay {
+class GeohashMarkers {
 
   constructor(featureCollection, layerOptions, targetZoom) {
     this._geohashGeoJson = featureCollection;
@@ -24,11 +24,10 @@ class GeohashGridOverlay {
     this._legendColors = makeCircleMarkerLegendColors(min, max);
     return makeStyleFunction(min, max, this._legendColors);
   }
-
 }
 
 
-class ScaledCircleOverlay extends GeohashGridOverlay {
+class ScaledCircles extends GeohashMarkers {
   constructor() {
     super(...arguments);
     this._leafletLayer = L.geoJson(null, {
@@ -77,10 +76,69 @@ class ScaledCircleOverlay extends GeohashGridOverlay {
     return this._leafletLayer.getBounds();
   }
 
+}
+
+class ShadedCircles extends ScaledCircles {
+  getMarkerFunction() {
+    // multiplier to reduce size of all circles
+    const scaleFactor = 0.8;
+    return (feature, latlng) => {
+      const radius = this._geohashMinDistance(feature) * scaleFactor;
+      return L.circle(latlng, radius);
+    };
+  }
+
+
+  /**
+   * _geohashMinDistance returns a min distance in meters for sizing
+   * circle markers to fit within geohash grid rectangle
+   *
+   * @method _geohashMinDistance
+   * @param feature {Object}
+   * @return {Number}
+   */
+  _geohashMinDistance(feature) {
+    const centerPoint = _.get(feature, 'properties.center');
+    const geohashRect = _.get(feature, 'properties.rectangle');
+
+    // centerPoint is an array of [lat, lng]
+    // geohashRect is the 4 corners of the geoHash rectangle
+    //   an array that starts at the southwest corner and proceeds
+    //   clockwise, each value being an array of [lat, lng]
+
+    // center lat and southeast lng
+    const east = L.latLng([centerPoint[0], geohashRect[2][1]]);
+    // southwest lat and center lng
+    const north = L.latLng([geohashRect[3][0], centerPoint[1]]);
+
+    // get latLng of geohash center point
+    const center = L.latLng([centerPoint[0], centerPoint[1]]);
+
+    // get smallest radius at center of geohash grid rectangle
+    const eastRadius = Math.floor(center.distanceTo(east));
+    const northRadius = Math.floor(center.distanceTo(north));
+    return _.min([eastRadius, northRadius]);
+  }
+}
 
+class GeohashGrid extends ScaledCircles {
+  getMarkerFunction() {
+    return function (feature, latlng) {
+      const geohashRect = feature.properties.rectangle;
+      // get bounds from northEast[3] and southWest[1]
+      // corners in geohash rectangle
+      const corners = [
+        [geohashRect[3][0], geohashRect[3][1]],
+        [geohashRect[1][0], geohashRect[1][1]]
+      ];
+      return L.rectangle(corners);
+    };
+  }
 }
 
 
+
+
 /**
  * Map overlay: canvas layer with leaflet.heat plugin
  *
@@ -88,12 +146,12 @@ class ScaledCircleOverlay extends GeohashGridOverlay {
  * @param geoJson {geoJson Object}
  * @param params {Object}
  */
-class HeatmapOverlay extends GeohashGridOverlay {
+class Heatmap {
 
   constructor(featureCollection, heatmapOptions) {
-    super(...arguments);
-    const max = _.get(this._geohashGeoJson, 'properties.max');
-    const points = dataToHeatArray(max, heatmapOptions.heatNormalizeData, this._geohashGeoJson);
+    // super(...arguments);
+    const max = _.get(featureCollection, 'properties.max');
+    const points = dataToHeatArray(max, heatmapOptions.heatNormalizeData, featureCollection);
     this._leafletLayer = L.heatLayer(points, heatmapOptions);
     // super(map, geoJson, params);
     // this._disableTooltips = false;
@@ -113,6 +171,10 @@ class HeatmapOverlay extends GeohashGridOverlay {
   }
 
 
+  getLeafletLayer() {
+    return this._leafletLayer;
+  }
+
   // _createMarkerGroup(options) {
   //   const max = _.get(this.geoJson, 'properties.allmax');
   //   const points = this._dataToHeatArray(max);
@@ -248,13 +310,20 @@ export default class GeohashLayer extends KibanaMapLayer {
     this._geohashOptions = options;
     this._zoom = zoom;
 
-    this._geohashGridOverlay = null;
+    this._geohashMarkers = null;
     switch (this._geohashOptions.mapType) {
       case 'Scaled Circle Markers':
-        this._geohashGridOverlay = new ScaledCircleOverlay(this._geohashGeoJson, {}, zoom);
+        this._geohashMarkers = new ScaledCircles(this._geohashGeoJson, {}, zoom);
         break;
+      case 'Shaded Circle Markers':
+        this._geohashMarkers = new ShadedCircles(this._geohashGeoJson, {}, zoom);
+        break;
+      case 'Shaded Geohash Grid':
+        this._geohashMarkers = new GeohashGrid(this._geohashGeoJson, {}, zoom);
+        break;
+
       case 'Heatmap':
-        this._geohashGridOverlay = new HeatmapOverlay(this._geohashGeoJson, {
+        this._geohashMarkers = new Heatmap(this._geohashGeoJson, {
           radius: +this._geohashOptions.heatmap.heatRadius,
           blur: +this._geohashOptions.heatmap.heatBlur,
           maxZoom: +this._geohashOptions.heatmap.heatMaxZoom,
@@ -267,7 +336,7 @@ export default class GeohashLayer extends KibanaMapLayer {
 
     }
 
-    this._leafletLayer = this._geohashGridOverlay.getLeafletLayer();
+    this._leafletLayer = this._geohashMarkers.getLeafletLayer();
   }
 
 
diff --git a/src/ui/public/vis_maps/visualizations/marker_types/geohash_grid.js b/src/ui/public/vis_maps/visualizations/marker_types/geohash_grid.js
deleted file mode 100644
index 093cf19daa7dd..0000000000000
--- a/src/ui/public/vis_maps/visualizations/marker_types/geohash_grid.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import L from 'leaflet';
-import VislibVisualizationsMarkerTypesBaseMarkerProvider from './base_marker';
-export default function GeohashGridMarkerFactory(Private) {
-
-  const BaseMarker = Private(VislibVisualizationsMarkerTypesBaseMarkerProvider);
-
-  /**
-   * Map overlay: rectangles that show the geohash grid bounds
-   *
-   * @param map {Leaflet Object}
-   * @param geoJson {geoJson Object}
-   * @param params {Object}
-   */
-  class GeohashGridMarker extends BaseMarker {
-    constructor(map, geoJson, params) {
-      super(map, geoJson, params);
-
-      this._createMarkerGroup({
-        pointToLayer: function (feature, latlng) {
-          const geohashRect = feature.properties.rectangle;
-          // get bounds from northEast[3] and southWest[1]
-          // corners in geohash rectangle
-          const corners = [
-            [geohashRect[3][0], geohashRect[3][1]],
-            [geohashRect[1][0], geohashRect[1][1]]
-          ];
-          return L.rectangle(corners);
-        }
-      });
-    }
-  }
-
-  return GeohashGridMarker;
-}
diff --git a/src/ui/public/vis_maps/visualizations/marker_types/scaled_circles.js b/src/ui/public/vis_maps/visualizations/marker_types/scaled_circles.js
deleted file mode 100644
index 7eed1d6653977..0000000000000
--- a/src/ui/public/vis_maps/visualizations/marker_types/scaled_circles.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import _ from 'lodash';
-import L from 'leaflet';
-import VislibVisualizationsMarkerTypesBaseMarkerProvider from './base_marker';
-export default function ScaledCircleMarkerFactory(Private) {
-
-  const BaseMarker = Private(VislibVisualizationsMarkerTypesBaseMarkerProvider);
-
-  /**
-   * Map overlay: circle markers that are scaled to illustrate values
-   *
-   * @param map {Leaflet Object}
-   * @param mapData {geoJson Object}
-   * @param params {Object}
-   */
-  class ScaledCircleMarker extends BaseMarker {
-    constructor(map, geoJson, params) {
-      super(map, geoJson, params);
-
-      // multiplier to reduce size of all circles
-      const scaleFactor = 0.6;
-
-      this._createMarkerGroup({
-        pointToLayer: (feature, latlng) => {
-          const value = feature.properties.value;
-          const scaledRadius = this._radiusScale(value) * scaleFactor;
-          return L.circleMarker(latlng).setRadius(scaledRadius);
-        }
-      });
-    }
-
-    /**
-     * radiusScale returns a number for scaled circle markers
-     * for relative sizing of markers
-     *
-     * @method _radiusScale
-     * @param value {Number}
-     * @return {Number}
-     */
-    _radiusScale(value) {
-      const precisionBiasBase = 5;
-      const precisionBiasNumerator = 200;
-      const zoom = this.map.getZoom();
-      const maxValue = this.geoJson.properties.allmax;
-      const precision = _.max(this.geoJson.features.map(function (feature) {
-        return String(feature.properties.geohash).length;
-      }));
-
-      const pct = Math.abs(value) / Math.abs(maxValue);
-      const zoomRadius = 0.5 * Math.pow(2, zoom);
-      const precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
-
-      // square root value percentage
-      return Math.pow(pct, 0.5) * zoomRadius * precisionScale;
-    }
-  }
-
-
-  return ScaledCircleMarker;
-}
diff --git a/src/ui/public/vis_maps/visualizations/marker_types/shaded_circles.js b/src/ui/public/vis_maps/visualizations/marker_types/shaded_circles.js
deleted file mode 100644
index a498056af1070..0000000000000
--- a/src/ui/public/vis_maps/visualizations/marker_types/shaded_circles.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import _ from 'lodash';
-import L from 'leaflet';
-import VislibVisualizationsMarkerTypesBaseMarkerProvider from './base_marker';
-export default function ShadedCircleMarkerFactory(Private) {
-
-  const BaseMarker = Private(VislibVisualizationsMarkerTypesBaseMarkerProvider);
-
-  /**
-   * Map overlay: circle markers that are shaded to illustrate values
-   *
-   * @param map {Leaflet Object}
-   * @param mapData {geoJson Object}
-   * @return {Leaflet object} featureLayer
-   */
-  class ShadedCircleMarker extends BaseMarker {
-    constructor(map, geoJson, params) {
-      super(map, geoJson, params);
-
-      // multiplier to reduce size of all circles
-      const scaleFactor = 0.8;
-
-      this._createMarkerGroup({
-        pointToLayer: (feature, latlng) => {
-          const radius = this._geohashMinDistance(feature) * scaleFactor;
-          return L.circle(latlng, radius);
-        }
-      });
-    }
-
-
-    /**
-     * _geohashMinDistance returns a min distance in meters for sizing
-     * circle markers to fit within geohash grid rectangle
-     *
-     * @method _geohashMinDistance
-     * @param feature {Object}
-     * @return {Number}
-     */
-    _geohashMinDistance(feature) {
-      const centerPoint = _.get(feature, 'properties.center');
-      const geohashRect = _.get(feature, 'properties.rectangle');
-
-      // centerPoint is an array of [lat, lng]
-      // geohashRect is the 4 corners of the geoHash rectangle
-      //   an array that starts at the southwest corner and proceeds
-      //   clockwise, each value being an array of [lat, lng]
-
-      // center lat and southeast lng
-      const east = L.latLng([centerPoint[0], geohashRect[2][1]]);
-      // southwest lat and center lng
-      const north = L.latLng([geohashRect[3][0], centerPoint[1]]);
-
-      // get latLng of geohash center point
-      const center = L.latLng([centerPoint[0], centerPoint[1]]);
-
-      // get smallest radius at center of geohash grid rectangle
-      const eastRadius = Math.floor(center.distanceTo(east));
-      const northRadius = Math.floor(center.distanceTo(north));
-      return _.min([eastRadius, northRadius]);
-    }
-  }
-
-
-  return ShadedCircleMarker;
-}

From 386114ae75f887c3041b78e10e904a01336edb25 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 24 Feb 2017 01:01:31 -0500
Subject: [PATCH 121/150] add fit control

---
 .../choropleth/public/vector_maps.js          | 17 -----
 src/ui/public/vis_maps/geohash_layer.js       |  1 -
 src/ui/public/vis_maps/kibana_map.js          | 72 ++++++++++++++++++-
 src/ui/public/vis_maps/kibana_map_layer.js    |  3 +-
 src/ui/public/vis_maps/maps_renderbot.js      |  1 +
 5 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/src/core_plugins/choropleth/public/vector_maps.js b/src/core_plugins/choropleth/public/vector_maps.js
index a3aa04e6da862..f01675bc2b860 100644
--- a/src/core_plugins/choropleth/public/vector_maps.js
+++ b/src/core_plugins/choropleth/public/vector_maps.js
@@ -9,21 +9,4 @@ const vectorMaps = {
   }
 };
 
-// const vectorMaps = {
-//   'Countries': ['iso'],
-//   'States': ['name', 'abbr']
-// };
-//
-// const vectorMaps = [{
-//   name: 'Countries',
-//   url: '../plugins/choropleth/data/world_countries.geojson',
-//   fields: ['iso']
-// },
-//   {
-//   name: 'States',
-//     url: '../plugins/choropleth/data/us_states.geojson',
-//     fields: ['name', 'abbr']
-//   }];
-
-
 export default vectorMaps;
diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 020663e31f450..5e526b36674b7 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -4,7 +4,6 @@ import _ from 'lodash';
 import d3 from 'd3';
 
 class GeohashMarkers {
-
   constructor(featureCollection, layerOptions, targetZoom) {
     this._geohashGeoJson = featureCollection;
     this._zoom = targetZoom;
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index b5679dddc2767..f3f637af79e0e 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -6,6 +6,29 @@ import zoomToPrecision from 'ui/utils/zoom_to_precision';
 // import Notifier from 'ui/notify/notifier';
 
 
+const FitControl = L.Control.extend({
+  options: {
+    position: 'topleft'
+  },
+  initialize: function (fitContainer, kibanaMap) {
+    this._fitContainer = fitContainer;
+    this._kibanaMap = kibanaMap;
+    this._leafletMap = null;
+  },
+  onAdd: function (leafletMap) {
+    this._leafletMap = leafletMap;
+    $(this._fitContainer).html('<a class="fa fa-crop" href="#" title="Fit Data Bounds"></a>')
+      .on('click', e => {
+        e.preventDefault();
+        this._kibanaMap.fitToData();
+      });
+
+    return this._fitContainer;
+  },
+  onRemove: function () {
+    $(this._fitContainer).off('click');
+  }
+});
 
 /**
  * Collects map functionality required for Kibana.
@@ -13,18 +36,21 @@ import zoomToPrecision from 'ui/utils/zoom_to_precision';
  */
 class KibanaMap extends EventEmitter {
 
-  constructor(domNode) {
+  constructor(containerNode) {
 
     super();
 
+
+    this._containerNode = containerNode;
     this._leafletBaseLayer = null;
     this._baseLayerSettings = null;
     this._baseLayerIsDesaturated = true;
 
     this._leafletDrawControl = null;
+    this._leafletFitControl = null;
 
     this._layers = [];
-    this._leafletMap = L.map(domNode, {//todo: read this from meta
+    this._leafletMap = L.map(containerNode, {//todo: read this from meta
       minZoom: 0,
       maxZoom: 10
     });
@@ -114,12 +140,18 @@ class KibanaMap extends EventEmitter {
   }
 
   destroy() {
+    if (this._leafletFitControl) {
+      this._leafletMap.removeControl(this._leafletFitControl);
+    }
+    if (this._leafletDrawControl) {
+      this._leafletMap.removeControl(this._leafletDrawControl);
+    }
     this.setBaseLayer(null);
     for (const layer of this._layers) {
       layer.removeFromLeafletMap(this._leafletMap);
-      layer.destroy();
     }
     this._leafletMap.remove();
+    this._containerNode.innerHTML = '';
   }
 
   getCenter() {
@@ -213,6 +245,17 @@ class KibanaMap extends EventEmitter {
     this._leafletMap.addControl(this._leafletDrawControl);
   }
 
+  addFitControl() {
+
+    if (this._leafletFitControl || !this._leafletMap) {
+      return;
+    }
+
+    const fitContainer = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-control-fit');
+    this._leafletFitControl = new FitControl(fitContainer, this);
+    this._leafletMap.addControl(this._leafletFitControl);
+  }
+
   resize() {
     this._leafletMap.invalidateSize();
   }
@@ -256,6 +299,28 @@ class KibanaMap extends EventEmitter {
 
   }
 
+  fitToData() {
+
+    if (!this._leafletMap) {
+      return;
+    }
+
+    let bounds = null;
+    this._layers.forEach(layer => {
+      const l = layer.getLeafletLayer();
+      const b = l.getBounds();
+      if (bounds) {
+        bounds.extend(b);
+      } else {
+        bounds = b;
+      }
+    });
+
+    if (bounds) {
+      this._leafletMap.fitBounds(bounds);
+    }
+  }
+
   _getTMSBaseLayer(options) {
     return L.tileLayer(options.url, {
       //todo
@@ -282,3 +347,4 @@ class KibanaMap extends EventEmitter {
 
 
 export default KibanaMap;
+
diff --git a/src/ui/public/vis_maps/kibana_map_layer.js b/src/ui/public/vis_maps/kibana_map_layer.js
index bff3a7d2eae0b..cfa66b39eec27 100644
--- a/src/ui/public/vis_maps/kibana_map_layer.js
+++ b/src/ui/public/vis_maps/kibana_map_layer.js
@@ -6,7 +6,8 @@ export default class KibanaMapLayer extends EventEmitter {
     super();
     this._leafletLayer = null;
   }
-  destroy() {
+  getLeafletLayer() {
+    return this._leafletLayer;
   }
 
   addToLeafletMap(leafletMap) {
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 10932dba027c6..31cbf35a40e66 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -32,6 +32,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
 
       this._kibanaMap = new KibanaMap(containerElement);
       this._kibanaMap.addDrawControl();
+      this._kibanaMap.addFitControl();
 
       this._useUIState();
 

From 0b0e7c0679bbd9964f877982edca4ec3cecca8f1 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 26 Feb 2017 23:40:44 -0500
Subject: [PATCH 122/150] add legend control

add tooltip boilerplate
---
 src/ui/public/vis_maps/geohash_layer.js    | 474 ++++++++++++++-------
 src/ui/public/vis_maps/kibana_map.js       |  72 +++-
 src/ui/public/vis_maps/kibana_map_layer.js |   7 +
 src/ui/public/vis_maps/maps_renderbot.js   |   7 +-
 4 files changed, 399 insertions(+), 161 deletions(-)

diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 5e526b36674b7..6ae1ca55503c4 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -2,11 +2,24 @@ import KibanaMapLayer from './kibana_map_layer';
 import L from 'leaflet';
 import _ from 'lodash';
 import d3 from 'd3';
+import $ from 'jquery';
+import { EventEmitter } from 'events';
 
-class GeohashMarkers {
+class GeohashMarkers extends EventEmitter {
   constructor(featureCollection, layerOptions, targetZoom) {
+    super();
     this._geohashGeoJson = featureCollection;
     this._zoom = targetZoom;
+
+    this._valueFormatter = x => x;//todo: get from params
+    this._tooltipFormatter = x => {
+      const div = document.createElement('div');
+      div.innerHTML = x;
+      return div;
+    };//todo: get from params
+
+    this._legendColors = null;
+    this._legendQuantizer = null;
   }
 
   getLeafletLayer() {
@@ -20,22 +33,151 @@ class GeohashMarkers {
   getStyleFunction() {
     const min = _.get(this._geohashGeoJson, 'properties.min', 0);
     const max = _.get(this._geohashGeoJson, 'properties.max', 1);
+
+    const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
     this._legendColors = makeCircleMarkerLegendColors(min, max);
-    return makeStyleFunction(min, max, this._legendColors);
+    this._legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(this._legendColors);
+
+    return makeStyleFunction(min, max, this._legendColors, quantizeDomain);
+  }
+
+
+  movePointer(event) {
+  }
+
+  getLabel() {
+    return 'Label';
+    // if (this.popups.length) {
+    //   return this.popups[0].feature.properties.aggConfigResult.aggConfig.makeLabel();
+    // }
+    // return '';
+  }
+
+  appendLegendContents(jqueryDiv) {
+
+    if (!this._legendColors || !this._legendQuantizer) {
+      return '';
+    }
+
+    const titleText = this.getLabel();
+    const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
+    jqueryDiv.append($title);
+
+
+    const labels = this._legendColors.map((color) => {
+
+      const labelText = this._legendQuantizer
+        .invertExtent(color)
+        .map(this._valueFormatter)
+        .join(' – ');
+
+      const label = $('<div>');
+
+      const icon = $('<i>').css({
+        background: color,
+        'border-color': makeColorDarker(color)
+      });
+
+      const text = $('<span>').text(labelText);
+
+      label.append(icon);
+      label.append(text);
+
+      jqueryDiv.append(label);
+    });
+
+    return labels.join('');
   }
 }
 
 
 class ScaledCircles extends GeohashMarkers {
+
   constructor() {
     super(...arguments);
+    this._popups = [];
     this._leafletLayer = L.geoJson(null, {
       pointToLayer: this.getMarkerFunction(),
-      style: this.getStyleFunction()
+      style: this.getStyleFunction(),
+      onEachFeature: (feature, layer) => {
+        this._bindPopup(feature, layer);
+      }
     });
     this._leafletLayer.addData(this._geohashGeoJson);
+
+  }
+
+  /**
+   * Binds popup and events to each feature on map
+   *
+   * @method bindPopup
+   * @param feature {Object}
+   * @param layer {Object}
+   * return {undefined}
+   */
+  _bindPopup(feature, layer) {
+    const popup = layer.on({
+      mouseover: (e) => {
+        const layer = e.target;
+        // bring layer to front if not older browser
+        if (!L.Browser.ie && !L.Browser.opera) {
+          layer.bringToFront();
+        }
+        this._showTooltip(feature);
+      },
+      mouseout: () => {
+        this._hidePopup();
+      }
+    });
+
+    this._popups.push(popup);
   }
 
+  /**
+   * Checks if event latlng is within bounds of mapData
+   * features and shows tooltip for that feature
+   *
+   * @method _showTooltip
+   * @param feature {LeafletFeature}
+   * @param latLng? {Leaflet latLng}
+   * @return undefined
+   */
+  _showTooltip(feature, latLng) {
+
+    // const hasTooltip = !!this._attr.addTooltip;
+    const hasTooltip = true;//todo get this from params
+    if (!hasTooltip) {
+      return;
+    }
+    const lat = _.get(feature, 'geometry.coordinates.1');
+    const lng = _.get(feature, 'geometry.coordinates.0');
+    latLng = latLng || L.latLng(lat, lng);
+
+    const content = this._tooltipFormatter(feature);
+    if (!content) {
+      return;
+    }
+
+    this.emit('showTooltip', {
+      content: content,
+      position: latLng
+    });
+  }
+
+  /**
+   * Closes the tooltip on the map
+   *
+   * @method _hidePopup
+   * @return undefined
+   */
+  _hidePopup() {
+    // if (!this.map) return;
+    //
+    // this.map.closePopup();
+    this.emit('hideTooltip');
+  }
+
+
   getMarkerFunction() {
     const scaleFactor = 0.6;
     return (feature, latlng) => {
@@ -54,17 +196,17 @@ class ScaledCircles extends GeohashMarkers {
    * @return {Number}
    */
   _radiusScale(value) {
+
+    //magic numbers
     const precisionBiasBase = 5;
     const precisionBiasNumerator = 200;
 
-    const zoom = this._zoom;
-    const maxValue = this._geohashGeoJson.properties.max;
     const precision = _.max(this._geohashGeoJson.features.map((feature) => {
       return String(feature.properties.geohash).length;
     }));
 
-    const pct = Math.abs(value) / Math.abs(maxValue);
-    const zoomRadius = 0.5 * Math.pow(2, zoom);
+    const pct = Math.abs(value) / Math.abs(this._geohashGeoJson.properties.max);
+    const zoomRadius = 0.5 * Math.pow(2, this._zoom);
     const precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
 
     // square root value percentage
@@ -136,8 +278,6 @@ class GeohashGrid extends ScaledCircles {
 }
 
 
-
-
 /**
  * Map overlay: canvas layer with leaflet.heat plugin
  *
@@ -145,28 +285,35 @@ class GeohashGrid extends ScaledCircles {
  * @param geoJson {geoJson Object}
  * @param params {Object}
  */
-class Heatmap {
+class Heatmap extends EventEmitter {
+
+  constructor(featureCollection, heatmapOptions, zoom) {
 
-  constructor(featureCollection, heatmapOptions) {
-    // super(...arguments);
+    super();
+    this._geojsonFeatureCollection = featureCollection;
     const max = _.get(featureCollection, 'properties.max');
     const points = dataToHeatArray(max, heatmapOptions.heatNormalizeData, featureCollection);
     this._leafletLayer = L.heatLayer(points, heatmapOptions);
-    // super(map, geoJson, params);
-    // this._disableTooltips = false;
-    //
-    //
-    // this.addLegend = _.noop;
-    //
-    // this._getLatLng = _.memoize(function (feature) {
-    //   return L.latLng(
-    //     feature.geometry.coordinates[1],
-    //     feature.geometry.coordinates[0]
-    //   );
-    // }, function (feature) {
-    //   // turn coords into a string for the memoize cache
-    //   return [feature.geometry.coordinates[1], feature.geometry.coordinates[0]].join(',');
-    // });
+    this._tooltipFormatter = x => {
+      const div = document.createElement('div');
+      div.innerHTML = x;
+      return div;
+    };//todo: get from params
+
+
+    this._zoom = zoom;
+    this._disableTooltips = false;
+    this._getLatLng = _.memoize(function (feature) {
+      return L.latLng(
+        feature.geometry.coordinates[1],
+        feature.geometry.coordinates[0]
+      );
+    }, function (feature) {
+      // turn coords into a string for the memoize cache
+      return [feature.geometry.coordinates[1], feature.geometry.coordinates[0]].join(',');
+    });
+
+    this._addTooltips();
   }
 
 
@@ -174,128 +321,135 @@ class Heatmap {
     return this._leafletLayer;
   }
 
-  // _createMarkerGroup(options) {
-  //   const max = _.get(this.geoJson, 'properties.allmax');
-  //   const points = this._dataToHeatArray(max);
-  //
-  //   this._markerGroup = L.heatLayer(points, options);
-  //   this._fixTooltips();
-  //   this._addToMap();
-  // }
-  //
-  // _fixTooltips() {
-  //   const self = this;
-  //   const debouncedMouseMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
-  //     'leading': true,
-  //     'trailing': false
-  //   });
-  //
-  //   if (!this._disableTooltips && this._attr.addTooltip) {
-  //     this.map.on('mousemove', debouncedMouseMoveLocation);
-  //     this.map.on('mouseout', function () {
-  //       self.map.closePopup();
-  //     });
-  //     this.map.on('mousedown', function () {
-  //       self._disableTooltips = true;
-  //       self.map.closePopup();
-  //     });
-  //     this.map.on('mouseup', function () {
-  //       self._disableTooltips = false;
-  //     });
-  //   }
-  //
-  //   function mouseMoveLocation(e) {
-  //     const latlng = e.latlng;
-  //
-  //     this.map.closePopup();
-  //
-  //     // unhighlight all svgs
-  //     d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
-  //
-  //     if (!this.geoJson.features.length || this._disableTooltips) {
-  //       return;
-  //     }
-  //
-  //     // find nearest feature to event latlng
-  //     const feature = this._nearestFeature(latlng);
-  //
-  //     // show tooltip if close enough to event latlng
-  //     if (this._tooltipProximity(latlng, feature)) {
-  //       this._showTooltip(feature, latlng);
-  //     }
-  //   }
-  // }
-  //
-  // /**
-  //  * Finds nearest feature in mapData to event latlng
-  //  *
-  //  * @method _nearestFeature
-  //  * @param latLng {Leaflet latLng}
-  //  * @return nearestPoint {Leaflet latLng}
-  //  */
-  // _nearestFeature(latLng) {
-  //   const self = this;
-  //   let nearest;
-  //
-  //   if (latLng.lng < -180 || latLng.lng > 180) {
-  //     return;
-  //   }
-  //
-  //   _.reduce(this.geoJson.features, function (distance, feature) {
-  //     const featureLatLng = self._getLatLng(feature);
-  //     const dist = latLng.distanceTo(featureLatLng);
-  //
-  //     if (dist < distance) {
-  //       nearest = feature;
-  //       return dist;
-  //     }
-  //
-  //     return distance;
-  //   }, Infinity);
-  //
-  //   return nearest;
-  // }
-  //
-  // /**
-  //  * display tooltip if feature is close enough to event latlng
-  //  *
-  //  * @method _tooltipProximity
-  //  * @param latlng {Leaflet latLng  Object}
-  //  * @param feature {geoJson Object}
-  //  * @return {Boolean}
-  //  */
-  // _tooltipProximity(latlng, feature) {
-  //   if (!feature) return;
-  //
-  //   let showTip = false;
-  //   const featureLatLng = this._getLatLng(feature);
-  //
-  //   // zoomScale takes map zoom and returns proximity value for tooltip display
-  //   // domain (input values) is map zoom (min 1 and max 18)
-  //   // range (output values) is distance in meters
-  //   // used to compare proximity of event latlng to feature latlng
-  //   const zoomScale = d3.scale.linear()
-  //     .domain([1, 4, 7, 10, 13, 16, 18])
-  //     .range([1000000, 300000, 100000, 15000, 2000, 150, 50]);
-  //
-  //   const proximity = zoomScale(this.map.getZoom());
-  //   const distance = latlng.distanceTo(featureLatLng);
-  //
-  //   // maxLngDif is max difference in longitudes
-  //   // to prevent feature tooltip from appearing 360°
-  //   // away from event latlng
-  //   const maxLngDif = 40;
-  //   const lngDif = Math.abs(latlng.lng - featureLatLng.lng);
-  //
-  //   if (distance < proximity && lngDif < maxLngDif) {
-  //     showTip = true;
-  //   }
-  //
-  //   d3.scale.pow().exponent(0.2)
-  //     .domain([1, 18])
-  //     .range([1500000, 50]);
-  //   return showTip;
-  // }
+  appendLegendContents(jqueryDiv) {
+  }
+
+
+  movePointer(type, event) {
+    if (type === 'mousemove') {
+      this._deboundsMoveMoveLocation(event);
+    } else if (type === 'mouseout') {
+      this.emit('hideTooltip');
+    } else if (type === 'mousedown') {
+      this._disableTooltips = true;
+      this.emit('hideTooltip');
+    } else if (type === 'mouseup') {
+      this._disableTooltips = false;
+    }
+  }
+
+
+  _addTooltips() {
+
+    const mouseMoveLocation = (e) => {
+
+      const latlng = e.latlng;
+      this.emit('hideTooltip');
+
+      // unhighlight all svgs
+      // d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
+
+      if (!this._geojsonFeatureCollection.features.length || this._disableTooltips) {
+        return;
+      }
+
+
+      const feature = this._nearestFeature(latlng);
+      if (this._tooltipProximity(latlng, feature)) {
+        const hasTooltip = true;//todo get this from params
+        if (!hasTooltip) {
+          return;
+        }
+        const content = this._tooltipFormatter(feature);
+        if (!content) {
+          return;
+        }
+        this.emit('showTooltip', {
+          content: content,
+          position: latlng
+        });
+
+      }
+    };
+
+
+    const debouncedMouseMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
+      'leading': true,
+      'trailing': false
+    });
+    this._deboundsMoveMoveLocation = debouncedMouseMoveLocation;
+  }
+
+  /**
+   * Finds nearest feature in mapData to event latlng
+   *
+   * @method _nearestFeature
+   * @param latLng {Leaflet latLng}
+   * @return nearestPoint {Leaflet latLng}
+   */
+  _nearestFeature(latLng) {
+    const self = this;
+    let nearest;
+
+    if (latLng.lng < -180 || latLng.lng > 180) {
+      return;
+    }
+
+    _.reduce(this._geojsonFeatureCollection.features, function (distance, feature) {
+      const featureLatLng = self._getLatLng(feature);
+      const dist = latLng.distanceTo(featureLatLng);
+
+      if (dist < distance) {
+        nearest = feature;
+        return dist;
+      }
+
+      return distance;
+    }, Infinity);
+
+    return nearest;
+  }
+
+  /**
+   * display tooltip if feature is close enough to event latlng
+   *
+   * @method _tooltipProximity
+   * @param latlng {Leaflet latLng  Object}
+   * @param feature {geoJson Object}
+   * @return {Boolean}
+   */
+  _tooltipProximity(latlng, feature) {
+    if (!feature) return;
+
+    let showTip = false;
+    const featureLatLng = this._getLatLng(feature);
+
+    // zoomScale takes map zoom and returns proximity value for tooltip display
+    // domain (input values) is map zoom (min 1 and max 18)
+    // range (output values) is distance in meters
+    // used to compare proximity of event latlng to feature latlng
+    const zoomScale = d3.scale.linear()
+      .domain([1, 4, 7, 10, 13, 16, 18])
+      .range([1000000, 300000, 100000, 15000, 2000, 150, 50]);
+
+    const proximity = zoomScale(this._zoom);
+    const distance = latlng.distanceTo(featureLatLng);
+
+    // maxLngDif is max difference in longitudes
+    // to prevent feature tooltip from appearing 360°
+    // away from event latlng
+    const maxLngDif = 40;
+    const lngDif = Math.abs(latlng.lng - featureLatLng.lng);
+
+    if (distance < proximity && lngDif < maxLngDif) {
+      showTip = true;
+    }
+
+    d3.scale.pow().exponent(0.2)
+      .domain([1, 18])
+      .range([1500000, 50]);
+    return showTip;
+  }
 
 }
 
@@ -320,7 +474,6 @@ export default class GeohashLayer extends KibanaMapLayer {
       case 'Shaded Geohash Grid':
         this._geohashMarkers = new GeohashGrid(this._geohashGeoJson, {}, zoom);
         break;
-
       case 'Heatmap':
         this._geohashMarkers = new Heatmap(this._geohashGeoJson, {
           radius: +this._geohashOptions.heatmap.heatRadius,
@@ -328,14 +481,27 @@ export default class GeohashLayer extends KibanaMapLayer {
           maxZoom: +this._geohashOptions.heatmap.heatMaxZoom,
           minOpaxity: +this._geohashOptions.heatmap.heatMinOpacity,
           heatNormalizeData: this._geohashOptions.heatmap.heatNormalizeData
-        });
+        }, zoom);
         break;
       default:
         throw new Error(`${this._geohashOptions.mapType} mapType not recognized`);
 
     }
 
+    this._geohashMarkers.on('showTooltip', (event) => this.emit('showTooltip', event));
+    this._geohashMarkers.on('hideTooltip', (event) => this.emit('hideTooltip', event));
+
+
     this._leafletLayer = this._geohashMarkers.getLeafletLayer();
+    this._legend = null;
+  }
+
+  appendLegendContents(jqueryDiv) {
+    return this._geohashMarkers.appendLegendContents(jqueryDiv);
+  }
+
+  movePointer(...args) {
+    this._geohashMarkers.movePointer(...args);
   }
 
 
@@ -355,9 +521,6 @@ export default class GeohashLayer extends KibanaMapLayer {
   }
 }
 
-
-
-
 /**
  * d3 quantize scale returns a hex color, used for marker fill color
  *
@@ -386,8 +549,7 @@ function makeColorDarker(color) {
   return d3.hcl(color).darker(amount).toString();
 }
 
-function makeStyleFunction(min, max, legendColors) {
-  const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
+function makeStyleFunction(min, max, legendColors, quantizeDomain) {
   const legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(legendColors);
   return (feature) => {
     const value = _.get(feature, 'properties.value');
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index f3f637af79e0e..d89fa39645cee 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -30,6 +30,35 @@ const FitControl = L.Control.extend({
   }
 });
 
+
+const LegendControl = L.Control.extend({
+
+  options: {},
+
+  _updateContents() {
+    this._legendContainer.empty();
+    const $div = $('<div>').addClass('tilemap-legend');
+    this._legendContainer.append($div);
+    const layers = this._kibanaMap.getLayers();
+    layers.forEach((layer) =>layer.appendLegendContents($div));
+  },
+
+  initialize: function (container, kibanaMap) {
+    this._legendContainer = container;
+    this._kibanaMap = kibanaMap;
+
+  },
+  onAdd: function () {
+    this._layerUpdateHandle = this._kibanaMap.on('layers:update', () => this._updateContents());
+    this._updateContents();
+    return this._legendContainer.get(0);
+  },
+  onRemove: function () {
+    this._layerUpdateHandle.remove();
+  }
+
+});
+
 /**
  * Collects map functionality required for Kibana.
  * Serves as simple abstraction for leaflet as well.
@@ -48,8 +77,10 @@ class KibanaMap extends EventEmitter {
 
     this._leafletDrawControl = null;
     this._leafletFitControl = null;
+    this._leafletLegendControl = null;
 
     this._layers = [];
+    this._listeners = [];
     this._leafletMap = L.map(containerNode, {//todo: read this from meta
       minZoom: 0,
       maxZoom: 10
@@ -66,11 +97,12 @@ class KibanaMap extends EventEmitter {
         this.emit('zoomchange');
       }
     });
-
-    this._leafletMap.on('zoomend', e => {
-      this.emit('zoomend');
-    });
+    this._leafletMap.on('zoomend', e =>this.emit('zoomend'));
     this._leafletMap.on('moveend', e => this.emit('moveend'));
+    this._leafletMap.on('mousemove', e => this._layers.forEach(layer => layer.movePointer('mousemove', e)));
+    this._leafletMap.on('mouseout', e => this._layers.forEach(layer => layer.movePointer('mouseout', e)));
+    this._leafletMap.on('mousedown', e => this._layers.forEach(layer => layer.movePointer('mousedown', e)));
+    this._leafletMap.on('mouseup', e => this._layers.forEach(layer => layer.movePointer('mouseup', e)));
 
     this._leafletMap.on('draw:created', event => {
       const drawType = event.layerType;
@@ -126,9 +158,25 @@ class KibanaMap extends EventEmitter {
 
   }
 
+  getLayers() {
+    return this._layers.slice();
+  }
+
   addLayer(layer) {
+
+    const onTooltip = layer.on('showTooltip', (event) => {
+      const popup = L.popup({ autoPan: false });
+      popup.setLatLng(event.position);
+      popup.setContent(event.content);
+      popup.openOn(this._leafletMap);
+    });
+    const hideTooltip = layer.on('hideTooltip', () => this._leafletMap.closePopup());
+    this._listeners.push(onTooltip);
+    this._listeners.push(hideTooltip);
+
     this._layers.push(layer);
     layer.addToLeafletMap(this._leafletMap);
+    this.emit('layers:update');
   }
 
   removeLayer(layer) {
@@ -146,12 +194,16 @@ class KibanaMap extends EventEmitter {
     if (this._leafletDrawControl) {
       this._leafletMap.removeControl(this._leafletDrawControl);
     }
+    if (this._leafletLegendControl) {
+      this._leafletMap.removeControl(this._leafletLegendControl);
+    }
     this.setBaseLayer(null);
     for (const layer of this._layers) {
       layer.removeFromLeafletMap(this._leafletMap);
     }
     this._leafletMap.remove();
     this._containerNode.innerHTML = '';
+    this._listeners.forEach(listener => listener.remove());
   }
 
   getCenter() {
@@ -256,6 +308,18 @@ class KibanaMap extends EventEmitter {
     this._leafletMap.addControl(this._leafletFitControl);
   }
 
+
+  addLegendControl() {
+
+    if (this._leafletLegendControl || !this._leafletMap) {
+      return;
+    }
+
+    const $wrapper = $('<div>').addClass('tilemap-legend-wrapper');
+    this._leafletLegendControl = new LegendControl($wrapper, this);
+    this._leafletMap.addControl(this._leafletLegendControl);
+  }
+
   resize() {
     this._leafletMap.invalidateSize();
   }
diff --git a/src/ui/public/vis_maps/kibana_map_layer.js b/src/ui/public/vis_maps/kibana_map_layer.js
index cfa66b39eec27..9f34fa17cf76c 100644
--- a/src/ui/public/vis_maps/kibana_map_layer.js
+++ b/src/ui/public/vis_maps/kibana_map_layer.js
@@ -17,6 +17,13 @@ export default class KibanaMapLayer extends EventEmitter {
   removeFromLeafletMap(leafletMap) {
     leafletMap.removeLayer(this._leafletLayer);
   }
+
+  appendLegendContents() {
+  }
+
+
+  movePointer(event) {
+  }
 }
 
 
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 31cbf35a40e66..01b4fe5551a5c 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -28,11 +28,12 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         //Even though the basemap will not display, the user will at least still see the overlay data
         notify.warning(tilemapSettings.getError().message);
       }
-      const containerElement = $($el)[0];
 
+      const containerElement = $($el)[0];
       this._kibanaMap = new KibanaMap(containerElement);
       this._kibanaMap.addDrawControl();
       this._kibanaMap.addFitControl();
+      this._kibanaMap.addLegendControl();
 
       this._useUIState();
 
@@ -70,6 +71,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       const geohashOptions = this._getGeohashOptions();
       this._geohashLayer = new GeohashLayer(this.mapsData.geoJson, geohashOptions, this._kibanaMap.getZoomLevel());
       this._kibanaMap.addLayer(this._geohashLayer);
+
     }
 
 
@@ -82,7 +84,10 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       this._geohashGeoJson = this.mapsData.geoJson;
       this._recreateGeohashLayer();
       this._useUIState();
+
+
       this._kibanaMap.resize();
+
     }
 
     destroy() {

From 8519ad5d95ca9a624fb2b0406c63c6bf6ee75357 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Mon, 27 Feb 2017 23:04:11 -0500
Subject: [PATCH 123/150] add tooltip flag move legend with option add tms
 settings add min/max zoom  settings add valueformatters

---
 src/ui/public/vis_maps/geohash_layer.js    | 43 ++++++------
 src/ui/public/vis_maps/kibana_map.js       | 81 ++++++++++++++++------
 src/ui/public/vis_maps/kibana_map_layer.js |  3 +
 src/ui/public/vis_maps/maps_renderbot.js   | 50 +++++++++----
 4 files changed, 118 insertions(+), 59 deletions(-)

diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 6ae1ca55503c4..546a09ac795f0 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -6,18 +6,12 @@ import $ from 'jquery';
 import { EventEmitter } from 'events';
 
 class GeohashMarkers extends EventEmitter {
-  constructor(featureCollection, layerOptions, targetZoom) {
+  constructor(featureCollection, options, targetZoom) {
     super();
     this._geohashGeoJson = featureCollection;
     this._zoom = targetZoom;
-
-    this._valueFormatter = x => x;//todo: get from params
-    this._tooltipFormatter = x => {
-      const div = document.createElement('div');
-      div.innerHTML = x;
-      return div;
-    };//todo: get from params
-
+    this._valueFormatter = options.valueFormatter;
+    this._tooltipFormatter = options.tooltipFormatter;
     this._legendColors = null;
     this._legendQuantizer = null;
   }
@@ -63,7 +57,6 @@ class GeohashMarkers extends EventEmitter {
     const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
     jqueryDiv.append($title);
 
-
     const labels = this._legendColors.map((color) => {
 
       const labelText = this._legendQuantizer
@@ -287,18 +280,14 @@ class GeohashGrid extends ScaledCircles {
  */
 class Heatmap extends EventEmitter {
 
-  constructor(featureCollection, heatmapOptions, zoom) {
+  constructor(featureCollection, options, zoom) {
 
     super();
     this._geojsonFeatureCollection = featureCollection;
     const max = _.get(featureCollection, 'properties.max');
-    const points = dataToHeatArray(max, heatmapOptions.heatNormalizeData, featureCollection);
-    this._leafletLayer = L.heatLayer(points, heatmapOptions);
-    this._tooltipFormatter = x => {
-      const div = document.createElement('div');
-      div.innerHTML = x;
-      return div;
-    };//todo: get from params
+    const points = dataToHeatArray(max, options.heatNormalizeData, featureCollection);
+    this._leafletLayer = L.heatLayer(points, options);
+    this._tooltipFormatter = options.tooltipFormatter;
 
 
     this._zoom = zoom;
@@ -316,6 +305,9 @@ class Heatmap extends EventEmitter {
     this._addTooltips();
   }
 
+  getBounds() {
+    return this._leafletLayer.getBounds();
+  }
 
   getLeafletLayer() {
     return this._leafletLayer;
@@ -464,15 +456,21 @@ export default class GeohashLayer extends KibanaMapLayer {
     this._zoom = zoom;
 
     this._geohashMarkers = null;
+
+    const markerOptions = {
+      valueFormatter: this._geohashOptions.valueFormatter,
+      tooltipFormatter: this._geohashOptions.tooltipFormatter
+    };
+
     switch (this._geohashOptions.mapType) {
       case 'Scaled Circle Markers':
-        this._geohashMarkers = new ScaledCircles(this._geohashGeoJson, {}, zoom);
+        this._geohashMarkers = new ScaledCircles(this._geohashGeoJson, markerOptions, zoom);
         break;
       case 'Shaded Circle Markers':
-        this._geohashMarkers = new ShadedCircles(this._geohashGeoJson, {}, zoom);
+        this._geohashMarkers = new ShadedCircles(this._geohashGeoJson, markerOptions, zoom);
         break;
       case 'Shaded Geohash Grid':
-        this._geohashMarkers = new GeohashGrid(this._geohashGeoJson, {}, zoom);
+        this._geohashMarkers = new GeohashGrid(this._geohashGeoJson, markerOptions, zoom);
         break;
       case 'Heatmap':
         this._geohashMarkers = new Heatmap(this._geohashGeoJson, {
@@ -480,7 +478,8 @@ export default class GeohashLayer extends KibanaMapLayer {
           blur: +this._geohashOptions.heatmap.heatBlur,
           maxZoom: +this._geohashOptions.heatmap.heatMaxZoom,
           minOpaxity: +this._geohashOptions.heatmap.heatMinOpacity,
-          heatNormalizeData: this._geohashOptions.heatmap.heatNormalizeData
+          heatNormalizeData: this._geohashOptions.heatmap.heatNormalizeData,
+          tooltipFormatter: this._geohashOptions.tooltipFormatter
         }, zoom);
         break;
       default:
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index d89fa39645cee..6e59d50f512e2 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -33,7 +33,9 @@ const FitControl = L.Control.extend({
 
 const LegendControl = L.Control.extend({
 
-  options: {},
+  options: {
+    position: 'topright'
+  },//todo: add position
 
   _updateContents() {
     this._legendContainer.empty();
@@ -43,18 +45,20 @@ const LegendControl = L.Control.extend({
     layers.forEach((layer) =>layer.appendLegendContents($div));
   },
 
-  initialize: function (container, kibanaMap) {
+  initialize: function (container, kibanaMap, position) {
     this._legendContainer = container;
     this._kibanaMap = kibanaMap;
+    this.options.position = position;
 
   },
   onAdd: function () {
-    this._layerUpdateHandle = this._kibanaMap.on('layers:update', () => this._updateContents());
+    this._layerUpdateHandle = () => this._updateContents();
+    this._kibanaMap.on('layers:update', this._layerUpdateHandle);
     this._updateContents();
     return this._legendContainer.get(0);
   },
   onRemove: function () {
-    this._layerUpdateHandle.remove();
+    this._kibanaMap.removeListener('layers:update', this._layerUpdateHandle);
   }
 
 });
@@ -65,7 +69,7 @@ const LegendControl = L.Control.extend({
  */
 class KibanaMap extends EventEmitter {
 
-  constructor(containerNode) {
+  constructor(containerNode, options) {
 
     super();
 
@@ -78,17 +82,17 @@ class KibanaMap extends EventEmitter {
     this._leafletDrawControl = null;
     this._leafletFitControl = null;
     this._leafletLegendControl = null;
+    this._legendPosition = 'topright';
 
     this._layers = [];
     this._listeners = [];
-    this._leafletMap = L.map(containerNode, {//todo: read this from meta
-      minZoom: 0,
-      maxZoom: 10
-    });
-
+    this._showTooltip = false;
 
-    // this._leafletMap.setView([0, 0], 0);//todo: pass in from UI-state (if any)
-    this._leafletMap.fitWorld();//todo: pass in from UI-state (if any)
+    this._leafletMap = L.map(containerNode, {
+      minZoom: options.minZoom,
+      maxZoom: options.maxZoom
+    });
+    this._leafletMap.fitWorld();
 
     let previousZoom = this._leafletMap.getZoom();
     this._leafletMap.on('zoomend', () => {
@@ -103,7 +107,6 @@ class KibanaMap extends EventEmitter {
     this._leafletMap.on('mouseout', e => this._layers.forEach(layer => layer.movePointer('mouseout', e)));
     this._leafletMap.on('mousedown', e => this._layers.forEach(layer => layer.movePointer('mousedown', e)));
     this._leafletMap.on('mouseup', e => this._layers.forEach(layer => layer.movePointer('mouseup', e)));
-
     this._leafletMap.on('draw:created', event => {
       const drawType = event.layerType;
       if (drawType === 'rectangle') {
@@ -158,6 +161,10 @@ class KibanaMap extends EventEmitter {
 
   }
 
+  setShowTooltip(showTooltip) {
+    this._showTooltip = showTooltip;
+  }
+
   getLayers() {
     return this._layers.slice();
   }
@@ -165,6 +172,11 @@ class KibanaMap extends EventEmitter {
   addLayer(layer) {
 
     const onTooltip = layer.on('showTooltip', (event) => {
+
+      if (!this._showTooltip) {
+        return;
+      }
+
       const popup = L.popup({ autoPan: false });
       popup.setLatLng(event.position);
       popup.setContent(event.content);
@@ -274,8 +286,12 @@ class KibanaMap extends EventEmitter {
 
 
   setDesaturateBaseLayer(isDesaturated) {
+    if (isDesaturated === this._baseLayerIsDesaturated) {
+      return;
+    }
     this._baseLayerIsDesaturated = isDesaturated;
-
+    this._updateDesaturation();
+    this._leafletBaseLayer.redraw();
   }
 
   addDrawControl() {
@@ -308,15 +324,24 @@ class KibanaMap extends EventEmitter {
     this._leafletMap.addControl(this._leafletFitControl);
   }
 
-
   addLegendControl() {
-
     if (this._leafletLegendControl || !this._leafletMap) {
       return;
     }
+    this._updateLegend();
+  }
 
+  setLegendPosition(position) {
+    this._legendPosition = position;
+    if (this._leafletLegendControl) {
+      this._leafletMap.removeControl(this._leafletLegendControl);
+      this._updateLegend();
+    }
+  }
+
+  _updateLegend() {
     const $wrapper = $('<div>').addClass('tilemap-legend-wrapper');
-    this._leafletLegendControl = new LegendControl($wrapper, this);
+    this._leafletLegendControl = new LegendControl($wrapper, this, this._legendPosition);
     this._leafletMap.addControl(this._leafletLegendControl);
   }
 
@@ -328,8 +353,6 @@ class KibanaMap extends EventEmitter {
   setBaseLayer(settings) {
 
     if (_.isEqual(settings, this._baseLayerSettings)) {
-      this._updateDesaturation();
-      this._leafletBaseLayer.redraw();
       return;
     }
 
@@ -371,8 +394,8 @@ class KibanaMap extends EventEmitter {
 
     let bounds = null;
     this._layers.forEach(layer => {
-      const l = layer.getLeafletLayer();
-      const b = l.getBounds();
+      const leafletLayer = layer.getLeafletLayer();
+      const b = leafletLayer.getBounds();
       if (bounds) {
         bounds.extend(b);
       } else {
@@ -387,12 +410,24 @@ class KibanaMap extends EventEmitter {
 
   _getTMSBaseLayer(options) {
     return L.tileLayer(options.url, {
-      //todo
+      minZoom: options.minZoom,
+      maxZoom: options.maxZoom,
+      subdomains: options.subdomains,
+      attribution: options.attribution
     });
   }
 
   _getWMSBaseLayer(options) {
-    return L.tileLayer.wms(options.url, options);
+    return L.tileLayer.wms(options.url, {
+      attribution: options.attribution,
+      format: options.format,
+      layers: options.layers,
+      minZoom: options.minZoom,
+      maxZoom: options.maxZoom,
+      styles: options.styles,
+      transparent: options.transparent,
+      version: options.version
+    });
   }
 
   _updateDesaturation() {
diff --git a/src/ui/public/vis_maps/kibana_map_layer.js b/src/ui/public/vis_maps/kibana_map_layer.js
index 9f34fa17cf76c..2e445b8f2f503 100644
--- a/src/ui/public/vis_maps/kibana_map_layer.js
+++ b/src/ui/public/vis_maps/kibana_map_layer.js
@@ -24,6 +24,9 @@ export default class KibanaMapLayer extends EventEmitter {
 
   movePointer(event) {
   }
+
+  getBounds() {
+  }
 }
 
 
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 01b4fe5551a5c..b44ecbdf83402 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -20,8 +20,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
     constructor(vis, $el, uiState) {
       super(vis, $el, uiState);
 
-      this._buildChartData = buildChartData.bind(this);//todo: buildChartData shouldn't be a mixin. too confusing.
-
+      this._buildChartData = buildChartData.bind(this);
 
       if (tilemapSettings.getError()) {
         //Still allow the visualization to be build, but show a toast that there was a problem retrieving map settings
@@ -30,13 +29,19 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       }
 
       const containerElement = $($el)[0];
-      this._kibanaMap = new KibanaMap(containerElement);
+
+
+      const minMaxZoom = tilemapSettings.getMinMaxZoom(false);
+      this._kibanaMap = new KibanaMap(containerElement, minMaxZoom);
       this._kibanaMap.addDrawControl();
       this._kibanaMap.addFitControl();
       this._kibanaMap.addLegendControl();
 
       this._useUIState();
 
+
+      const autoPrecision = _.get(event, 'chart.geohashGridAgg.params.autoPrecision');
+
       let previousPrecision = this._kibanaMap.getAutoPrecision();
       let precisionChange = false;
       this._kibanaMap.on('zoomchange', e => {
@@ -47,6 +52,12 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         this._persistUIStateFromMap();
       });
       this._kibanaMap.on('zoomend', ignore => {
+
+        const isAutoPrecision = _.get(this._chartData, 'geohashGridAgg.params.autoPrecision', true);
+        if (!isAutoPrecision) {
+          return;
+        }
+
         if (precisionChange) {
           courier.fetch();
         } else {
@@ -54,7 +65,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         }
       });
       this._kibanaMap.on('drawCreated:rectangle', event => {
-        addSpatialFilter(_.get(this.mapsData, 'geohashGridAgg'), 'geo_bounding_box', event.bounds);
+        addSpatialFilter(_.get(this._chartData, 'geohashGridAgg'), 'geo_bounding_box', event.bounds);
       });
 
       this._geohashLayer = null;
@@ -69,7 +80,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
         return;
       }
       const geohashOptions = this._getGeohashOptions();
-      this._geohashLayer = new GeohashLayer(this.mapsData.geoJson, geohashOptions, this._kibanaMap.getZoomLevel());
+      this._geohashLayer = new GeohashLayer(this._chartData.geoJson, geohashOptions, this._kibanaMap.getZoomLevel());
       this._kibanaMap.addLayer(this._geohashLayer);
 
     }
@@ -80,8 +91,11 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
      * @param esResponse
      */
     render(esResponse) {
-      this.mapsData = this._buildChartData(esResponse);
-      this._geohashGeoJson = this.mapsData.geoJson;
+
+      // console.log('render', esResponse);
+
+      this._chartData = this._buildChartData(esResponse);
+      this._geohashGeoJson = this._chartData.geoJson;
       this._recreateGeohashLayer();
       this._useUIState();
 
@@ -98,16 +112,21 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
      * called on options change (vis.params change)
      */
     updateParams() {
-      const newParams = this._getMapsParams();
-      if (newParams.wms.enabled) {
+      const mapParams = this._getMapsParams();
+
+      // console.log('updateParams', mapParams);
+
+
+      //todo: when WMS changes, recreate the kibana-map
+      if (mapParams.wms.enabled) {
         const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(true);
         this._kibanaMap.setBaseLayer({
           baseLayerType: 'wms',
           options: {
             minZoom: minZoom,
             maxZoom: maxZoom,
-            url: newParams.wms.url,
-            ...newParams.wms.options
+            url: mapParams.wms.url,
+            ...mapParams.wms.options
           }
         });
       } else {
@@ -118,13 +137,14 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
           options: { url, ...options }
         });
       }
-
-
       const geohashOptions = this._getGeohashOptions();
       if (!this._geohashLayer || !this._geohashLayer.isReusable(geohashOptions)) {
         this._recreateGeohashLayer();
       }
-      this._kibanaMap.setDesaturateBaseLayer(newParams.isDesaturated);
+
+      this._kibanaMap.setDesaturateBaseLayer(mapParams.isDesaturated);
+      this._kibanaMap.setShowTooltip(mapParams.addTooltip);
+      this._kibanaMap.setLegendPosition(mapParams.legendPosition);
 
       this._useUIState();
       this._kibanaMap.resize();
@@ -177,6 +197,8 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
     _getGeohashOptions() {
       const newParams = this._getMapsParams();
       return {
+        valueFormatter: this._chartData ? this._chartData.valueFormatter : null,
+        tooltipFormatter: this._chartData ? this._chartData.tooltipFormatter : null,
         mapType: newParams.mapType,
         heatmap: {
           heatBlur: newParams.heatBlur,

From 295bf51ec5da03e6e85f2f86a58790fcebcb8b59 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 28 Feb 2017 00:53:26 -0500
Subject: [PATCH 124/150] some simplification

---
 src/ui/public/vis_maps/geohash_layer.js | 50 ++++++++++---------------
 1 file changed, 19 insertions(+), 31 deletions(-)

diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 546a09ac795f0..81a51b5309f7d 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -5,7 +5,8 @@ import d3 from 'd3';
 import $ from 'jquery';
 import { EventEmitter } from 'events';
 
-class GeohashMarkers extends EventEmitter {
+class ScaledCircles extends EventEmitter {
+
   constructor(featureCollection, options, targetZoom) {
     super();
     this._geohashGeoJson = featureCollection;
@@ -14,15 +15,23 @@ class GeohashMarkers extends EventEmitter {
     this._tooltipFormatter = options.tooltipFormatter;
     this._legendColors = null;
     this._legendQuantizer = null;
+
+    this._popups = [];
+    this._leafletLayer = L.geoJson(null, {
+      pointToLayer: this.getMarkerFunction(),
+      style: this.getStyleFunction(),
+      onEachFeature: (feature, layer) => {
+        this._bindPopup(feature, layer);
+      }
+    });
+    this._leafletLayer.addData(this._geohashGeoJson);
+
   }
 
   getLeafletLayer() {
     return this._leafletLayer;
   }
 
-  getMarkerFunction() {
-    throw new Error('should implement getMarkerFunction');
-  }
 
   getStyleFunction() {
     const min = _.get(this._geohashGeoJson, 'properties.min', 0);
@@ -40,13 +49,14 @@ class GeohashMarkers extends EventEmitter {
   }
 
   getLabel() {
-    return 'Label';
-    // if (this.popups.length) {
-    //   return this.popups[0].feature.properties.aggConfigResult.aggConfig.makeLabel();
-    // }
-    // return '';
+    // return 'Label';
+    if (this._popups.length) {
+      return this._popups[0].feature.properties.aggConfigResult.aggConfig.makeLabel();
+    }
+    return '';
   }
 
+
   appendLegendContents(jqueryDiv) {
 
     if (!this._legendColors || !this._legendQuantizer) {
@@ -81,24 +91,7 @@ class GeohashMarkers extends EventEmitter {
 
     return labels.join('');
   }
-}
-
-
-class ScaledCircles extends GeohashMarkers {
-
-  constructor() {
-    super(...arguments);
-    this._popups = [];
-    this._leafletLayer = L.geoJson(null, {
-      pointToLayer: this.getMarkerFunction(),
-      style: this.getStyleFunction(),
-      onEachFeature: (feature, layer) => {
-        this._bindPopup(feature, layer);
-      }
-    });
-    this._leafletLayer.addData(this._geohashGeoJson);
 
-  }
 
   /**
    * Binds popup and events to each feature on map
@@ -137,11 +130,6 @@ class ScaledCircles extends GeohashMarkers {
    */
   _showTooltip(feature, latLng) {
 
-    // const hasTooltip = !!this._attr.addTooltip;
-    const hasTooltip = true;//todo get this from params
-    if (!hasTooltip) {
-      return;
-    }
     const lat = _.get(feature, 'geometry.coordinates.1');
     const lng = _.get(feature, 'geometry.coordinates.0');
     latLng = latLng || L.latLng(lat, lng);

From 2a14e1e79c0aa1cc2067824c474c9f980137461c Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 28 Feb 2017 01:03:02 -0500
Subject: [PATCH 125/150] fix choropleth

---
 .../choropleth/public/choropleth_controller.js    |  3 ++-
 src/ui/public/vis_maps/kibana_map.js              | 15 +++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index d348e852523b4..c3d25b5abdb87 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -10,7 +10,8 @@ const module = uiModules.get('kibana/choropleth', ['kibana']);
 module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings) {
 
   const containerNode = $element[0];
-  const kibanaMap = new KibanaMap(containerNode);
+  const minMaxZoom = tilemapSettings.getMinMaxZoom(false);
+  const kibanaMap = new KibanaMap(containerNode, minMaxZoom);
   const url = tilemapSettings.getUrl();
   const options = tilemapSettings.getTMSOptions();
   kibanaMap.setBaseLayer({
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 6e59d50f512e2..a4d120e58b2c9 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -171,7 +171,7 @@ class KibanaMap extends EventEmitter {
 
   addLayer(layer) {
 
-    const onTooltip = layer.on('showTooltip', (event) => {
+    const onshowTooltip = (event) => {
 
       if (!this._showTooltip) {
         return;
@@ -181,10 +181,13 @@ class KibanaMap extends EventEmitter {
       popup.setLatLng(event.position);
       popup.setContent(event.content);
       popup.openOn(this._leafletMap);
-    });
-    const hideTooltip = layer.on('hideTooltip', () => this._leafletMap.closePopup());
-    this._listeners.push(onTooltip);
-    this._listeners.push(hideTooltip);
+    };
+
+    layer.on('showTooltip', onshowTooltip);
+    this._listeners.push({ name: 'showTooltip', handle: onshowTooltip, layer: layer });
+    const onHideTooltip = () => this._leafletMap.closePopup();
+    layer.on('hideTooltip', onHideTooltip);
+    this._listeners.push({ name: 'hideTooltip', handle: onHideTooltip, layer: layer });
 
     this._layers.push(layer);
     layer.addToLeafletMap(this._leafletMap);
@@ -215,7 +218,7 @@ class KibanaMap extends EventEmitter {
     }
     this._leafletMap.remove();
     this._containerNode.innerHTML = '';
-    this._listeners.forEach(listener => listener.remove());
+    this._listeners.forEach(listener => listener.remove.removeEventListener(listener.name, listener.handle));
   }
 
   getCenter() {

From 7813a9f696b8b665fa36fcc03661409d53229001 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 28 Feb 2017 01:35:56 -0500
Subject: [PATCH 126/150] do not request manifest on route-change, instead call
 it when creating map

---
 .../public/choropleth_controller.js           |  97 +++++++-------
 .../public/vis_maps/lib/tilemap_settings.js   |  14 +-
 src/ui/public/vis_maps/maps_renderbot.js      | 121 +++++++++---------
 3 files changed, 116 insertions(+), 116 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index c3d25b5abdb87..8ca8f9819d020 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -9,60 +9,71 @@ import colorramps from 'ui/vislib/components/color/colormaps';
 const module = uiModules.get('kibana/choropleth', ['kibana']);
 module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings) {
 
-  const containerNode = $element[0];
-  const minMaxZoom = tilemapSettings.getMinMaxZoom(false);
-  const kibanaMap = new KibanaMap(containerNode, minMaxZoom);
-  const url = tilemapSettings.getUrl();
-  const options = tilemapSettings.getTMSOptions();
-  kibanaMap.setBaseLayer({
-    baseLayerType: 'tms',
-    options: { url, ...options }
-  });
-
   const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
-
+  const containerNode = $element[0];
+  let kibanaMap = null;
   let choroplethLayer = null;
 
-  $scope.$watch('esResponse', async function (response) {
-    const termAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName.segment, 'id'));
-    let results;
-    if (!response || !response.aggregations) {
-      results = [];
-    } else {
-      const metricsAgg = _.first($scope.vis.aggs.bySchemaName.metric);
-      const buckets = response.aggregations[termAggId].buckets;
-      results = buckets.map((bucket) => {
-        return {
-          term: bucket.key,
-          value: getValue(metricsAgg, bucket)
-        };
-      });
-    }
+  async function makeKibanaMap() {
 
-    const options = $scope.vis.params;
-    if (!options.selectedJoinField) {
-      options.selectedJoinField = options.selectedLayer.fields[0];
+    if (!tilemapSettings.isInitialized()) {
+      await tilemapSettings.loadSettings();
     }
 
-    updateChoroplethLayer(options.selectedLayer.url);
-    choroplethLayer.setChoroplethMetrics(results);
-    kibanaMap.resize();
+    const minMaxZoom = tilemapSettings.getMinMaxZoom(false);
+    kibanaMap = new KibanaMap(containerNode, minMaxZoom);
+    const url = tilemapSettings.getUrl();
+    const options = tilemapSettings.getTMSOptions();
+    kibanaMap.setBaseLayer({
+      baseLayerType: 'tms',
+      options: { url, ...options }
+    });
+  }
 
+  const kibanaMapReady = makeKibanaMap();
+  $scope.$watch('esResponse', async function (response) {
+    kibanaMapReady.then(() => {
+      const termAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName.segment, 'id'));
+      let results;
+      if (!response || !response.aggregations) {
+        results = [];
+      } else {
+        const metricsAgg = _.first($scope.vis.aggs.bySchemaName.metric);
+        const buckets = response.aggregations[termAggId].buckets;
+        results = buckets.map((bucket) => {
+          return {
+            term: bucket.key,
+            value: getValue(metricsAgg, bucket)
+          };
+        });
+      }
+      const options = $scope.vis.params;
+      if (!options.selectedJoinField) {
+        options.selectedJoinField = options.selectedLayer.fields[0];
+      }
+      updateChoroplethLayer(options.selectedLayer.url);
+      choroplethLayer.setChoroplethMetrics(results);
+      kibanaMap.resize();
+    });
   });
 
   $scope.$watch('vis.params', (options) => {
-    if (!options.selectedJoinField) {
-      options.selectedJoinField = options.selectedLayer.fields[0];
-    }
-
-    updateChoroplethLayer(options.selectedLayer.url);
-    choroplethLayer.setChoroplethJoinField(options.selectedJoinField);
-    choroplethLayer.setChoroplethColorRamp(colorramps[options.colorSchema]);
-    kibanaMap.resize();
+    kibanaMapReady.then(() => {
+      if (!options.selectedJoinField) {
+        options.selectedJoinField = options.selectedLayer.fields[0];
+      }
+
+      updateChoroplethLayer(options.selectedLayer.url);
+      choroplethLayer.setChoroplethJoinField(options.selectedJoinField);
+      choroplethLayer.setChoroplethColorRamp(colorramps[options.colorSchema]);
+      kibanaMap.resize();
+    });
   });
 
   $scope.$watch(getContainerSize, _.debounce(() => {
-    kibanaMap.resize();
+    kibanaMapReady.then(()=> {
+      kibanaMap.resize();
+    });
   }, 500, { trailing: true }), true);
 
   function getContainerSize() {
@@ -87,10 +98,6 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     });
     kibanaMap.addLayer(choroplethLayer);
   }
-
-
-
-
 });
 
 
diff --git a/src/ui/public/vis_maps/lib/tilemap_settings.js b/src/ui/public/vis_maps/lib/tilemap_settings.js
index 4579c3c4397f6..fba7b4606f677 100644
--- a/src/ui/public/vis_maps/lib/tilemap_settings.js
+++ b/src/ui/public/vis_maps/lib/tilemap_settings.js
@@ -10,16 +10,6 @@ marked.setOptions({
   sanitize: true // Sanitize HTML tags
 });
 
-/**
- * Reloads the setting for each route,
- * This is to ensure, that if the license changed during the lifecycle of the application,
- * we get an update.
- * tilemapSettings itself will take care that the manifest-service is not queried when not necessary.
- */
-uiRoutes.afterSetupWork(function (tilemapSettings) {
-  return tilemapSettings.loadSettings();
-});
-
 uiModules.get('kibana')
   .service('tilemapSettings', function ($http, tilemapsConfig, $sanitize, kbnVersion) {
     const attributionFromConfig = $sanitize(marked(tilemapsConfig.deprecated.config.options.attribution || ''));
@@ -191,6 +181,10 @@ uiModules.get('kibana')
 
       }
 
+      isInitialized() {
+        return this._settingsInitialized;
+      }
+
 
       /**
        * Checks if there was an error during initialization of the parameters
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index b44ecbdf83402..41cdc279d240c 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -19,8 +19,17 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
 
     constructor(vis, $el, uiState) {
       super(vis, $el, uiState);
-
       this._buildChartData = buildChartData.bind(this);
+      this._geohashLayer = null;
+      this._kibanaMap = null;
+      this._kibanaMapReady = this._makeKibanaMap($el);
+    }
+
+    async _makeKibanaMap($el) {
+
+      if (!tilemapSettings.isInitialized()) {
+        await tilemapSettings.loadSettings();
+      }
 
       if (tilemapSettings.getError()) {
         //Still allow the visualization to be build, but show a toast that there was a problem retrieving map settings
@@ -29,19 +38,13 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       }
 
       const containerElement = $($el)[0];
-
-
       const minMaxZoom = tilemapSettings.getMinMaxZoom(false);
       this._kibanaMap = new KibanaMap(containerElement, minMaxZoom);
       this._kibanaMap.addDrawControl();
       this._kibanaMap.addFitControl();
       this._kibanaMap.addLegendControl();
 
-      this._useUIState();
-
-
       const autoPrecision = _.get(event, 'chart.geohashGridAgg.params.autoPrecision');
-
       let previousPrecision = this._kibanaMap.getAutoPrecision();
       let precisionChange = false;
       this._kibanaMap.on('zoomchange', e => {
@@ -67,9 +70,6 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       this._kibanaMap.on('drawCreated:rectangle', event => {
         addSpatialFilter(_.get(this._chartData, 'geohashGridAgg'), 'geo_bounding_box', event.bounds);
       });
-
-      this._geohashLayer = null;
-
     }
 
     _recreateGeohashLayer() {
@@ -82,7 +82,6 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       const geohashOptions = this._getGeohashOptions();
       this._geohashLayer = new GeohashLayer(this._chartData.geoJson, geohashOptions, this._kibanaMap.getZoomLevel());
       this._kibanaMap.addLayer(this._geohashLayer);
-
     }
 
 
@@ -91,63 +90,60 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
      * @param esResponse
      */
     render(esResponse) {
-
-      // console.log('render', esResponse);
-
-      this._chartData = this._buildChartData(esResponse);
-      this._geohashGeoJson = this._chartData.geoJson;
-      this._recreateGeohashLayer();
-      this._useUIState();
-
-
-      this._kibanaMap.resize();
-
+      this._kibanaMapReady.then(() => {
+        this._chartData = this._buildChartData(esResponse);
+        this._geohashGeoJson = this._chartData.geoJson;
+        this._recreateGeohashLayer();
+        this._useUIState();
+        this._kibanaMap.resize();
+      });
     }
 
     destroy() {
-      this._kibanaMap.destroy();
+      if (this._kibanaMap) {
+        this._kibanaMap.destroy();
+      }
     }
 
     /**
      * called on options change (vis.params change)
      */
     updateParams() {
-      const mapParams = this._getMapsParams();
-
-      // console.log('updateParams', mapParams);
-
-
-      //todo: when WMS changes, recreate the kibana-map
-      if (mapParams.wms.enabled) {
-        const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(true);
-        this._kibanaMap.setBaseLayer({
-          baseLayerType: 'wms',
-          options: {
-            minZoom: minZoom,
-            maxZoom: maxZoom,
-            url: mapParams.wms.url,
-            ...mapParams.wms.options
-          }
-        });
-      } else {
-        const url = tilemapSettings.getUrl();
-        const options = tilemapSettings.getTMSOptions();
-        this._kibanaMap.setBaseLayer({
-          baseLayerType: 'tms',
-          options: { url, ...options }
-        });
-      }
-      const geohashOptions = this._getGeohashOptions();
-      if (!this._geohashLayer || !this._geohashLayer.isReusable(geohashOptions)) {
-        this._recreateGeohashLayer();
-      }
 
-      this._kibanaMap.setDesaturateBaseLayer(mapParams.isDesaturated);
-      this._kibanaMap.setShowTooltip(mapParams.addTooltip);
-      this._kibanaMap.setLegendPosition(mapParams.legendPosition);
+      this._kibanaMapReady.then(_ => {
+        const mapParams = this._getMapsParams();
+        //todo: when WMS changes, recreate the kibana-map
+        if (mapParams.wms.enabled) {
+          const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(true);
+          this._kibanaMap.setBaseLayer({
+            baseLayerType: 'wms',
+            options: {
+              minZoom: minZoom,
+              maxZoom: maxZoom,
+              url: mapParams.wms.url,
+              ...mapParams.wms.options
+            }
+          });
+        } else {
+          const url = tilemapSettings.getUrl();
+          const options = tilemapSettings.getTMSOptions();
+          this._kibanaMap.setBaseLayer({
+            baseLayerType: 'tms',
+            options: { url, ...options }
+          });
+        }
+        const geohashOptions = this._getGeohashOptions();
+        if (!this._geohashLayer || !this._geohashLayer.isReusable(geohashOptions)) {
+          this._recreateGeohashLayer();
+        }
+
+        this._kibanaMap.setDesaturateBaseLayer(mapParams.isDesaturated);
+        this._kibanaMap.setShowTooltip(mapParams.addTooltip);
+        this._kibanaMap.setLegendPosition(mapParams.legendPosition);
 
-      this._useUIState();
-      this._kibanaMap.resize();
+        this._useUIState();
+        this._kibanaMap.resize();
+      });
     }
 
 
@@ -185,10 +181,13 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
     }
 
     _getMapsParams() {
-      return _.assign({}, this.vis.type.params.defaults, {
-        type: this.vis.type.name,
-        hasTimeField: this.vis.indexPattern && this.vis.indexPattern.hasTimeField()// Add attribute which determines whether an index is time based or not.
-      },
+      return _.assign(
+        {},
+        this.vis.type.params.defaults,
+        {
+          type: this.vis.type.name,
+          hasTimeField: this.vis.indexPattern && this.vis.indexPattern.hasTimeField()// Add attribute which determines whether an index is time based or not.
+        },
         this.vis.params
       );
     }

From 6a1eed1537c192eb1c0b9cdec1cdc6e0e018c909 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 28 Feb 2017 01:38:44 -0500
Subject: [PATCH 127/150] fix typo

---
 src/ui/public/vis_maps/kibana_map.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index a4d120e58b2c9..740709229cb3f 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -218,7 +218,7 @@ class KibanaMap extends EventEmitter {
     }
     this._leafletMap.remove();
     this._containerNode.innerHTML = '';
-    this._listeners.forEach(listener => listener.remove.removeEventListener(listener.name, listener.handle));
+    this._listeners.forEach(listener => listener.layer.removeEventListener(listener.name, listener.handle));
   }
 
   getCenter() {

From 578e01b6d5296db15d5231a48c31856b01f67bfa Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 28 Feb 2017 02:23:41 -0500
Subject: [PATCH 128/150] add rendercomplete

---
 src/ui/public/vis_maps/geohash_layer.js  |  7 ----
 src/ui/public/vis_maps/kibana_map.js     | 16 ++++++--
 src/ui/public/vis_maps/maps_renderbot.js | 51 +++++++++++++++++++-----
 3 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 81a51b5309f7d..7b82eb8ca4fd0 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -25,7 +25,6 @@ class ScaledCircles extends EventEmitter {
       }
     });
     this._leafletLayer.addData(this._geohashGeoJson);
-
   }
 
   getLeafletLayer() {
@@ -333,13 +332,8 @@ class Heatmap extends EventEmitter {
         return;
       }
 
-
       const feature = this._nearestFeature(latlng);
       if (this._tooltipProximity(latlng, feature)) {
-        const hasTooltip = true;//todo get this from params
-        if (!hasTooltip) {
-          return;
-        }
         const content = this._tooltipFormatter(feature);
         if (!content) {
           return;
@@ -348,7 +342,6 @@ class Heatmap extends EventEmitter {
           content: content,
           position: latlng
         });
-
       }
     };
 
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 740709229cb3f..98415bc522d08 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -3,8 +3,6 @@ import L from 'leaflet';
 import $ from 'jquery';
 import _ from 'lodash';
 import zoomToPrecision from 'ui/utils/zoom_to_precision';
-// import Notifier from 'ui/notify/notifier';
-
 
 const FitControl = L.Control.extend({
   options: {
@@ -35,7 +33,7 @@ const LegendControl = L.Control.extend({
 
   options: {
     position: 'topright'
-  },//todo: add position
+  },
 
   _updateContents() {
     this._legendContainer.empty();
@@ -171,6 +169,9 @@ class KibanaMap extends EventEmitter {
 
   addLayer(layer) {
 
+
+    this.emit('layers:invalidate');
+
     const onshowTooltip = (event) => {
 
       if (!this._showTooltip) {
@@ -185,6 +186,7 @@ class KibanaMap extends EventEmitter {
 
     layer.on('showTooltip', onshowTooltip);
     this._listeners.push({ name: 'showTooltip', handle: onshowTooltip, layer: layer });
+
     const onHideTooltip = () => this._leafletMap.closePopup();
     layer.on('hideTooltip', onHideTooltip);
     this._listeners.push({ name: 'hideTooltip', handle: onHideTooltip, layer: layer });
@@ -194,6 +196,11 @@ class KibanaMap extends EventEmitter {
     this.emit('layers:update');
   }
 
+
+  isReady() {
+    return this._layers.every(layer => layer.isReady());
+  }
+
   removeLayer(layer) {
     const index = this._layers.indexOf(layer);
     if (index >= 0) {
@@ -244,7 +251,6 @@ class KibanaMap extends EventEmitter {
   }
 
   getAutoPrecision() {
-    //todo: not correct, should take into account settigns...
     return zoomToPrecision(this._leafletMap.getZoom(), 12);
   }
 
@@ -381,6 +387,8 @@ class KibanaMap extends EventEmitter {
     }
 
     baseLayer.on('tileload', () => this._updateDesaturation());
+    baseLayer.on('load', () => { this.emit('baseLayer:loaded');});
+    baseLayer.on('loading', () => {this.emit('baseLayer:loading');});
 
     this._leafletBaseLayer = baseLayer;
     this._leafletBaseLayer.addTo(this._leafletMap);
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 41cdc279d240c..ec503de50ea57 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -23,6 +23,11 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       this._geohashLayer = null;
       this._kibanaMap = null;
       this._kibanaMapReady = this._makeKibanaMap($el);
+
+      this._baseLayerDirty = true;
+      this._dataDirty = true;
+      this._paramsDirty = true;
+
     }
 
     async _makeKibanaMap($el) {
@@ -47,29 +52,39 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       const autoPrecision = _.get(event, 'chart.geohashGridAgg.params.autoPrecision');
       let previousPrecision = this._kibanaMap.getAutoPrecision();
       let precisionChange = false;
-      this._kibanaMap.on('zoomchange', e => {
+      this._kibanaMap.on('zoomchange', () => {
         precisionChange = (previousPrecision !== this._kibanaMap.getAutoPrecision());
         previousPrecision = this._kibanaMap.getAutoPrecision();
       });
-      this._kibanaMap.on('moveend', ignore => {
+      this._kibanaMap.on('moveend', () => {
         this._persistUIStateFromMap();
       });
-      this._kibanaMap.on('zoomend', ignore => {
+      this._kibanaMap.on('zoomend', () => {
 
         const isAutoPrecision = _.get(this._chartData, 'geohashGridAgg.params.autoPrecision', true);
         if (!isAutoPrecision) {
           return;
         }
 
+        this._dataDirty = true;
         if (precisionChange) {
           courier.fetch();
         } else {
           this._recreateGeohashLayer();
+          this._dataDirty = false;
+          this._doRenderComplete();
         }
       });
       this._kibanaMap.on('drawCreated:rectangle', event => {
         addSpatialFilter(_.get(this._chartData, 'geohashGridAgg'), 'geo_bounding_box', event.bounds);
       });
+      this._kibanaMap.on('baseLayer:loaded', () => {
+        this._baseLayerDirty = false;
+        this._doRenderComplete();
+      });
+      this._kibanaMap.on('baseLayer:loading', () => {
+        this._baseLayerDirty = true;
+      });
     }
 
     _recreateGeohashLayer() {
@@ -90,12 +105,15 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
      * @param esResponse
      */
     render(esResponse) {
+      this._dataDirty = true;
       this._kibanaMapReady.then(() => {
         this._chartData = this._buildChartData(esResponse);
         this._geohashGeoJson = this._chartData.geoJson;
         this._recreateGeohashLayer();
         this._useUIState();
         this._kibanaMap.resize();
+        this._dataDirty = false;
+        this._doRenderComplete();
       });
     }
 
@@ -110,6 +128,7 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
      */
     updateParams() {
 
+      this._paramsDirty = true;
       this._kibanaMapReady.then(_ => {
         const mapParams = this._getMapsParams();
         //todo: when WMS changes, recreate the kibana-map
@@ -125,12 +144,14 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
             }
           });
         } else {
-          const url = tilemapSettings.getUrl();
-          const options = tilemapSettings.getTMSOptions();
-          this._kibanaMap.setBaseLayer({
-            baseLayerType: 'tms',
-            options: { url, ...options }
-          });
+          if (!tilemapSettings.hasError()) {
+            const url = tilemapSettings.getUrl();
+            const options = tilemapSettings.getTMSOptions();
+            this._kibanaMap.setBaseLayer({
+              baseLayerType: 'tms',
+              options: { url, ...options }
+            });
+          }
         }
         const geohashOptions = this._getGeohashOptions();
         if (!this._geohashLayer || !this._geohashLayer.isReusable(geohashOptions)) {
@@ -143,6 +164,8 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
 
         this._useUIState();
         this._kibanaMap.resize();
+        this._paramsDirty = false;
+        this._doRenderComplete();
       });
     }
 
@@ -192,7 +215,6 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       );
     }
 
-
     _getGeohashOptions() {
       const newParams = this._getMapsParams();
       return {
@@ -209,8 +231,15 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       };
     }
 
-  }
+    _doRenderComplete() {
+
+      if (this._paramsDirty || this._dataDirty || this._baseLayerDirty) {
+        return;
+      }
+      $(this.el).trigger('renderComplete');
+    }
 
+  }
 
   function addSpatialFilter(agg, filterName, filterData) {
     if (!agg) {

From bc81b167cbdd4a74a802809006b671f7dd5503a2 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 28 Feb 2017 11:02:05 -0500
Subject: [PATCH 129/150] initial review

---
 .../kbn_vislib_vis_types/public/tile_map.js   | 32 -----------------
 src/ui/public/filter_bar/put_filter.js        | 36 -------------------
 src/ui/public/filter_bar/remove_filter.js     | 33 -----------------
 .../vis_maps/__tests__/tile_maps/map.js       |  2 +-
 4 files changed, 1 insertion(+), 102 deletions(-)
 delete mode 100644 src/ui/public/filter_bar/put_filter.js
 delete mode 100644 src/ui/public/filter_bar/remove_filter.js

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
index a4713d0309874..ba175c52087a6 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
@@ -45,7 +45,6 @@ export default function TileMapVisType(Private, getAppState, courier, config) {
         value: 'topright',
         text: 'top right',
       }],
-      // mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid', 'Heatmap'],
       mapTypes: ['Scaled Circle Markers',
         'Shaded Circle Markers',
         'Shaded Geohash Grid',
@@ -54,37 +53,6 @@ export default function TileMapVisType(Private, getAppState, courier, config) {
       canDesaturate: !!supports.cssFilters,
       editor: tileMapTemplate
     },
-    // listeners: {
-    //   rectangle: function (event) {
-    //     const agg = _.get(event, 'chart.geohashGridAgg');
-    //     if (!agg) return;
-    //
-    //     const pushFilter = Private(FilterBarPushFilterProvider)(getAppState());
-    //     const indexPatternName = agg.vis.indexPattern.id;
-    //     const field = agg.fieldName();
-    //     const filter = { geo_bounding_box: {} };
-    //     filter.geo_bounding_box[field] = event.bounds;
-    //
-    //     pushFilter(filter, false, indexPatternName);
-    //   },
-    //   mapMoveEnd: function (event) {
-    //     const vis = _.get(event, 'chart.geohashGridAgg.vis');
-    //     if (vis && vis.hasUiState()) {
-    //       vis.getUiState().set('mapCenter', event.center);
-    //     }
-    //   },
-    //   mapZoomEnd: function (event) {
-    //     const vis = _.get(event, 'chart.geohashGridAgg.vis');
-    //     if (vis && vis.hasUiState()) {
-    //       vis.getUiState().set('mapZoom', event.zoom);
-    //     }
-    //
-    //     const autoPrecision = _.get(event, 'chart.geohashGridAgg.params.autoPrecision');
-    //     if (autoPrecision) {
-    //       courier.fetch();
-    //     }
-    //   }
-    // },
     responseConverter: geoJsonConverter,
     implementsRenderComplete: true,
     schemas: new Schemas([
diff --git a/src/ui/public/filter_bar/put_filter.js b/src/ui/public/filter_bar/put_filter.js
deleted file mode 100644
index e88dc90e73548..0000000000000
--- a/src/ui/public/filter_bar/put_filter.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import _ from 'lodash';
-
-export default function () {
-
-  return function ($state) {
-    if (!_.isObject($state)) throw new Error('pushFilters requires a state object');
-    return function (filter, negate, index, filterId) {
-      // Hierarchical and tabular data set their aggConfigResult parameter
-      // differently because of how the point is rewritten between the two. So
-      // we need to check if the point.orig is set, if not use try the point.aggConfigResult
-      const filters = _.clone($state.filters || []);
-      let position = -1;
-      if (filterId) {
-        filters.forEach((filter, ind) => {
-          if (filterId === filter.meta._id) {
-            position = ind;
-          }
-        });
-
-        if (position > -1) {
-          const pendingFilter = { meta: { negate: negate, index: index, _id: filterId } };
-          _.extend(pendingFilter, filter);
-          filters[position] = pendingFilter;
-          $state.filters = filters;
-          return false;
-        }
-      }
-
-      const pendingFilter = { meta: { negate: negate, index: index, _id: filterId } };
-      _.extend(pendingFilter, filter);
-      filters.push(pendingFilter);
-      $state.filters = filters;
-      return true;
-    };
-  };
-}
diff --git a/src/ui/public/filter_bar/remove_filter.js b/src/ui/public/filter_bar/remove_filter.js
deleted file mode 100644
index d78f4be76e2f7..0000000000000
--- a/src/ui/public/filter_bar/remove_filter.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import _ from 'lodash';
-
-export default function () {
-
-  return function ($state, $scope) {
-    if (!_.isObject($state)) throw new Error('pushFilters requires a state object');
-    return function (filterId) {
-      // Hierarchical and tabular data set their aggConfigResult parameter
-      // differently because of how the point is rewritten between the two. So
-      // we need to check if the point.orig is set, if not use try the point.aggConfigResult
-      const filters = _.clone($state.filters || []);
-      let position = -1;
-      if (filterId) {
-        filters.forEach((filter, ind) => {
-          if (filterId === filter.meta._id) {
-            position = ind;
-          }
-        });
-
-        if (position > -1) {
-          // const pendingFilter = {meta: {negate: negate, index: index, _id: filterId}};
-          // console.log('remove  the filter');
-          filters.splice(position, 1);
-
-          $state.filters = filters;
-          return true;
-        }
-      }
-
-      return false;
-    };
-  };
-}
diff --git a/src/ui/public/vis_maps/__tests__/tile_maps/map.js b/src/ui/public/vis_maps/__tests__/tile_maps/map.js
index bb28e07465c7c..b7b0f99417524 100644
--- a/src/ui/public/vis_maps/__tests__/tile_maps/map.js
+++ b/src/ui/public/vis_maps/__tests__/tile_maps/map.js
@@ -13,7 +13,7 @@ import VislibVisualizationsMapProvider from 'ui/vis_maps/visualizations/_map';
 // const dataArray = [
 //   ['geojson', require('fixtures/vislib/mock_data/geohash/_geo_json')],
 //   ['columns', require('fixtures/vislib/mock_data/geohash/_columns')],
-//   ['rows', require('fixtures/vislib/mock_data/geohash/_rows')],N
+//   ['rows', require('fixtures/vislib/mock_data/geohash/_rows')],
 // ];
 
 // TODO: Test the specific behavior of each these

From 9083d5e484a50bc5ef95c69c3eb454c32d8b448a Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 28 Feb 2017 15:54:13 -0500
Subject: [PATCH 130/150] fix resizing

---
 package.json                             | 2 +-
 src/ui/public/vis_maps/kibana_map.js     | 2 +-
 src/ui/public/vis_maps/maps_renderbot.js | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index cc319058a07ff..16b4a676a7aa2 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "dashboarding"
   ],
   "private": false,
-  "version": "6.0.0-alpha1",
+  "version": "5.2.0",
   "build": {
     "number": 8467,
     "sha": "6cb7fec4e154faa0a4a3fee4b33dfef91b9870d9"
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 98415bc522d08..5b034617b5f97 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -225,7 +225,7 @@ class KibanaMap extends EventEmitter {
     }
     this._leafletMap.remove();
     this._containerNode.innerHTML = '';
-    this._listeners.forEach(listener => listener.layer.removeEventListener(listener.name, listener.handle));
+    this._listeners.forEach(listener => listener.layer.removeListener(listener.name, listener.handle));
   }
 
   getCenter() {
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index ec503de50ea57..491e4df498ede 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -7,10 +7,12 @@ import KibanaMap from './kibana_map';
 import GeohashLayer from './geohash_layer';
 import './lib/tilemap_settings';
 import './styles/_tilemap.less';
+import VislibLibResizeCheckerProvider from '../vislib/lib/resize_checker';
 
 
 module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettings, Notifier, courier, getAppState) {
 
+  const ResizeChecker = Private(VislibLibResizeCheckerProvider);
   const Renderbot = Private(VisRenderbotProvider);
   const buildChartData = Private(MapsVisTypeBuildChartDataProvider);
   const notify = new Notifier({ location: 'Tilemap' });
@@ -28,6 +30,13 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
       this._dataDirty = true;
       this._paramsDirty = true;
 
+
+      this._resizeChecker = new ResizeChecker($el);
+      this._resizeChecker.on('resize', () => {
+        if (this._kibanaMap) {
+          this._kibanaMap.resize();
+        }
+      });
     }
 
     async _makeKibanaMap($el) {

From e0b42f907e86ecf90e0174bd6bca472e4377f831 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 28 Feb 2017 23:33:35 -0500
Subject: [PATCH 131/150] add tooltips

---
 package.json                                  |  2 +-
 .../public/choropleth_controller.js           | 28 ++++++++---
 .../choropleth/public}/choropleth_layer.js    | 46 +++++++++++++++----
 .../choropleth/public/tooltip.html            |  8 ++++
 .../choropleth/public/tooltip_formatter.js    | 32 +++++++++++++
 src/ui/public/vis_maps/geohash_layer.js       | 17 +------
 6 files changed, 102 insertions(+), 31 deletions(-)
 rename src/{ui/public/vis_maps => core_plugins/choropleth/public}/choropleth_layer.js (72%)
 create mode 100644 src/core_plugins/choropleth/public/tooltip.html
 create mode 100644 src/core_plugins/choropleth/public/tooltip_formatter.js

diff --git a/package.json b/package.json
index 16b4a676a7aa2..53c02c590e92b 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "dashboarding"
   ],
   "private": false,
-  "version": "5.2.0",
+  "version": "6.0.0",
   "build": {
     "number": 8467,
     "sha": "6cb7fec4e154faa0a4a3fee4b33dfef91b9870d9"
diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index 8ca8f9819d020..9d1a364f477d4 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -2,15 +2,18 @@ import uiModules from 'ui/modules';
 import _ from 'lodash';
 import AggConfigResult from 'ui/vis/agg_config_result';
 import KibanaMap from 'ui/vis_maps/kibana_map';
-import ChoroplethLayer from 'ui/vis_maps/choropleth_layer';
 import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_click_handler';
+import ChoroplethLayer from './choropleth_layer';
 import colorramps from 'ui/vislib/components/color/colormaps';
+import AggResponsePointSeriesTooltipFormatterProvider from './tooltip_formatter';
 
 const module = uiModules.get('kibana/choropleth', ['kibana']);
 module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings) {
 
   const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
   const containerNode = $element[0];
+  const tooltipFormatter = Private(AggResponsePointSeriesTooltipFormatterProvider);
+
   let kibanaMap = null;
   let choroplethLayer = null;
 
@@ -32,13 +35,14 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
 
   const kibanaMapReady = makeKibanaMap();
   $scope.$watch('esResponse', async function (response) {
+
     kibanaMapReady.then(() => {
+      const metricsAgg = _.first($scope.vis.aggs.bySchemaName.metric);
       const termAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName.segment, 'id'));
       let results;
       if (!response || !response.aggregations) {
         results = [];
       } else {
-        const metricsAgg = _.first($scope.vis.aggs.bySchemaName.metric);
         const buckets = response.aggregations[termAggId].buckets;
         results = buckets.map((bucket) => {
           return {
@@ -52,7 +56,16 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
         options.selectedJoinField = options.selectedLayer.fields[0];
       }
       updateChoroplethLayer(options.selectedLayer.url);
-      choroplethLayer.setChoroplethMetrics(results);
+      choroplethLayer.setMetrics(results);
+
+
+      if ($scope.vis.aggs.bySchemaName.segment[0]) {
+        const fieldName = $scope.vis.aggs.bySchemaName.segment[0].params.field.name;
+        choroplethLayer.setTooltipFormatter(tooltipFormatter, metricsAgg, fieldName);
+      } else {
+        choroplethLayer.setTooltipFormatter(tooltipFormatter, metricsAgg, null);
+      }
+
       kibanaMap.resize();
     });
   });
@@ -64,12 +77,16 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       }
 
       updateChoroplethLayer(options.selectedLayer.url);
-      choroplethLayer.setChoroplethJoinField(options.selectedJoinField);
-      choroplethLayer.setChoroplethColorRamp(colorramps[options.colorSchema]);
+      choroplethLayer.setJoinField(options.selectedJoinField);
+      choroplethLayer.setColorRamp(colorramps[options.colorSchema]);
+
+      kibanaMap.setShowTooltip(true);
       kibanaMap.resize();
     });
   });
 
+
+  //todo: switch with ResizeChecker
   $scope.$watch(getContainerSize, _.debounce(() => {
     kibanaMapReady.then(()=> {
       kibanaMap.resize();
@@ -89,7 +106,6 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     kibanaMap.removeLayer(choroplethLayer);
     choroplethLayer = new ChoroplethLayer(url);
     choroplethLayer.on('select', function (event) {
-      console.log('select!', arguments);
       const appState = getAppState();
       const clickHandler = filterBarClickHandler(appState);
       const aggs = $scope.vis.aggs.getResponseAggs();
diff --git a/src/ui/public/vis_maps/choropleth_layer.js b/src/core_plugins/choropleth/public/choropleth_layer.js
similarity index 72%
rename from src/ui/public/vis_maps/choropleth_layer.js
rename to src/core_plugins/choropleth/public/choropleth_layer.js
index 867c36b285535..6578b80ea32d9 100644
--- a/src/ui/public/vis_maps/choropleth_layer.js
+++ b/src/core_plugins/choropleth/public/choropleth_layer.js
@@ -1,10 +1,9 @@
-import KibanaMapLayer from './kibana_map_layer';
 import $ from 'jquery';
 import L from 'leaflet';
 import _ from 'lodash';
+import KibanaMapLayer from 'ui/vis_maps/kibana_map_layer';
 import colorramps from 'ui/vislib/components/color/colormaps';
 
-
 export default class ChoroplethLayer extends KibanaMapLayer {
 
   constructor(geojsonUrl) {
@@ -13,19 +12,40 @@ export default class ChoroplethLayer extends KibanaMapLayer {
     this._metrics = null;
     this._joinField = null;
     this._colorRamp = colorramps['Yellow to Red'];
+    this._tooltipFormatter = x => '';
 
     this._geojsonUrl = geojsonUrl;
     this._leafletLayer = L.geoJson(null, {
       onEachFeature: (feature, layer) => {
+
         layer.on('click', () => {
           this.emit('select', feature.properties[this._joinField]);
         });
+        let location = null;
+        const popup = layer.on({
+          mouseover: (event) => {
+
+            const tooltipContents = this._tooltipFormatter(feature);
+            if (!location) {
+              const leafletGeojon = L.geoJson(feature);
+              location = leafletGeojon.getBounds().getCenter();
+            }
+
+            this.emit('showTooltip', {
+              content: tooltipContents,
+              position: location
+            });
+          },
+          mouseout: () => {
+            this.emit('hideTooltip');
+          }
+        });
       },
       style: emptyStyle
     });
 
     this._loaded = false;
-    $.ajax({
+    $.ajax({//todo: replace with es6 fetch
       dataType: 'json',
       url: geojsonUrl,
       success: (data) => {
@@ -48,7 +68,19 @@ export default class ChoroplethLayer extends KibanaMapLayer {
   }
 
 
-  setChoroplethJoinField(joinfield) {
+  setTooltipFormatter(tooltipFormatter, metricsAgg, fieldName) {
+    this._tooltipFormatter = (geojsonFeature) => {
+      if (!this._metrics) {
+        return '';
+      }
+      const match = this._metrics.find((bucket) => {
+        return bucket.term === geojsonFeature.properties[this._joinField];
+      });
+      return tooltipFormatter(metricsAgg, match, fieldName);
+    };
+  }
+
+  setJoinField(joinfield) {
     if (joinfield === this._joinField) {
       return;
     }
@@ -57,12 +89,12 @@ export default class ChoroplethLayer extends KibanaMapLayer {
   }
 
 
-  setChoroplethMetrics(metrics) {
+  setMetrics(metrics) {
     this._metrics = metrics;
     this._setChoroplethStyle();
   }
 
-  setChoroplethColorRamp(colorRamp) {
+  setColorRamp(colorRamp) {
     if (_.isEqual(colorRamp, this._colorRamp)) {
       return;
     }
@@ -77,7 +109,6 @@ export default class ChoroplethLayer extends KibanaMapLayer {
 
 }
 
-
 function makeChoroplethStyleFunction(data, colorramp, joinField) {
 
   if (data.length === 0) {
@@ -111,7 +142,6 @@ function makeChoroplethStyleFunction(data, colorramp, joinField) {
       fillOpacity: 0.7
     };
   };
-
 }
 
 function getChoroplethColor(value, min, max, colorRamp) {
diff --git a/src/core_plugins/choropleth/public/tooltip.html b/src/core_plugins/choropleth/public/tooltip.html
new file mode 100644
index 0000000000000..b0d07cb80e4b3
--- /dev/null
+++ b/src/core_plugins/choropleth/public/tooltip.html
@@ -0,0 +1,8 @@
+<table>
+  <tbody>
+    <tr ng-repeat="detail in details" >
+      <td class="tooltip-label"><b>{{detail.label}}</b></td>
+      <td class="tooltip-value">{{detail.value}}</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/core_plugins/choropleth/public/tooltip_formatter.js b/src/core_plugins/choropleth/public/tooltip_formatter.js
new file mode 100644
index 0000000000000..00d831189ef72
--- /dev/null
+++ b/src/core_plugins/choropleth/public/tooltip_formatter.js
@@ -0,0 +1,32 @@
+import $ from 'jquery';
+export default function TileMapTooltipFormatter($compile, $rootScope, Private) {
+
+  const $tooltipScope = $rootScope.$new();
+  const $el = $('<div>').html(require('./tooltip.html'));
+  $compile($el)($tooltipScope);
+
+  return function tooltipFormatter(metricAgg, metric, fieldName) {
+
+    if (!metric) {
+      return '';
+    }
+
+    $tooltipScope.details = [];
+    if (fieldName && metric) {
+      $tooltipScope.details.push({
+        label: fieldName,
+        value: metric.term
+      });
+    }
+
+    if (metric) {
+      $tooltipScope.details.push({
+        label: metricAgg.makeLabel(),
+        value: metricAgg.fieldFormatter()(metric.value)
+      });
+    }
+
+    $tooltipScope.$apply();
+    return $el.html();
+  };
+}
diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 7b82eb8ca4fd0..0fe4be9a0a377 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -48,7 +48,6 @@ class ScaledCircles extends EventEmitter {
   }
 
   getLabel() {
-    // return 'Label';
     if (this._popups.length) {
       return this._popups[0].feature.properties.aggConfigResult.aggConfig.makeLabel();
     }
@@ -111,7 +110,7 @@ class ScaledCircles extends EventEmitter {
         this._showTooltip(feature);
       },
       mouseout: () => {
-        this._hidePopup();
+        this.emit('hideTooltip');
       }
     });
 
@@ -144,20 +143,6 @@ class ScaledCircles extends EventEmitter {
     });
   }
 
-  /**
-   * Closes the tooltip on the map
-   *
-   * @method _hidePopup
-   * @return undefined
-   */
-  _hidePopup() {
-    // if (!this.map) return;
-    //
-    // this.map.closePopup();
-    this.emit('hideTooltip');
-  }
-
-
   getMarkerFunction() {
     const scaleFactor = 0.6;
     return (feature, latlng) => {

From 5ea4d7eac4acfb20a0ce898da4625db5761e2c25 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Wed, 1 Mar 2017 00:33:43 -0500
Subject: [PATCH 132/150] add legend

---
 .../public/choropleth_controller.js           |   3 +-
 .../choropleth/public/choropleth_layer.js     | 120 +++++++++++++++---
 src/ui/public/vis_maps/geohash_layer.js       |   8 +-
 src/ui/public/vis_maps/kibana_map.js          |  16 ++-
 4 files changed, 118 insertions(+), 29 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index 9d1a364f477d4..e8b0e0d3d4771 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -31,6 +31,7 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       baseLayerType: 'tms',
       options: { url, ...options }
     });
+    kibanaMap.addLegendControl();
   }
 
   const kibanaMapReady = makeKibanaMap();
@@ -56,7 +57,7 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
         options.selectedJoinField = options.selectedLayer.fields[0];
       }
       updateChoroplethLayer(options.selectedLayer.url);
-      choroplethLayer.setMetrics(results);
+      choroplethLayer.setMetrics(results, metricsAgg);
 
 
       if ($scope.vis.aggs.bySchemaName.segment[0]) {
diff --git a/src/core_plugins/choropleth/public/choropleth_layer.js b/src/core_plugins/choropleth/public/choropleth_layer.js
index 6578b80ea32d9..002eb124d5446 100644
--- a/src/core_plugins/choropleth/public/choropleth_layer.js
+++ b/src/core_plugins/choropleth/public/choropleth_layer.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import L from 'leaflet';
 import _ from 'lodash';
+import d3 from 'd3';
 import KibanaMapLayer from 'ui/vis_maps/kibana_map_layer';
 import colorramps from 'ui/vislib/components/color/colormaps';
 
@@ -17,7 +18,6 @@ export default class ChoroplethLayer extends KibanaMapLayer {
     this._geojsonUrl = geojsonUrl;
     this._leafletLayer = L.geoJson(null, {
       onEachFeature: (feature, layer) => {
-
         layer.on('click', () => {
           this.emit('select', feature.properties[this._joinField]);
         });
@@ -51,7 +51,7 @@ export default class ChoroplethLayer extends KibanaMapLayer {
       success: (data) => {
         this._leafletLayer.addData(data);
         this._loaded = true;
-        this._setChoroplethStyle();
+        this._setStyle();
       }
     }).error(function (e) {
       // notifier.fatal(e);
@@ -59,12 +59,23 @@ export default class ChoroplethLayer extends KibanaMapLayer {
     });
   }
 
-  _setChoroplethStyle() {
+  _setStyle() {
     if (!this._loaded || !this._metrics || !this._joinField) {
       return;
     }
+
+
     const styleFunction = makeChoroplethStyleFunction(this._metrics, this._colorRamp, this._joinField);
     this._leafletLayer.setStyle(styleFunction);
+
+
+    if (this._metrics && this._metrics.length > 0) {
+      const {min, max} = getMinMax(this._metrics);
+      this._legendColors = getLegendColors(this._colorRamp);
+      const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
+      this._legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(this._legendColors);
+    }
+    this.emit('styleChanged');
   }
 
 
@@ -85,13 +96,15 @@ export default class ChoroplethLayer extends KibanaMapLayer {
       return;
     }
     this._joinField = joinfield;
-    this._setChoroplethStyle();
+    this._setStyle();
   }
 
 
-  setMetrics(metrics) {
+  setMetrics(metrics, metricsAgg) {
     this._metrics = metrics;
-    this._setChoroplethStyle();
+    this._metricsAgg = metricsAgg;
+    this._valueFormatter = this._metricsAgg.fieldFormatter();
+    this._setStyle();
   }
 
   setColorRamp(colorRamp) {
@@ -99,30 +112,76 @@ export default class ChoroplethLayer extends KibanaMapLayer {
       return;
     }
     this._colorRamp = colorRamp;
-    this._setChoroplethStyle();
+    this._setStyle();
   }
 
   equalsGeoJsonUrl(geojsonUrl) {
     return this._geojsonUrl === geojsonUrl;
   }
 
+  appendLegendContents(jqueryDiv) {
 
-}
 
-function makeChoroplethStyleFunction(data, colorramp, joinField) {
+    if (!this._legendColors || !this._legendQuantizer || !this._metricsAgg) {
+      return '';
+    }
+
+    const titleText = this._metricsAgg.makeLabel();
+    // const titleText = 'foobar';
+    const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
+    jqueryDiv.append($title);
+
+    this._legendColors.forEach((color) => {
+
+      const labelText = this._legendQuantizer
+        .invertExtent(color)
+        .map(this._valueFormatter)
+        .join(' – ');
+
+      const label = $('<div>');
+      const icon = $('<i>').css({
+        background: color,
+        'border-color': makeColorDarker(color)
+      });
+
+      const text = $('<span>').text(labelText);
+      label.append(icon);
+      label.append(text);
+
+      jqueryDiv.append(label);
+    });
 
-  if (data.length === 0) {
-    return function () {
-      return emptyStyle();
-    };
   }
 
+}
+
+
+function makeColorDarker(color) {
+  const amount = 1.3;//magic number, carry over from earlier
+  return d3.hcl(color).darker(amount).toString();
+}
+
+
+function getMinMax(data) {
   let min = data[0].value;
   let max = data[0].value;
   for (let i = 1; i < data.length; i += 1) {
     min = Math.min(data[i].value, min);
     max = Math.max(data[i].value, max);
   }
+  return {min, max};
+}
+
+
+function makeChoroplethStyleFunction(data, colorramp, joinField) {
+
+  if (data.length === 0) {
+    return function () {
+      return emptyStyle();
+    };
+  }
+
+  const {min, max} = getMinMax(data);
 
   return function (geojsonFeature) {
 
@@ -142,8 +201,36 @@ function makeChoroplethStyleFunction(data, colorramp, joinField) {
       fillOpacity: 0.7
     };
   };
+  // const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
+  // const legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(colorramp);
+
+  // return {
+  //   styleFunction: styleFunction,
+  //   legendQuantizer: legendQuantizer
+  // };
+}
+
+
+function getLegendColors(colorRamp) {
+
+  const colors = [];
+  colors[0] = getColor(colorRamp, 0);
+  colors[1] = getColor(colorRamp, Math.floor(colorRamp.length * 1 / 4));
+  colors[2] = getColor(colorRamp, Math.floor(colorRamp.length * 2 / 4));
+  colors[3] = getColor(colorRamp, Math.floor(colorRamp.length * 3 / 4));
+  colors[4] = getColor(colorRamp, colorRamp.length - 1);
+  return colors;
 }
 
+function getColor(colorRamp, i) {
+  const color = colorRamp[i][1];
+  const red = Math.floor(color[0] * 255);
+  const green = Math.floor(color[1] * 255);
+  const blue = Math.floor(color[2] * 255);
+  return `rgb(${red},${green},${blue})`;
+}
+
+
 function getChoroplethColor(value, min, max, colorRamp) {
   if (min === max) {
     return colorRamp[colorRamp.length - 1];
@@ -152,14 +239,9 @@ function getChoroplethColor(value, min, max, colorRamp) {
   const index = Math.round(colorRamp.length * fraction) - 1;
   const i = Math.max(Math.min(colorRamp.length - 1, index), 0);
 
-  const color = colorRamp[i][1];
-  const red = Math.floor(color[0] * 255);
-  const green = Math.floor(color[1] * 255);
-  const blue = Math.floor(color[2] * 255);
-  return `rgb(${red},${green},${blue})`;
+  return getColor(colorRamp, i);
 }
 
-
 const emptyStyleObject = {
   weight: 1,
   opacity: 0.6,
diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 0fe4be9a0a377..8f0b029b1b993 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -58,36 +58,32 @@ class ScaledCircles extends EventEmitter {
   appendLegendContents(jqueryDiv) {
 
     if (!this._legendColors || !this._legendQuantizer) {
-      return '';
+      return;
     }
 
     const titleText = this.getLabel();
     const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
     jqueryDiv.append($title);
 
-    const labels = this._legendColors.map((color) => {
-
+    this._legendColors.forEach((color) => {
       const labelText = this._legendQuantizer
         .invertExtent(color)
         .map(this._valueFormatter)
         .join(' – ');
 
       const label = $('<div>');
-
       const icon = $('<i>').css({
         background: color,
         'border-color': makeColorDarker(color)
       });
 
       const text = $('<span>').text(labelText);
-
       label.append(icon);
       label.append(text);
 
       jqueryDiv.append(label);
     });
 
-    return labels.join('');
   }
 
 
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 5b034617b5f97..8e48f1bcd5510 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -35,7 +35,7 @@ const LegendControl = L.Control.extend({
     position: 'topright'
   },
 
-  _updateContents() {
+  updateContents() {
     this._legendContainer.empty();
     const $div = $('<div>').addClass('tilemap-legend');
     this._legendContainer.append($div);
@@ -43,6 +43,7 @@ const LegendControl = L.Control.extend({
     layers.forEach((layer) =>layer.appendLegendContents($div));
   },
 
+
   initialize: function (container, kibanaMap, position) {
     this._legendContainer = container;
     this._kibanaMap = kibanaMap;
@@ -50,9 +51,9 @@ const LegendControl = L.Control.extend({
 
   },
   onAdd: function () {
-    this._layerUpdateHandle = () => this._updateContents();
+    this._layerUpdateHandle = () => this.updateContents();
     this._kibanaMap.on('layers:update', this._layerUpdateHandle);
-    this._updateContents();
+    this.updateContents();
     return this._legendContainer.get(0);
   },
   onRemove: function () {
@@ -191,6 +192,15 @@ class KibanaMap extends EventEmitter {
     layer.on('hideTooltip', onHideTooltip);
     this._listeners.push({ name: 'hideTooltip', handle: onHideTooltip, layer: layer });
 
+
+    const onStyleChanged = () => {
+      if (this._leafletLegendControl) {
+        this._leafletLegendControl.updateContents();
+      }
+    };
+    layer.on('styleChanged', onStyleChanged);
+    this._listeners.push({name: 'styleChanged', handle: onStyleChanged, layer: layer});
+
     this._layers.push(layer);
     layer.addToLeafletMap(this._leafletMap);
     this.emit('layers:update');

From a32e33fdeb9ff133f0838b4389364018232d09bf Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Wed, 1 Mar 2017 00:34:31 -0500
Subject: [PATCH 133/150] fix linting errors

---
 src/core_plugins/choropleth/public/choropleth_layer.js | 6 +++---
 src/ui/public/vis_maps/kibana_map.js                   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_layer.js b/src/core_plugins/choropleth/public/choropleth_layer.js
index 002eb124d5446..6b93b131a8bad 100644
--- a/src/core_plugins/choropleth/public/choropleth_layer.js
+++ b/src/core_plugins/choropleth/public/choropleth_layer.js
@@ -70,7 +70,7 @@ export default class ChoroplethLayer extends KibanaMapLayer {
 
 
     if (this._metrics && this._metrics.length > 0) {
-      const {min, max} = getMinMax(this._metrics);
+      const { min, max } = getMinMax(this._metrics);
       this._legendColors = getLegendColors(this._colorRamp);
       const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
       this._legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(this._legendColors);
@@ -169,7 +169,7 @@ function getMinMax(data) {
     min = Math.min(data[i].value, min);
     max = Math.max(data[i].value, max);
   }
-  return {min, max};
+  return { min, max };
 }
 
 
@@ -181,7 +181,7 @@ function makeChoroplethStyleFunction(data, colorramp, joinField) {
     };
   }
 
-  const {min, max} = getMinMax(data);
+  const { min, max } = getMinMax(data);
 
   return function (geojsonFeature) {
 
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index 8e48f1bcd5510..beccac3da47a8 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -199,7 +199,7 @@ class KibanaMap extends EventEmitter {
       }
     };
     layer.on('styleChanged', onStyleChanged);
-    this._listeners.push({name: 'styleChanged', handle: onStyleChanged, layer: layer});
+    this._listeners.push({ name: 'styleChanged', handle: onStyleChanged, layer: layer });
 
     this._layers.push(layer);
     layer.addToLeafletMap(this._leafletMap);

From 81c8fa61b9e48e95f74896fd33b42ba50ca53d61 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Wed, 1 Mar 2017 00:54:23 -0500
Subject: [PATCH 134/150] add rendercomplete

---
 .../choropleth/public/choropleth_controller.js           | 7 ++++---
 src/core_plugins/choropleth/public/choropleth_layer.js   | 9 +++++++--
 src/core_plugins/choropleth/public/vector_maps.js        | 2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index e8b0e0d3d4771..f73b49a0866d4 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -36,7 +36,6 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
 
   const kibanaMapReady = makeKibanaMap();
   $scope.$watch('esResponse', async function (response) {
-
     kibanaMapReady.then(() => {
       const metricsAgg = _.first($scope.vis.aggs.bySchemaName.metric);
       const termAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName.segment, 'id'));
@@ -68,6 +67,7 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       }
 
       kibanaMap.resize();
+      $element.trigger('renderComplete');
     });
   });
 
@@ -83,15 +83,16 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
 
       kibanaMap.setShowTooltip(true);
       kibanaMap.resize();
+      $element.trigger('renderComplete');
     });
   });
 
 
   //todo: switch with ResizeChecker
   $scope.$watch(getContainerSize, _.debounce(() => {
-    kibanaMapReady.then(()=> {
+    if (kibanaMap) {
       kibanaMap.resize();
-    });
+    }
   }, 500, { trailing: true }), true);
 
   function getContainerSize() {
diff --git a/src/core_plugins/choropleth/public/choropleth_layer.js b/src/core_plugins/choropleth/public/choropleth_layer.js
index 6b93b131a8bad..27227db8bd1c1 100644
--- a/src/core_plugins/choropleth/public/choropleth_layer.js
+++ b/src/core_plugins/choropleth/public/choropleth_layer.js
@@ -123,7 +123,7 @@ export default class ChoroplethLayer extends KibanaMapLayer {
 
 
     if (!this._legendColors || !this._legendQuantizer || !this._metricsAgg) {
-      return '';
+      return;
     }
 
     const titleText = this._metricsAgg.makeLabel();
@@ -223,6 +223,11 @@ function getLegendColors(colorRamp) {
 }
 
 function getColor(colorRamp, i) {
+
+  if (!colorRamp[i]) {
+    return getColor();
+  }
+
   const color = colorRamp[i][1];
   const red = Math.floor(color[0] * 255);
   const green = Math.floor(color[1] * 255);
@@ -233,7 +238,7 @@ function getColor(colorRamp, i) {
 
 function getChoroplethColor(value, min, max, colorRamp) {
   if (min === max) {
-    return colorRamp[colorRamp.length - 1];
+    return getColor(colorRamp, colorRamp.length - 1);
   }
   const fraction = (value - min) / (max - min);
   const index = Math.round(colorRamp.length * fraction) - 1;
diff --git a/src/core_plugins/choropleth/public/vector_maps.js b/src/core_plugins/choropleth/public/vector_maps.js
index f01675bc2b860..b969a2e58e61d 100644
--- a/src/core_plugins/choropleth/public/vector_maps.js
+++ b/src/core_plugins/choropleth/public/vector_maps.js
@@ -4,7 +4,7 @@ const vectorMaps = {
     fields: ['iso']
   },
   'States': {
-    url: '../plugins/choropleth/data/us_states.geojson',
+    url: '../plugins/choropleth/data/state.geojson',
     fields: ['NAME']
   }
 };

From 9987cd80f57f2bbd1ad285ebed70d84d8f53f94a Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Wed, 1 Mar 2017 10:31:33 -0500
Subject: [PATCH 135/150] fix package json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 53c02c590e92b..cc319058a07ff 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "dashboarding"
   ],
   "private": false,
-  "version": "6.0.0",
+  "version": "6.0.0-alpha1",
   "build": {
     "number": 8467,
     "sha": "6cb7fec4e154faa0a4a3fee4b33dfef91b9870d9"

From c89639fb62c6268f6af33c82c81bc94d001935d8 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 3 Mar 2017 11:10:06 -0500
Subject: [PATCH 136/150] make 0 the default

---
 src/server/config/schema.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server/config/schema.js b/src/server/config/schema.js
index 6d9d1c81f2346..f3145ffcc0680 100644
--- a/src/server/config/schema.js
+++ b/src/server/config/schema.js
@@ -159,7 +159,7 @@ module.exports = () => Joi.object({
     url: Joi.string(),
     options: Joi.object({
       attribution: Joi.string(),
-      minZoom: Joi.number().min(1, 'Must not be less than 1').default(1),
+      minZoom: Joi.number().min(0, 'Must be 0 or higher').default(0),
       maxZoom: Joi.number().default(10),
       tileSize: Joi.number(),
       subdomains: Joi.array().items(Joi.string()).single(),

From 7e5a77ea196f4838d3443f6165b716603389cd11 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 3 Mar 2017 14:33:31 -0500
Subject: [PATCH 137/150] disable multi tile-map support

---
 src/core_plugins/kbn_vislib_vis_types/public/tile_map.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
index ba175c52087a6..65563de108339 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
@@ -74,15 +74,6 @@ export default function TileMapVisType(Private, getAppState, courier, config) {
         aggFilter: 'geohash_grid',
         min: 1,
         max: 1
-      },
-      {
-        group: 'buckets',
-        name: 'split',
-        title: 'Split Chart',
-        deprecate: true,
-        deprecateMessage: 'The Split Chart feature for Tile Maps has been deprecated.',
-        min: 0,
-        max: 1
       }
     ])
   });

From 19d624357dd47ece3fb7cc457d0ba0e42af0423b Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 3 Mar 2017 15:37:07 -0500
Subject: [PATCH 138/150] use the ResizeChecker

---
 .../public/choropleth_controller.js           | 28 ++++++++-----------
 src/server/config/schema.js                   |  7 ++++-
 src/ui/public/vis_maps/kibana_map.js          |  2 --
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index f73b49a0866d4..0f0fb64b02e92 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -6,15 +6,25 @@ import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_cli
 import ChoroplethLayer from './choropleth_layer';
 import colorramps from 'ui/vislib/components/color/colormaps';
 import AggResponsePointSeriesTooltipFormatterProvider from './tooltip_formatter';
+import VislibLibResizeCheckerProvider from 'ui/vislib/lib/resize_checker';
 
 const module = uiModules.get('kibana/choropleth', ['kibana']);
 module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings) {
 
   const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
-  const containerNode = $element[0];
   const tooltipFormatter = Private(AggResponsePointSeriesTooltipFormatterProvider);
+  const ResizeChecker = Private(VislibLibResizeCheckerProvider);
+
+
+  const resizeChecker = new ResizeChecker($element);
+  const containerNode = $element[0];
 
   let kibanaMap = null;
+  resizeChecker.on('resize', () => {
+    if (kibanaMap) {
+      kibanaMap.resize();
+    }
+  });
   let choroplethLayer = null;
 
   async function makeKibanaMap() {
@@ -57,15 +67,12 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       }
       updateChoroplethLayer(options.selectedLayer.url);
       choroplethLayer.setMetrics(results, metricsAgg);
-
-
       if ($scope.vis.aggs.bySchemaName.segment[0]) {
         const fieldName = $scope.vis.aggs.bySchemaName.segment[0].params.field.name;
         choroplethLayer.setTooltipFormatter(tooltipFormatter, metricsAgg, fieldName);
       } else {
         choroplethLayer.setTooltipFormatter(tooltipFormatter, metricsAgg, null);
       }
-
       kibanaMap.resize();
       $element.trigger('renderComplete');
     });
@@ -87,19 +94,6 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     });
   });
 
-
-  //todo: switch with ResizeChecker
-  $scope.$watch(getContainerSize, _.debounce(() => {
-    if (kibanaMap) {
-      kibanaMap.resize();
-    }
-  }, 500, { trailing: true }), true);
-
-  function getContainerSize() {
-    return { width: $element.width(), height: $element.height() };
-  }
-
-
   function updateChoroplethLayer(url) {
 
     if (choroplethLayer && choroplethLayer.equalsGeoJsonUrl(url)) {
diff --git a/src/server/config/schema.js b/src/server/config/schema.js
index f3145ffcc0680..69ebfc4aaae79 100644
--- a/src/server/config/schema.js
+++ b/src/server/config/schema.js
@@ -146,10 +146,15 @@ module.exports = () => Joi.object({
     }),
     profile: Joi.boolean().default(false)
   }).default(),
-
   status: Joi.object({
     allowAnonymous: Joi.boolean().default(false)
   }).default(),
+  vectormap: Joi.object({
+    layers: Joi.array().items(Joi.object({
+      url: Joi.string(),
+      type: Joi.string()
+    }))
+  }),
   tilemap: Joi.object({
     manifestServiceUrl: Joi.when('$dev', {
       is: true,
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index beccac3da47a8..d3dfd809e82a5 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -71,8 +71,6 @@ class KibanaMap extends EventEmitter {
   constructor(containerNode, options) {
 
     super();
-
-
     this._containerNode = containerNode;
     this._leafletBaseLayer = null;
     this._baseLayerSettings = null;

From 76aff13c0f30b867f890c22ea6f2270b10358193 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 5 Mar 2017 01:28:10 -0500
Subject: [PATCH 139/150] use yml for layer config

---
 .../public/choropleth_controller.js           | 30 +++++++++++--------
 .../choropleth/public/choropleth_layer.js     | 11 +++++++
 .../choropleth/public/choropleth_vis.js       | 11 +++----
 .../public/choropleth_vis_params.html         |  6 ++--
 .../public/choropleth_vis_params.js           |  4 +++
 .../choropleth/public/vector_maps.js          | 12 --------
 src/core_plugins/kibana/index.js              |  1 +
 src/server/config/schema.js                   |  7 ++++-
 8 files changed, 50 insertions(+), 32 deletions(-)
 delete mode 100644 src/core_plugins/choropleth/public/vector_maps.js

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index 0f0fb64b02e92..2f6c7aa98adc9 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -9,13 +9,12 @@ import AggResponsePointSeriesTooltipFormatterProvider from './tooltip_formatter'
 import VislibLibResizeCheckerProvider from 'ui/vislib/lib/resize_checker';
 
 const module = uiModules.get('kibana/choropleth', ['kibana']);
-module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings) {
+module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings, vectormapsConfig, config) {
 
   const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
   const tooltipFormatter = Private(AggResponsePointSeriesTooltipFormatterProvider);
   const ResizeChecker = Private(VislibLibResizeCheckerProvider);
 
-
   const resizeChecker = new ResizeChecker($element);
   const containerNode = $element[0];
 
@@ -46,6 +45,7 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
 
   const kibanaMapReady = makeKibanaMap();
   $scope.$watch('esResponse', async function (response) {
+
     kibanaMapReady.then(() => {
       const metricsAgg = _.first($scope.vis.aggs.bySchemaName.metric);
       const termAggId = _.first(_.pluck($scope.vis.aggs.bySchemaName.segment, 'id'));
@@ -61,11 +61,11 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
           };
         });
       }
-      const options = $scope.vis.params;
-      if (!options.selectedJoinField) {
-        options.selectedJoinField = options.selectedLayer.fields[0];
+
+      if (!$scope.vis.params.selectedJoinField) {
+        $scope.vis.params.selectedJoinField = $scope.vis.params.selectedLayer.fields[0];
       }
-      updateChoroplethLayer(options.selectedLayer.url);
+      updateChoroplethLayer($scope.vis.params.selectedLayer.url);
       choroplethLayer.setMetrics(results, metricsAgg);
       if ($scope.vis.aggs.bySchemaName.segment[0]) {
         const fieldName = $scope.vis.aggs.bySchemaName.segment[0].params.field.name;
@@ -78,15 +78,15 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     });
   });
 
-  $scope.$watch('vis.params', (options) => {
+  $scope.$watch('vis.params', (visParams) => {
     kibanaMapReady.then(() => {
-      if (!options.selectedJoinField) {
-        options.selectedJoinField = options.selectedLayer.fields[0];
+      if (!visParams.selectedJoinField) {
+        visParams.selectedJoinField = visParams.selectedLayer.fields[0];
       }
 
-      updateChoroplethLayer(options.selectedLayer.url);
-      choroplethLayer.setJoinField(options.selectedJoinField);
-      choroplethLayer.setColorRamp(colorramps[options.colorSchema]);
+      updateChoroplethLayer(visParams.selectedLayer.url);
+      choroplethLayer.setJoinField(visParams.selectedJoinField.name);
+      choroplethLayer.setColorRamp(colorramps[visParams.colorSchema]);
 
       kibanaMap.setShowTooltip(true);
       kibanaMap.resize();
@@ -100,7 +100,13 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       return;
     }
     kibanaMap.removeLayer(choroplethLayer);
+
+    const previousMetrics = choroplethLayer ? choroplethLayer.getMetrics() : null;
+    const previousMetricsAgg = choroplethLayer ? choroplethLayer.getMetricsAgg() : null;
     choroplethLayer = new ChoroplethLayer(url);
+    if (previousMetrics && previousMetricsAgg) {
+      choroplethLayer.setMetrics(previousMetrics, previousMetricsAgg);
+    }
     choroplethLayer.on('select', function (event) {
       const appState = getAppState();
       const clickHandler = filterBarClickHandler(appState);
diff --git a/src/core_plugins/choropleth/public/choropleth_layer.js b/src/core_plugins/choropleth/public/choropleth_layer.js
index 27227db8bd1c1..edfe2465d5d3d 100644
--- a/src/core_plugins/choropleth/public/choropleth_layer.js
+++ b/src/core_plugins/choropleth/public/choropleth_layer.js
@@ -78,6 +78,17 @@ export default class ChoroplethLayer extends KibanaMapLayer {
     this.emit('styleChanged');
   }
 
+  getMetrics() {
+    return this._metrics;
+  }
+
+  getMetricsAgg() {
+    return this._metricsAgg;
+  }
+
+  getUrl() {
+    return this._geojsonUrl;
+  }
 
   setTooltipFormatter(tooltipFormatter, metricsAgg, fieldName) {
     this._tooltipFormatter = (geojsonFeature) => {
diff --git a/src/core_plugins/choropleth/public/choropleth_vis.js b/src/core_plugins/choropleth/public/choropleth_vis.js
index 5d2363ab3392e..9c15f1599d087 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis.js
+++ b/src/core_plugins/choropleth/public/choropleth_vis.js
@@ -6,12 +6,13 @@ import VisSchemasProvider from 'ui/vis/schemas';
 import choroplethTemplate from 'plugins/choropleth/choropleth_controller.html';
 import visTypes from 'ui/registry/vis_types';
 import colorramps from 'ui/vislib/components/color/colormaps';
-import vectorMaps from 'plugins/choropleth/vector_maps';
 
-visTypes.register(function ChoroplethProvider(Private) {
+visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
+
   const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
+
   return new TemplateVisType({
     name: 'choropleth',
     title: 'Vector Map',
@@ -22,11 +23,11 @@ visTypes.register(function ChoroplethProvider(Private) {
     params: {
       defaults: {
         colorSchema: 'Yellow to Red',
-        selectedLayer: vectorMaps.Countries,
-        selectedJoinField: vectorMaps.Countries.fields[0]
+        selectedLayer: vectormapsConfig.layers[0],
+        selectedJoinField: vectormapsConfig.layers[0].fields[0]
       },
       colorSchemas: Object.keys(colorramps),
-      vectorMaps: vectorMaps,
+      vectormap: vectormapsConfig,
       editor: '<choropleth-vis-params></choropleth-vis-params>'
     },
     schemas: new Schemas([
diff --git a/src/core_plugins/choropleth/public/choropleth_vis_params.html b/src/core_plugins/choropleth/public/choropleth_vis_params.html
index b70b6de0c60aa..10f53c9cd634f 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis_params.html
+++ b/src/core_plugins/choropleth/public/choropleth_vis_params.html
@@ -21,7 +21,9 @@
         id="vectorMap"
         class="kuiSelect kuiSideBarSelect"
         ng-model="vis.params.selectedLayer"
-        ng-options="layer for (layer, meta) in vis.type.params.vectorMaps"
+        ng-options="layer.name for layer in vis.type.params.vectormap.layers"
+        ng-change="onLayerChange()"
+        ng-init="vis.params.selectedLayer=vis.type.params.vectormap.layers[0]"
       ></select>
     </div>
   </div>
@@ -33,7 +35,7 @@
     <div class="kuiSideBarFormRow__control">
       <select id="joinField"
               ng-model="vis.params.selectedJoinField"
-              ng-options="field for field in vis.params.selectedLayer.fields"
+              ng-options="field.description for field in vis.params.selectedLayer.fields"
               ng-init="vis.params.selectedJoinField=vis.params.selectedLayer.fields[0]"
       >
         <option value=''>Select</option></select>
diff --git a/src/core_plugins/choropleth/public/choropleth_vis_params.js b/src/core_plugins/choropleth/public/choropleth_vis_params.js
index 2495e89cccfa9..b696266a3c798 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis_params.js
+++ b/src/core_plugins/choropleth/public/choropleth_vis_params.js
@@ -8,6 +8,10 @@ uiModules.get('kibana/choropleth')
       template: choroplethVisParamsTemplate,
       link: function ($scope, $element) {
 
+        $scope.onLayerChange = function () {
+          $scope.vis.params.selectedJoinField = $scope.vis.params.selectedLayer.fields[0];
+        };
+
       }
     };
   });
diff --git a/src/core_plugins/choropleth/public/vector_maps.js b/src/core_plugins/choropleth/public/vector_maps.js
deleted file mode 100644
index b969a2e58e61d..0000000000000
--- a/src/core_plugins/choropleth/public/vector_maps.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const vectorMaps = {
-  'Countries': {
-    url: '../plugins/choropleth/data/world_countries.geojson',
-    fields: ['iso']
-  },
-  'States': {
-    url: '../plugins/choropleth/data/state.geojson',
-    fields: ['NAME']
-  }
-};
-
-export default vectorMaps;
diff --git a/src/core_plugins/kibana/index.js b/src/core_plugins/kibana/index.js
index 7e82863e662c7..4fd84b1ee2db8 100644
--- a/src/core_plugins/kibana/index.js
+++ b/src/core_plugins/kibana/index.js
@@ -56,6 +56,7 @@ module.exports = function (kibana) {
 
           return {
             kbnDefaultAppId: serverConfig.get('kibana.defaultAppId'),
+            vectormapsConfig: serverConfig.get('vectormap'),
             tilemapsConfig: {
               deprecated: {
                 isOverridden: isOverridden,
diff --git a/src/server/config/schema.js b/src/server/config/schema.js
index 69ebfc4aaae79..6c72da5ca7886 100644
--- a/src/server/config/schema.js
+++ b/src/server/config/schema.js
@@ -152,7 +152,12 @@ module.exports = () => Joi.object({
   vectormap: Joi.object({
     layers: Joi.array().items(Joi.object({
       url: Joi.string(),
-      type: Joi.string()
+      type: Joi.string(),
+      name: Joi.string(),
+      fields: Joi.array().items(Joi.object({
+        name: Joi.string(),
+        description: Joi.string()
+      }))
     }))
   }),
   tilemap: Joi.object({

From 0375354f9d482ed49e2bcaef6b40052e54da4547 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 5 Mar 2017 01:53:07 -0500
Subject: [PATCH 140/150] use default config

---
 .../choropleth/public/choropleth_vis.js       | 31 +++++++++++++++++--
 .../public/choropleth_vis_params.html         |  4 +--
 src/core_plugins/kibana/index.js              |  4 ++-
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_vis.js b/src/core_plugins/choropleth/public/choropleth_vis.js
index 9c15f1599d087..e473c07ca0555 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis.js
+++ b/src/core_plugins/choropleth/public/choropleth_vis.js
@@ -13,6 +13,31 @@ visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
   const Schemas = Private(VisSchemasProvider);
 
 
+  const defaultLayers = [
+    {
+      type: 'default',
+      url: '../plugins/choropleth/data/world_countries.geojson',
+      name: 'World Countries',
+      fields: [
+        {
+          name: 'iso',
+          description: '2-digit country abbreviation'
+        }]
+    },
+    {
+      type: 'default',
+      url: '../plugins/choropleth/data/state.geojson',
+      name: 'US States',
+      fields: [{
+        name: 'NAME',
+        description: 'State name'
+      }]
+    }
+  ];
+
+  const vectorLayers = vectormapsConfig.layers.concat(defaultLayers);
+
+
   return new TemplateVisType({
     name: 'choropleth',
     title: 'Vector Map',
@@ -23,11 +48,11 @@ visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
     params: {
       defaults: {
         colorSchema: 'Yellow to Red',
-        selectedLayer: vectormapsConfig.layers[0],
-        selectedJoinField: vectormapsConfig.layers[0].fields[0]
+        selectedLayer: vectorLayers[0],
+        selectedJoinField: vectorLayers[0].fields[0]
       },
       colorSchemas: Object.keys(colorramps),
-      vectormap: vectormapsConfig,
+      vectormap: vectorLayers,
       editor: '<choropleth-vis-params></choropleth-vis-params>'
     },
     schemas: new Schemas([
diff --git a/src/core_plugins/choropleth/public/choropleth_vis_params.html b/src/core_plugins/choropleth/public/choropleth_vis_params.html
index 10f53c9cd634f..17183a66d1f1f 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis_params.html
+++ b/src/core_plugins/choropleth/public/choropleth_vis_params.html
@@ -21,9 +21,9 @@
         id="vectorMap"
         class="kuiSelect kuiSideBarSelect"
         ng-model="vis.params.selectedLayer"
-        ng-options="layer.name for layer in vis.type.params.vectormap.layers"
+        ng-options="layer.name for layer in vis.type.params.vectormap"
         ng-change="onLayerChange()"
-        ng-init="vis.params.selectedLayer=vis.type.params.vectormap.layers[0]"
+        ng-init="vis.params.selectedLayer=vis.type.params.vectormap[0]"
       ></select>
     </div>
   </div>
diff --git a/src/core_plugins/kibana/index.js b/src/core_plugins/kibana/index.js
index 4fd84b1ee2db8..1329abfd91910 100644
--- a/src/core_plugins/kibana/index.js
+++ b/src/core_plugins/kibana/index.js
@@ -54,9 +54,11 @@ module.exports = function (kibana) {
           const isOverridden = typeof configuredUrl === 'string' && configuredUrl !== '';
           const tilemapConfig = serverConfig.get('tilemap');
 
+          const vectormapsConfig = (!serverConfig.get('vectormap')) ? serverConfig.get('vectormap') : {layers: []};
+
           return {
             kbnDefaultAppId: serverConfig.get('kibana.defaultAppId'),
-            vectormapsConfig: serverConfig.get('vectormap'),
+            vectormapsConfig: vectormapsConfig,
             tilemapsConfig: {
               deprecated: {
                 isOverridden: isOverridden,

From 8ff07582da12d28b020eead0b96f3586091d95ac Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 5 Mar 2017 02:08:49 -0500
Subject: [PATCH 141/150] persist ui state

---
 .../public/choropleth_controller.js           | 47 +++++++++++++++++--
 src/core_plugins/kibana/index.js              |  2 +-
 src/ui/public/vis_maps/maps_renderbot.js      |  2 +
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index 2f6c7aa98adc9..b67259c3387ee 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -36,11 +36,14 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     kibanaMap = new KibanaMap(containerNode, minMaxZoom);
     const url = tilemapSettings.getUrl();
     const options = tilemapSettings.getTMSOptions();
-    kibanaMap.setBaseLayer({
-      baseLayerType: 'tms',
-      options: { url, ...options }
-    });
+    kibanaMap.setBaseLayer({ baseLayerType: 'tms', options: { url, ...options } });
     kibanaMap.addLegendControl();
+    kibanaMap.addFitControl();
+
+
+    kibanaMap.on('moveend', () => {
+      persistUIStateFromMap();
+    });
   }
 
   const kibanaMapReady = makeKibanaMap();
@@ -73,6 +76,7 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       } else {
         choroplethLayer.setTooltipFormatter(tooltipFormatter, metricsAgg, null);
       }
+      useUIState();
       kibanaMap.resize();
       $element.trigger('renderComplete');
     });
@@ -87,8 +91,8 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       updateChoroplethLayer(visParams.selectedLayer.url);
       choroplethLayer.setJoinField(visParams.selectedJoinField.name);
       choroplethLayer.setColorRamp(colorramps[visParams.colorSchema]);
-
       kibanaMap.setShowTooltip(true);
+      useUIState();
       kibanaMap.resize();
       $element.trigger('renderComplete');
     });
@@ -116,6 +120,39 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     });
     kibanaMap.addLayer(choroplethLayer);
   }
+
+
+  //todo: refactor out commonalities with maps_renderbot
+  async function persistUIStateFromMap() {
+    await kibanaMapReady;
+    const uiState = $scope.vis.getUiState();
+    const zoomFromUIState = parseInt(uiState.get('mapZoom'));
+    const centerFromUIState = uiState.get('mapCenter');
+    if (isNaN(zoomFromUIState) || kibanaMap.getZoomLevel() !== zoomFromUIState) {
+      uiState.set('mapZoom', kibanaMap.getZoomLevel());
+    }
+    const centerFromMap = kibanaMap.getCenter();
+    if (!centerFromUIState || centerFromMap.lon !== centerFromUIState[1] || centerFromMap.lat !== centerFromUIState[0]) {
+      uiState.set('mapCenter', [centerFromMap.lat, centerFromMap.lon]);
+    }
+  }
+
+  async function useUIState() {
+    await kibanaMapReady;
+    const uiState = $scope.vis.getUiState();
+
+    const zoomFromUiState = parseInt(uiState.get('mapZoom'));
+    const centerFromUIState = uiState.get('mapCenter');
+    if (!isNaN(zoomFromUiState)) {
+      kibanaMap.setZoomLevel(zoomFromUiState);
+    }
+    if (centerFromUIState) {
+      kibanaMap.setCenter(centerFromUIState[0], centerFromUIState[1]);
+    }
+  }
+
+
+
 });
 
 
diff --git a/src/core_plugins/kibana/index.js b/src/core_plugins/kibana/index.js
index 1329abfd91910..ec2286a415a32 100644
--- a/src/core_plugins/kibana/index.js
+++ b/src/core_plugins/kibana/index.js
@@ -54,7 +54,7 @@ module.exports = function (kibana) {
           const isOverridden = typeof configuredUrl === 'string' && configuredUrl !== '';
           const tilemapConfig = serverConfig.get('tilemap');
 
-          const vectormapsConfig = (!serverConfig.get('vectormap')) ? serverConfig.get('vectormap') : {layers: []};
+          const vectormapsConfig = (!serverConfig.get('vectormap')) ? serverConfig.get('vectormap') : { layers: [] };
 
           return {
             kbnDefaultAppId: serverConfig.get('kibana.defaultAppId'),
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 491e4df498ede..6def9e0a69a44 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -84,6 +84,8 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
           this._doRenderComplete();
         }
       });
+
+
       this._kibanaMap.on('drawCreated:rectangle', event => {
         addSpatialFilter(_.get(this._chartData, 'geohashGridAgg'), 'geo_bounding_box', event.bounds);
       });

From 759a36086be4696170dc82aad7a3ae001266b2c6 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 5 Mar 2017 02:36:01 -0500
Subject: [PATCH 142/150] add default controls

---
 .../choropleth/public/choropleth_controller.js     | 13 +++++++------
 .../choropleth/public/choropleth_layer.js          |  8 --------
 .../choropleth/public/choropleth_vis.js            | 14 ++++++++++++++
 .../choropleth/public/choropleth_vis_params.html   |  6 +++---
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index b67259c3387ee..145c9aaf55c5d 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -1,4 +1,5 @@
 import uiModules from 'ui/modules';
+import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';
 import _ from 'lodash';
 import AggConfigResult from 'ui/vis/agg_config_result';
 import KibanaMap from 'ui/vis_maps/kibana_map';
@@ -39,11 +40,7 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
     kibanaMap.setBaseLayer({ baseLayerType: 'tms', options: { url, ...options } });
     kibanaMap.addLegendControl();
     kibanaMap.addFitControl();
-
-
-    kibanaMap.on('moveend', () => {
-      persistUIStateFromMap();
-    });
+    kibanaMap.on('moveend', () =>persistUIStateFromMap());
   }
 
   const kibanaMapReady = makeKibanaMap();
@@ -76,6 +73,7 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       } else {
         choroplethLayer.setTooltipFormatter(tooltipFormatter, metricsAgg, null);
       }
+
       useUIState();
       kibanaMap.resize();
       $element.trigger('renderComplete');
@@ -91,7 +89,10 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       updateChoroplethLayer(visParams.selectedLayer.url);
       choroplethLayer.setJoinField(visParams.selectedJoinField.name);
       choroplethLayer.setColorRamp(colorramps[visParams.colorSchema]);
-      kibanaMap.setShowTooltip(true);
+
+      kibanaMap.setShowTooltip(visParams.addTooltip);
+      kibanaMap.setLegendPosition(visParams.legendPosition);
+
       useUIState();
       kibanaMap.resize();
       $element.trigger('renderComplete');
diff --git a/src/core_plugins/choropleth/public/choropleth_layer.js b/src/core_plugins/choropleth/public/choropleth_layer.js
index edfe2465d5d3d..570086a6f913d 100644
--- a/src/core_plugins/choropleth/public/choropleth_layer.js
+++ b/src/core_plugins/choropleth/public/choropleth_layer.js
@@ -138,7 +138,6 @@ export default class ChoroplethLayer extends KibanaMapLayer {
     }
 
     const titleText = this._metricsAgg.makeLabel();
-    // const titleText = 'foobar';
     const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
     jqueryDiv.append($title);
 
@@ -212,13 +211,6 @@ function makeChoroplethStyleFunction(data, colorramp, joinField) {
       fillOpacity: 0.7
     };
   };
-  // const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
-  // const legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(colorramp);
-
-  // return {
-  //   styleFunction: styleFunction,
-  //   legendQuantizer: legendQuantizer
-  // };
 }
 
 
diff --git a/src/core_plugins/choropleth/public/choropleth_vis.js b/src/core_plugins/choropleth/public/choropleth_vis.js
index e473c07ca0555..be287d4cef37f 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis.js
+++ b/src/core_plugins/choropleth/public/choropleth_vis.js
@@ -47,10 +47,24 @@ visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
     template: choroplethTemplate,
     params: {
       defaults: {
+        legendPosition: 'bottomright',
         colorSchema: 'Yellow to Red',
         selectedLayer: vectorLayers[0],
         selectedJoinField: vectorLayers[0].fields[0]
       },
+      legendPositions: [{
+        value: 'bottomleft',
+        text: 'bottom left',
+      }, {
+        value: 'bottomright',
+        text: 'bottom right',
+      }, {
+        value: 'topleft',
+        text: 'top left',
+      }, {
+        value: 'topright',
+        text: 'top right',
+      }],
       colorSchemas: Object.keys(colorramps),
       vectormap: vectorLayers,
       editor: '<choropleth-vis-params></choropleth-vis-params>'
diff --git a/src/core_plugins/choropleth/public/choropleth_vis_params.html b/src/core_plugins/choropleth/public/choropleth_vis_params.html
index 17183a66d1f1f..087f23e85643c 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis_params.html
+++ b/src/core_plugins/choropleth/public/choropleth_vis_params.html
@@ -1,4 +1,7 @@
 <div class="form-group">
+
+  <vislib-basic-options></vislib-basic-options>
+
   <div class="kuiSideBarFormRow">
     <label class="kuiSideBarFormRow__label" for="colorSchema">
       Color Schema
@@ -42,7 +45,4 @@
     </div>
   </div>
 
-
-
-
 </div>

From 8b6d7b374bc69a05964ee7a598234c595f0922bf Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 5 Mar 2017 02:53:31 -0500
Subject: [PATCH 143/150] use kui UX

---
 .../public/choropleth_controller.js           |  3 +-
 .../choropleth/public/choropleth_vis.js       |  4 +-
 .../public/choropleth_vis_params.html         | 48 ++++++++++++++-----
 .../kbn_vislib_vis_types/public/tile_map.js   |  2 -
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index 145c9aaf55c5d..0132dd2695a7a 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -1,5 +1,6 @@
 import uiModules from 'ui/modules';
 import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';
+// import 'ui/vis_maps/styles/_tilemap.less';
 import _ from 'lodash';
 import AggConfigResult from 'ui/vis/agg_config_result';
 import KibanaMap from 'ui/vis_maps/kibana_map';
@@ -67,7 +68,7 @@ module.controller('KbnChoroplethController', function ($scope, $element, Private
       }
       updateChoroplethLayer($scope.vis.params.selectedLayer.url);
       choroplethLayer.setMetrics(results, metricsAgg);
-      if ($scope.vis.aggs.bySchemaName.segment[0]) {
+      if ($scope.vis.aggs.bySchemaName.segment && $scope.vis.aggs.bySchemaName.segment[0]) {
         const fieldName = $scope.vis.aggs.bySchemaName.segment[0].params.field.name;
         choroplethLayer.setTooltipFormatter(tooltipFormatter, metricsAgg, fieldName);
       } else {
diff --git a/src/core_plugins/choropleth/public/choropleth_vis.js b/src/core_plugins/choropleth/public/choropleth_vis.js
index be287d4cef37f..2ec2b50be0574 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis.js
+++ b/src/core_plugins/choropleth/public/choropleth_vis.js
@@ -42,12 +42,14 @@ visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
     name: 'choropleth',
     title: 'Vector Map',
     implementsRenderComplete: true,
-    description: 'Show metrics on a thematic map. Darker colors represent higher values.',
+    description: 'Show metrics on a thematic map. Use one of the provide base maps, or add your own. ' +
+    'Darker colors represent higher values.',
     icon: 'fa-globe',
     template: choroplethTemplate,
     params: {
       defaults: {
         legendPosition: 'bottomright',
+        addTooltip: true,
         colorSchema: 'Yellow to Red',
         selectedLayer: vectorLayers[0],
         selectedJoinField: vectorLayers[0].fields[0]
diff --git a/src/core_plugins/choropleth/public/choropleth_vis_params.html b/src/core_plugins/choropleth/public/choropleth_vis_params.html
index 087f23e85643c..a778c2343d394 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis_params.html
+++ b/src/core_plugins/choropleth/public/choropleth_vis_params.html
@@ -1,20 +1,11 @@
 <div class="form-group">
 
-  <vislib-basic-options></vislib-basic-options>
-
-  <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label" for="colorSchema">
-      Color Schema
-    </label>
-    <div class="kuiSideBarFormRow__control">
-      <select
-        id="colorSchema"
-        class="kuiSelect kuiSideBarSelect"
-        ng-model="vis.params.colorSchema"
-        ng-options="mode for mode in vis.type.params.colorSchemas"
-      ></select>
+  <div class="kuiSideBarSectionTitle">
+    <div class="kuiSideBarSectionTitle__text">
+      Layer Settings
     </div>
   </div>
+
   <div class="kuiSideBarFormRow">
     <label class="kuiSideBarFormRow__label" for="vectorMap">
       Vector map
@@ -45,4 +36,35 @@
     </div>
   </div>
 
+  <div class="kuiSideBarSectionTitle">
+    <div class="kuiSideBarSectionTitle__text">
+      Style Settings
+    </div>
+  </div>
+
+  <div class="kuiSideBarFormRow" >
+    <label class="kuiSideBarFormRow__label" for="colorSchema">
+      Color Schema
+    </label>
+    <div class="kuiSideBarFormRow__control">
+      <select
+        id="colorSchema"
+        class="kuiSelect kuiSideBarSelect"
+        ng-model="vis.params.colorSchema"
+        ng-options="mode for mode in vis.type.params.colorSchemas"
+      ></select>
+    </div>
+  </div>
+
+
+  <div class="kuiSideBarSectionTitle">
+    <div class="kuiSideBarSectionTitle__text">
+      Basic Settings
+    </div>
+  </div>
+
+
+  <vislib-basic-options></vislib-basic-options>
+
+
 </div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
index 65563de108339..fa25cac69e2f0 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
@@ -1,9 +1,7 @@
-import _ from 'lodash';
 import supports from 'ui/utils/supports';
 import MapsVisTypeVislibVisTypeProvider from 'ui/vis_maps/maps_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import AggResponseGeoJsonGeoJsonProvider from 'ui/agg_response/geo_json/geo_json';
-import FilterBarPushFilterProvider from 'ui/filter_bar/push_filter';
 import tileMapTemplate from 'plugins/kbn_vislib_vis_types/editors/tile_map.html';
 
 export default function TileMapVisType(Private, getAppState, courier, config) {

From 9b81cdcaf47a5aefda9b8745528c5528a4f72c7a Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 5 Mar 2017 19:40:31 -0500
Subject: [PATCH 144/150] use geocentroid as new default

---
 .../public/choropleth_controller.js           |  1 -
 .../choropleth/public/choropleth_vis.js       |  3 +-
 .../kbn_vislib_vis_types/public/tile_map.js   |  2 +-
 .../public/agg_response/geo_json/geo_json.js  |  4 ++-
 .../agg_response/geo_json/rows_to_features.js | 18 ++++++++--
 src/ui/public/agg_types/agg_params.js         |  3 ++
 src/ui/public/agg_types/buckets/geo_hash.js   |  5 +++
 .../public/agg_types/controls/precision.html  |  9 +++++
 src/ui/public/agg_types/index.js              |  6 +++-
 .../public/agg_types/metrics/geo_centroid.js  | 22 ++++++++++++
 src/ui/public/vis/agg_configs.js              | 36 +++++++++++++++++--
 src/ui/public/vis_maps/geohash_layer.js       |  2 --
 12 files changed, 98 insertions(+), 13 deletions(-)
 create mode 100644 src/ui/public/agg_types/metrics/geo_centroid.js

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index 0132dd2695a7a..7fd050aa88e36 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -1,6 +1,5 @@
 import uiModules from 'ui/modules';
 import 'plugins/kbn_vislib_vis_types/controls/vislib_basic_options';
-// import 'ui/vis_maps/styles/_tilemap.less';
 import _ from 'lodash';
 import AggConfigResult from 'ui/vis/agg_config_result';
 import KibanaMap from 'ui/vis_maps/kibana_map';
diff --git a/src/core_plugins/choropleth/public/choropleth_vis.js b/src/core_plugins/choropleth/public/choropleth_vis.js
index 2ec2b50be0574..76a0a5ae831c1 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis.js
+++ b/src/core_plugins/choropleth/public/choropleth_vis.js
@@ -22,7 +22,8 @@ visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
         {
           name: 'iso',
           description: '2-digit country abbreviation'
-        }]
+        }
+      ]
     },
     {
       type: 'default',
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
index fa25cac69e2f0..5859d2d532112 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
@@ -20,7 +20,7 @@ export default function TileMapVisType(Private, getAppState, courier, config) {
         mapType: 'Scaled Circle Markers',
         isDesaturated: true,
         addTooltip: true,
-        heatMaxZoom: 16,
+        heatMaxZoom: 0,
         heatMinOpacity: 0.1,
         heatRadius: 25,
         heatBlur: 15,
diff --git a/src/ui/public/agg_response/geo_json/geo_json.js b/src/ui/public/agg_response/geo_json/geo_json.js
index 07c02913db364..558ec649c262f 100644
--- a/src/ui/public/agg_response/geo_json/geo_json.js
+++ b/src/ui/public/agg_response/geo_json/geo_json.js
@@ -15,10 +15,12 @@ export default function TileMapConverterFn(Private, timefilter, $compile, $rootS
 
     const geoI = columnIndex('segment');
     const metricI = columnIndex('metric');
+    const centroidI = _.findIndex(table.columns, (col) => col.aggConfig.type.name === 'geo_centroid');
+
     const geoAgg = _.get(table.columns, [geoI, 'aggConfig']);
     const metricAgg = _.get(table.columns, [metricI, 'aggConfig']);
 
-    const features = rowsToFeatures(table, geoI, metricI);
+    const features = rowsToFeatures(table, geoI, metricI, centroidI);
     const values = features.map(function (feature) {
       return feature.properties.value;
     });
diff --git a/src/ui/public/agg_response/geo_json/rows_to_features.js b/src/ui/public/agg_response/geo_json/rows_to_features.js
index 38e2757a50466..437ff928197c4 100644
--- a/src/ui/public/agg_response/geo_json/rows_to_features.js
+++ b/src/ui/public/agg_response/geo_json/rows_to_features.js
@@ -10,7 +10,8 @@ function unwrap(val) {
   return getAcr(val) ? val.value : val;
 }
 
-function convertRowsToFeatures(table, geoI, metricI) {
+function convertRowsToFeatures(table, geoI, metricI, centroidI) {
+
   return _.transform(table.rows, function (features, row) {
     const geohash = unwrap(row[geoI]);
     if (!geohash) return;
@@ -23,6 +24,16 @@ function convertRowsToFeatures(table, geoI, metricI) {
       location.longitude[2]
     ];
 
+    //courtsey of @JacobBrandt: https://github.com/elastic/kibana/pull/9676/files#diff-c7c9f237e673ff486654f6cc6caa89f6
+    let point = centerLatLng;
+    const centroid = unwrap(row[centroidI]);
+    if (centroid) {
+      point = [
+        centroid.lat,
+        centroid.lon
+      ];
+    }
+
     // order is nw, ne, se, sw
     const rectangle = [
       [location.latitude[0], location.longitude[0]],
@@ -37,14 +48,15 @@ function convertRowsToFeatures(table, geoI, metricI) {
       type: 'Feature',
       geometry: {
         type: 'Point',
-        coordinates: centerLatLng.slice(0).reverse()
+        coordinates: point.slice(0).reverse()
       },
       properties: {
         geohash: geohash,
         value: unwrap(row[metricI]),
         aggConfigResult: getAcr(row[metricI]),
         center: centerLatLng,
-        rectangle: rectangle
+        rectangle: rectangle,
+        centroid: centroid
       }
     });
   }, []);
diff --git a/src/ui/public/agg_types/agg_params.js b/src/ui/public/agg_types/agg_params.js
index 251a0e9d64e5b..aa656b5cd39dd 100644
--- a/src/ui/public/agg_types/agg_params.js
+++ b/src/ui/public/agg_types/agg_params.js
@@ -10,6 +10,9 @@ import AggTypesParamTypesBaseProvider from 'ui/agg_types/param_types/base';
 export default function AggParamsFactory(Private) {
 
 
+  // const GeoCentroidAggregation = Private(AggTypesMetricsGeoCentroidProvider);
+  // console.log(GeoCentroidAggregation);
+
   const paramTypeMap = {
     field: Private(AggTypesParamTypesFieldProvider),
     optioned: Private(AggTypesParamTypesOptionedProvider),
diff --git a/src/ui/public/agg_types/buckets/geo_hash.js b/src/ui/public/agg_types/buckets/geo_hash.js
index 3b1327551a72b..1c1261dffcab6 100644
--- a/src/ui/public/agg_types/buckets/geo_hash.js
+++ b/src/ui/public/agg_types/buckets/geo_hash.js
@@ -54,6 +54,11 @@ export default function GeoHashAggDefinition(Private, config) {
         default: true,
         write: _.noop
       },
+      {
+        name: 'useGeocentroid',
+        default: true,
+        write: _.noop
+      },
       {
         name: 'mapZoom',
         write: _.noop
diff --git a/src/ui/public/agg_types/controls/precision.html b/src/ui/public/agg_types/controls/precision.html
index c72fef8a85b9f..65767ce25eaa5 100644
--- a/src/ui/public/agg_types/controls/precision.html
+++ b/src/ui/public/agg_types/controls/precision.html
@@ -27,3 +27,12 @@
   </label>
 </div>
 
+<div class="vis-option-item">
+  <label>
+    <input type="checkbox"
+           name="useGeocentroid"
+           ng-model="agg.params.useGeocentroid">
+    Center markers at the center of the documents
+  </label>
+</div>
+
diff --git a/src/ui/public/agg_types/index.js b/src/ui/public/agg_types/index.js
index da5a5a6c94521..bdb8421f0d2a8 100644
--- a/src/ui/public/agg_types/index.js
+++ b/src/ui/public/agg_types/index.js
@@ -10,6 +10,7 @@ import AggTypesMetricsTopHitProvider from 'ui/agg_types/metrics/top_hit';
 import AggTypesMetricsStdDeviationProvider from 'ui/agg_types/metrics/std_deviation';
 import AggTypesMetricsCardinalityProvider from 'ui/agg_types/metrics/cardinality';
 import AggTypesMetricsPercentilesProvider from 'ui/agg_types/metrics/percentiles';
+import AggTypesMetricsGeoCentroidProvider from 'ui/agg_types/metrics/geo_centroid';
 import AggTypesMetricsPercentileRanksProvider from 'ui/agg_types/metrics/percentile_ranks';
 import AggTypesMetricsDerivativeProvider from 'ui/agg_types/metrics/derivative';
 import AggTypesMetricsCumulativeSumProvider from 'ui/agg_types/metrics/cumulative_sum';
@@ -28,6 +29,8 @@ import AggTypesMetricsBucketSumProvider from 'ui/agg_types/metrics/bucket_sum';
 import AggTypesMetricsBucketAvgProvider from 'ui/agg_types/metrics/bucket_avg';
 import AggTypesMetricsBucketMinProvider from 'ui/agg_types/metrics/bucket_min';
 import AggTypesMetricsBucketMaxProvider from 'ui/agg_types/metrics/bucket_max';
+
+
 export default function AggTypeService(Private) {
 
   const aggs = {
@@ -51,6 +54,7 @@ export default function AggTypeService(Private) {
       Private(AggTypesMetricsBucketSumProvider),
       Private(AggTypesMetricsBucketMinProvider),
       Private(AggTypesMetricsBucketMaxProvider),
+      Private(AggTypesMetricsGeoCentroidProvider)
     ],
     buckets: [
       Private(AggTypesBucketsDateHistogramProvider),
@@ -61,7 +65,7 @@ export default function AggTypeService(Private) {
       Private(AggTypesBucketsTermsProvider),
       Private(AggTypesBucketsFiltersProvider),
       Private(AggTypesBucketsSignificantTermsProvider),
-      Private(AggTypesBucketsGeoHashProvider)
+      Private(AggTypesBucketsGeoHashProvider),
     ]
   };
 
diff --git a/src/ui/public/agg_types/metrics/geo_centroid.js b/src/ui/public/agg_types/metrics/geo_centroid.js
new file mode 100644
index 0000000000000..b66635acd67c3
--- /dev/null
+++ b/src/ui/public/agg_types/metrics/geo_centroid.js
@@ -0,0 +1,22 @@
+import AggTypesMetricsMetricAggTypeProvider from 'ui/agg_types/metrics/metric_agg_type';
+
+export default function AggTypeMetricGeoCentroidProvider(Private) {
+  const MetricAggType = Private(AggTypesMetricsMetricAggTypeProvider);
+
+  return new MetricAggType({
+    name: 'geo_centroid',
+    title: 'Geo Centroid',
+    makeLabel: function (aggConfig) {
+      return 'Geo Centroid';
+    },
+    params: [
+      {
+        name: 'field',
+        filterFieldTypes: 'geo_point'
+      }
+    ],
+    getValue: function (agg, bucket) {
+      return bucket[agg.id] && bucket[agg.id].location;
+    }
+  });
+}
diff --git a/src/ui/public/vis/agg_configs.js b/src/ui/public/vis/agg_configs.js
index 3099a243d0feb..e5c5e943dbd0a 100644
--- a/src/ui/public/vis/agg_configs.js
+++ b/src/ui/public/vis/agg_configs.js
@@ -108,7 +108,6 @@ export default function AggConfigsFactory(Private) {
       })
       .value();
     }
-
     this.getRequestAggs()
     .filter(function (config) {
       return !config.type.hasNoDsl;
@@ -145,14 +144,45 @@ export default function AggConfigsFactory(Private) {
     });
 
     removeParentAggs(dslTopLvl);
-
     return dslTopLvl;
   };
 
   AggConfigs.prototype.getRequestAggs = function () {
-    return _.sortBy(this, function (agg) {
+
+
+    const aggregations = _.sortBy(this, function (agg) {
       return agg.schema.group === 'metrics' ? 1 : 0;
     });
+
+
+    let shouldAddGeocentroid = false;
+    let centroidField = null;
+    aggregations.forEach(function (config) {
+      if (config.type.name === 'geohash_grid' && config.params.useGeocentroid === true) {
+        shouldAddGeocentroid = true;
+        centroidField = config.getField();
+      }
+    });
+
+    if (shouldAddGeocentroid) {
+      const geocentroid = AggConfig.aggTypes.find(aggType => aggType.name === 'geo_centroid');
+      const geocentroidMetric = new AggConfig(this.vis, {
+        type: 'geo_centroid',
+        enabled:true,
+        params: {
+          field: centroidField
+        },
+        schema: 'metric'
+      });
+
+      aggregations.push(geocentroidMetric);
+    }
+    // console.log('arg', arf);
+
+    //add
+
+    return aggregations;
+
   };
 
   /**
diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 8f0b029b1b993..93a68754b9482 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -537,8 +537,6 @@ function makeStyleFunction(min, max, legendColors, quantizeDomain) {
 function dataToHeatArray(max, heatNormalizeData, featureCollection) {
 
   return featureCollection.features.map((feature) => {
-    // const lat = feature.properties.center[0];
-    // const lng = feature.properties.center[1];
     const lat = feature.geometry.coordinates[1];
     const lng = feature.geometry.coordinates[0];
     let heatIntensity;

From 30166945501b055126f83ffd0f3e947722bd79cc Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 5 Mar 2017 23:04:32 -0500
Subject: [PATCH 145/150] add support for states

---
 .../choropleth/public/choropleth_layer.js           | 13 +++++++++++--
 .../choropleth/public/choropleth_vis.js             | 13 +++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_layer.js b/src/core_plugins/choropleth/public/choropleth_layer.js
index 570086a6f913d..4710d0abad4b2 100644
--- a/src/core_plugins/choropleth/public/choropleth_layer.js
+++ b/src/core_plugins/choropleth/public/choropleth_layer.js
@@ -193,10 +193,15 @@ function makeChoroplethStyleFunction(data, colorramp, joinField) {
 
   const { min, max } = getMinMax(data);
 
+
   return function (geojsonFeature) {
 
     const match = data.find((bucket) => {
-      return bucket.term === geojsonFeature.properties[joinField];
+      if (typeof bucket.term === 'string' && typeof geojsonFeature.properties[joinField] === 'string') {
+        return normalizeString(bucket.term) === normalizeString(geojsonFeature.properties[joinField]);
+      } else {
+        return bucket.term === geojsonFeature.properties[joinField];
+      }
     });
 
     if (!match) {
@@ -214,8 +219,12 @@ function makeChoroplethStyleFunction(data, colorramp, joinField) {
 }
 
 
-function getLegendColors(colorRamp) {
+function normalizeString(string) {
+  return string.trim().toLowerCase();
+}
+
 
+function getLegendColors(colorRamp) {
   const colors = [];
   colors[0] = getColor(colorRamp, 0);
   colors[1] = getColor(colorRamp, Math.floor(colorRamp.length * 1 / 4));
diff --git a/src/core_plugins/choropleth/public/choropleth_vis.js b/src/core_plugins/choropleth/public/choropleth_vis.js
index 76a0a5ae831c1..3bd796dbade4c 100644
--- a/src/core_plugins/choropleth/public/choropleth_vis.js
+++ b/src/core_plugins/choropleth/public/choropleth_vis.js
@@ -21,7 +21,11 @@ visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
       fields: [
         {
           name: 'iso',
-          description: '2-digit country abbreviation'
+          description: '2-letter abbreviation'
+        },
+        {
+          name: 'name',
+          description: 'Country name'
         }
       ]
     },
@@ -30,15 +34,16 @@ visTypes.register(function ChoroplethProvider(Private, vectormapsConfig) {
       url: '../plugins/choropleth/data/state.geojson',
       name: 'US States',
       fields: [{
-        name: 'NAME',
+        name: 'STUSPS10',
+        description: '2-letter abbreviation'
+      }, {
+        name: 'NAME10',
         description: 'State name'
       }]
     }
   ];
 
   const vectorLayers = vectormapsConfig.layers.concat(defaultLayers);
-
-
   return new TemplateVisType({
     name: 'choropleth',
     title: 'Vector Map',

From 3008db808208294978c2e4e5a80133d4f7f044ce Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Sun, 5 Mar 2017 23:49:33 -0500
Subject: [PATCH 146/150] fix config loading

---
 src/core_plugins/kibana/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/core_plugins/kibana/index.js b/src/core_plugins/kibana/index.js
index ec2286a415a32..58da43d7ac396 100644
--- a/src/core_plugins/kibana/index.js
+++ b/src/core_plugins/kibana/index.js
@@ -53,8 +53,7 @@ module.exports = function (kibana) {
           const configuredUrl = server.config().get('tilemap.url');
           const isOverridden = typeof configuredUrl === 'string' && configuredUrl !== '';
           const tilemapConfig = serverConfig.get('tilemap');
-
-          const vectormapsConfig = (!serverConfig.get('vectormap')) ? serverConfig.get('vectormap') : { layers: [] };
+          const vectormapsConfig = (serverConfig.get('vectormap')) ? serverConfig.get('vectormap') : { layers: [] };
 
           return {
             kbnDefaultAppId: serverConfig.get('kibana.defaultAppId'),

From a7f24ddf3e3a1dbb80b03e9c26070543066e41d6 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 17 Mar 2017 16:18:05 -0400
Subject: [PATCH 147/150] extract classes in separate files

---
 src/ui/public/vis_maps/geohash_grid.js   |  18 +
 src/ui/public/vis_maps/geohash_layer.js  | 475 +----------------------
 src/ui/public/vis_maps/heatmap.js        | 200 ++++++++++
 src/ui/public/vis_maps/scaled_circles.js | 224 +++++++++++
 src/ui/public/vis_maps/shaded_circles.js |  46 +++
 5 files changed, 492 insertions(+), 471 deletions(-)
 create mode 100644 src/ui/public/vis_maps/geohash_grid.js
 create mode 100644 src/ui/public/vis_maps/heatmap.js
 create mode 100644 src/ui/public/vis_maps/scaled_circles.js
 create mode 100644 src/ui/public/vis_maps/shaded_circles.js

diff --git a/src/ui/public/vis_maps/geohash_grid.js b/src/ui/public/vis_maps/geohash_grid.js
new file mode 100644
index 0000000000000..bf159ce70b707
--- /dev/null
+++ b/src/ui/public/vis_maps/geohash_grid.js
@@ -0,0 +1,18 @@
+import L from 'leaflet';
+import { EventEmitter } from 'events';
+import ScaledCircles from './scaled_circles';
+
+export default class GeohashGrid extends ScaledCircles {
+  getMarkerFunction() {
+    return function (feature, latlng) {
+      const geohashRect = feature.properties.rectangle;
+      // get bounds from northEast[3] and southWest[1]
+      // corners in geohash rectangle
+      const corners = [
+        [geohashRect[3][0], geohashRect[3][1]],
+        [geohashRect[1][0], geohashRect[1][1]]
+      ];
+      return L.rectangle(corners);
+    };
+  }
+}
diff --git a/src/ui/public/vis_maps/geohash_layer.js b/src/ui/public/vis_maps/geohash_layer.js
index 93a68754b9482..5fb42283d8ee7 100644
--- a/src/ui/public/vis_maps/geohash_layer.js
+++ b/src/ui/public/vis_maps/geohash_layer.js
@@ -1,411 +1,11 @@
 import KibanaMapLayer from './kibana_map_layer';
-import L from 'leaflet';
 import _ from 'lodash';
 import d3 from 'd3';
-import $ from 'jquery';
 import { EventEmitter } from 'events';
-
-class ScaledCircles extends EventEmitter {
-
-  constructor(featureCollection, options, targetZoom) {
-    super();
-    this._geohashGeoJson = featureCollection;
-    this._zoom = targetZoom;
-    this._valueFormatter = options.valueFormatter;
-    this._tooltipFormatter = options.tooltipFormatter;
-    this._legendColors = null;
-    this._legendQuantizer = null;
-
-    this._popups = [];
-    this._leafletLayer = L.geoJson(null, {
-      pointToLayer: this.getMarkerFunction(),
-      style: this.getStyleFunction(),
-      onEachFeature: (feature, layer) => {
-        this._bindPopup(feature, layer);
-      }
-    });
-    this._leafletLayer.addData(this._geohashGeoJson);
-  }
-
-  getLeafletLayer() {
-    return this._leafletLayer;
-  }
-
-
-  getStyleFunction() {
-    const min = _.get(this._geohashGeoJson, 'properties.min', 0);
-    const max = _.get(this._geohashGeoJson, 'properties.max', 1);
-
-    const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
-    this._legendColors = makeCircleMarkerLegendColors(min, max);
-    this._legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(this._legendColors);
-
-    return makeStyleFunction(min, max, this._legendColors, quantizeDomain);
-  }
-
-
-  movePointer(event) {
-  }
-
-  getLabel() {
-    if (this._popups.length) {
-      return this._popups[0].feature.properties.aggConfigResult.aggConfig.makeLabel();
-    }
-    return '';
-  }
-
-
-  appendLegendContents(jqueryDiv) {
-
-    if (!this._legendColors || !this._legendQuantizer) {
-      return;
-    }
-
-    const titleText = this.getLabel();
-    const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
-    jqueryDiv.append($title);
-
-    this._legendColors.forEach((color) => {
-      const labelText = this._legendQuantizer
-        .invertExtent(color)
-        .map(this._valueFormatter)
-        .join(' – ');
-
-      const label = $('<div>');
-      const icon = $('<i>').css({
-        background: color,
-        'border-color': makeColorDarker(color)
-      });
-
-      const text = $('<span>').text(labelText);
-      label.append(icon);
-      label.append(text);
-
-      jqueryDiv.append(label);
-    });
-
-  }
-
-
-  /**
-   * Binds popup and events to each feature on map
-   *
-   * @method bindPopup
-   * @param feature {Object}
-   * @param layer {Object}
-   * return {undefined}
-   */
-  _bindPopup(feature, layer) {
-    const popup = layer.on({
-      mouseover: (e) => {
-        const layer = e.target;
-        // bring layer to front if not older browser
-        if (!L.Browser.ie && !L.Browser.opera) {
-          layer.bringToFront();
-        }
-        this._showTooltip(feature);
-      },
-      mouseout: () => {
-        this.emit('hideTooltip');
-      }
-    });
-
-    this._popups.push(popup);
-  }
-
-  /**
-   * Checks if event latlng is within bounds of mapData
-   * features and shows tooltip for that feature
-   *
-   * @method _showTooltip
-   * @param feature {LeafletFeature}
-   * @param latLng? {Leaflet latLng}
-   * @return undefined
-   */
-  _showTooltip(feature, latLng) {
-
-    const lat = _.get(feature, 'geometry.coordinates.1');
-    const lng = _.get(feature, 'geometry.coordinates.0');
-    latLng = latLng || L.latLng(lat, lng);
-
-    const content = this._tooltipFormatter(feature);
-    if (!content) {
-      return;
-    }
-
-    this.emit('showTooltip', {
-      content: content,
-      position: latLng
-    });
-  }
-
-  getMarkerFunction() {
-    const scaleFactor = 0.6;
-    return (feature, latlng) => {
-      const value = feature.properties.value;
-      const scaledRadius = this._radiusScale(value) * scaleFactor;
-      return L.circleMarker(latlng).setRadius(scaledRadius);
-    };
-  }
-
-  /**
-   * radiusScale returns a number for scaled circle markers
-   * for relative sizing of markers
-   *
-   * @method _radiusScale
-   * @param value {Number}
-   * @return {Number}
-   */
-  _radiusScale(value) {
-
-    //magic numbers
-    const precisionBiasBase = 5;
-    const precisionBiasNumerator = 200;
-
-    const precision = _.max(this._geohashGeoJson.features.map((feature) => {
-      return String(feature.properties.geohash).length;
-    }));
-
-    const pct = Math.abs(value) / Math.abs(this._geohashGeoJson.properties.max);
-    const zoomRadius = 0.5 * Math.pow(2, this._zoom);
-    const precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
-
-    // square root value percentage
-    return Math.pow(pct, 0.5) * zoomRadius * precisionScale;
-  }
-
-  getBounds() {
-    return this._leafletLayer.getBounds();
-  }
-
-}
-
-class ShadedCircles extends ScaledCircles {
-  getMarkerFunction() {
-    // multiplier to reduce size of all circles
-    const scaleFactor = 0.8;
-    return (feature, latlng) => {
-      const radius = this._geohashMinDistance(feature) * scaleFactor;
-      return L.circle(latlng, radius);
-    };
-  }
-
-
-  /**
-   * _geohashMinDistance returns a min distance in meters for sizing
-   * circle markers to fit within geohash grid rectangle
-   *
-   * @method _geohashMinDistance
-   * @param feature {Object}
-   * @return {Number}
-   */
-  _geohashMinDistance(feature) {
-    const centerPoint = _.get(feature, 'properties.center');
-    const geohashRect = _.get(feature, 'properties.rectangle');
-
-    // centerPoint is an array of [lat, lng]
-    // geohashRect is the 4 corners of the geoHash rectangle
-    //   an array that starts at the southwest corner and proceeds
-    //   clockwise, each value being an array of [lat, lng]
-
-    // center lat and southeast lng
-    const east = L.latLng([centerPoint[0], geohashRect[2][1]]);
-    // southwest lat and center lng
-    const north = L.latLng([geohashRect[3][0], centerPoint[1]]);
-
-    // get latLng of geohash center point
-    const center = L.latLng([centerPoint[0], centerPoint[1]]);
-
-    // get smallest radius at center of geohash grid rectangle
-    const eastRadius = Math.floor(center.distanceTo(east));
-    const northRadius = Math.floor(center.distanceTo(north));
-    return _.min([eastRadius, northRadius]);
-  }
-}
-
-class GeohashGrid extends ScaledCircles {
-  getMarkerFunction() {
-    return function (feature, latlng) {
-      const geohashRect = feature.properties.rectangle;
-      // get bounds from northEast[3] and southWest[1]
-      // corners in geohash rectangle
-      const corners = [
-        [geohashRect[3][0], geohashRect[3][1]],
-        [geohashRect[1][0], geohashRect[1][1]]
-      ];
-      return L.rectangle(corners);
-    };
-  }
-}
-
-
-/**
- * Map overlay: canvas layer with leaflet.heat plugin
- *
- * @param map {Leaflet Object}
- * @param geoJson {geoJson Object}
- * @param params {Object}
- */
-class Heatmap extends EventEmitter {
-
-  constructor(featureCollection, options, zoom) {
-
-    super();
-    this._geojsonFeatureCollection = featureCollection;
-    const max = _.get(featureCollection, 'properties.max');
-    const points = dataToHeatArray(max, options.heatNormalizeData, featureCollection);
-    this._leafletLayer = L.heatLayer(points, options);
-    this._tooltipFormatter = options.tooltipFormatter;
-
-
-    this._zoom = zoom;
-    this._disableTooltips = false;
-    this._getLatLng = _.memoize(function (feature) {
-      return L.latLng(
-        feature.geometry.coordinates[1],
-        feature.geometry.coordinates[0]
-      );
-    }, function (feature) {
-      // turn coords into a string for the memoize cache
-      return [feature.geometry.coordinates[1], feature.geometry.coordinates[0]].join(',');
-    });
-
-    this._addTooltips();
-  }
-
-  getBounds() {
-    return this._leafletLayer.getBounds();
-  }
-
-  getLeafletLayer() {
-    return this._leafletLayer;
-  }
-
-  appendLegendContents(jqueryDiv) {
-  }
-
-
-  movePointer(type, event) {
-    if (type === 'mousemove') {
-      this._deboundsMoveMoveLocation(event);
-    } else if (type === 'mouseout') {
-      this.emit('hideTooltip');
-    } else if (type === 'mousedown') {
-      this._disableTooltips = true;
-      this.emit('hideTooltip');
-    } else if (type === 'mouseup') {
-      this._disableTooltips = false;
-    }
-  }
-
-
-  _addTooltips() {
-
-    const mouseMoveLocation = (e) => {
-
-      const latlng = e.latlng;
-      this.emit('hideTooltip');
-
-      // unhighlight all svgs
-      // d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
-
-      if (!this._geojsonFeatureCollection.features.length || this._disableTooltips) {
-        return;
-      }
-
-      const feature = this._nearestFeature(latlng);
-      if (this._tooltipProximity(latlng, feature)) {
-        const content = this._tooltipFormatter(feature);
-        if (!content) {
-          return;
-        }
-        this.emit('showTooltip', {
-          content: content,
-          position: latlng
-        });
-      }
-    };
-
-
-    const debouncedMouseMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
-      'leading': true,
-      'trailing': false
-    });
-    this._deboundsMoveMoveLocation = debouncedMouseMoveLocation;
-  }
-
-  /**
-   * Finds nearest feature in mapData to event latlng
-   *
-   * @method _nearestFeature
-   * @param latLng {Leaflet latLng}
-   * @return nearestPoint {Leaflet latLng}
-   */
-  _nearestFeature(latLng) {
-    const self = this;
-    let nearest;
-
-    if (latLng.lng < -180 || latLng.lng > 180) {
-      return;
-    }
-
-    _.reduce(this._geojsonFeatureCollection.features, function (distance, feature) {
-      const featureLatLng = self._getLatLng(feature);
-      const dist = latLng.distanceTo(featureLatLng);
-
-      if (dist < distance) {
-        nearest = feature;
-        return dist;
-      }
-
-      return distance;
-    }, Infinity);
-
-    return nearest;
-  }
-
-  /**
-   * display tooltip if feature is close enough to event latlng
-   *
-   * @method _tooltipProximity
-   * @param latlng {Leaflet latLng  Object}
-   * @param feature {geoJson Object}
-   * @return {Boolean}
-   */
-  _tooltipProximity(latlng, feature) {
-    if (!feature) return;
-
-    let showTip = false;
-    const featureLatLng = this._getLatLng(feature);
-
-    // zoomScale takes map zoom and returns proximity value for tooltip display
-    // domain (input values) is map zoom (min 1 and max 18)
-    // range (output values) is distance in meters
-    // used to compare proximity of event latlng to feature latlng
-    const zoomScale = d3.scale.linear()
-      .domain([1, 4, 7, 10, 13, 16, 18])
-      .range([1000000, 300000, 100000, 15000, 2000, 150, 50]);
-
-    const proximity = zoomScale(this._zoom);
-    const distance = latlng.distanceTo(featureLatLng);
-
-    // maxLngDif is max difference in longitudes
-    // to prevent feature tooltip from appearing 360°
-    // away from event latlng
-    const maxLngDif = 40;
-    const lngDif = Math.abs(latlng.lng - featureLatLng.lng);
-
-    if (distance < proximity && lngDif < maxLngDif) {
-      showTip = true;
-    }
-
-    d3.scale.pow().exponent(0.2)
-      .domain([1, 18])
-      .range([1500000, 50]);
-    return showTip;
-  }
-
-}
+import Heatmap from './heatmap';
+import ScaledCircles from './scaled_circles';
+import ShadedCircles from './shaded_circles';
+import GeohashGrid from './geohash_grid';
 
 export default class GeohashLayer extends KibanaMapLayer {
 
@@ -482,72 +82,5 @@ export default class GeohashLayer extends KibanaMapLayer {
   }
 }
 
-/**
- * d3 quantize scale returns a hex color, used for marker fill color
- *
- * @method quantizeLegendColors
- * return {undefined}
- */
-function makeCircleMarkerLegendColors(min, max) {
-  const reds1 = ['#ff6128'];
-  const reds3 = ['#fecc5c', '#fd8d3c', '#e31a1c'];
-  const reds5 = ['#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'];
-  const bottomCutoff = 2;
-  const middleCutoff = 24;
-  let legendColors;
-  if (max - min <= bottomCutoff) {
-    legendColors = reds1;
-  } else if (max - min <= middleCutoff) {
-    legendColors = reds3;
-  } else {
-    legendColors = reds5;
-  }
-  return legendColors;
-}
-
-function makeColorDarker(color) {
-  const amount = 1.3;//magic number, carry over from earlier
-  return d3.hcl(color).darker(amount).toString();
-}
-
-function makeStyleFunction(min, max, legendColors, quantizeDomain) {
-  const legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(legendColors);
-  return (feature) => {
-    const value = _.get(feature, 'properties.value');
-    const color = legendQuantizer(value);
-    return {
-      fillColor: color,
-      color: makeColorDarker(color),
-      weight: 1.5,
-      opacity: 1,
-      fillOpacity: 0.75
-    };
-  };
-}
-
-/**
- * returns data for data for heat map intensity
- * if heatNormalizeData attribute is checked/true
- • normalizes data for heat map intensity
- *
- * @method _dataToHeatArray
- * @param max {Number}
- * @return {Array}
- */
-function dataToHeatArray(max, heatNormalizeData, featureCollection) {
 
-  return featureCollection.features.map((feature) => {
-    const lat = feature.geometry.coordinates[1];
-    const lng = feature.geometry.coordinates[0];
-    let heatIntensity;
-    if (!heatNormalizeData) {
-      // show bucket value on heatmap
-      heatIntensity = feature.properties.value;
-    } else {
-      // show bucket value normalized to max value
-      heatIntensity = feature.properties.value / max;
-    }
 
-    return [lat, lng, heatIntensity];
-  });
-}
diff --git a/src/ui/public/vis_maps/heatmap.js b/src/ui/public/vis_maps/heatmap.js
new file mode 100644
index 0000000000000..56c72459f2d59
--- /dev/null
+++ b/src/ui/public/vis_maps/heatmap.js
@@ -0,0 +1,200 @@
+import L from 'leaflet';
+import _ from 'lodash';
+import d3 from 'd3';
+import { EventEmitter } from 'events';
+
+/**
+ * Map overlay: canvas layer with leaflet.heat plugin
+ *
+ * @param map {Leaflet Object}
+ * @param geoJson {geoJson Object}
+ * @param params {Object}
+ */
+export default class Heatmap extends EventEmitter {
+
+  constructor(featureCollection, options, zoom) {
+
+    super();
+    this._geojsonFeatureCollection = featureCollection;
+    const max = _.get(featureCollection, 'properties.max');
+    const points = dataToHeatArray(max, options.heatNormalizeData, featureCollection);
+    this._leafletLayer = L.heatLayer(points, options);
+    this._tooltipFormatter = options.tooltipFormatter;
+
+
+    this._zoom = zoom;
+    this._disableTooltips = false;
+    this._getLatLng = _.memoize(function (feature) {
+      return L.latLng(
+        feature.geometry.coordinates[1],
+        feature.geometry.coordinates[0]
+      );
+    }, function (feature) {
+      // turn coords into a string for the memoize cache
+      return [feature.geometry.coordinates[1], feature.geometry.coordinates[0]].join(',');
+    });
+
+    this._addTooltips();
+  }
+
+  getBounds() {
+    return this._leafletLayer.getBounds();
+  }
+
+  getLeafletLayer() {
+    return this._leafletLayer;
+  }
+
+  appendLegendContents(jqueryDiv) {
+  }
+
+
+  movePointer(type, event) {
+    if (type === 'mousemove') {
+      this._deboundsMoveMoveLocation(event);
+    } else if (type === 'mouseout') {
+      this.emit('hideTooltip');
+    } else if (type === 'mousedown') {
+      this._disableTooltips = true;
+      this.emit('hideTooltip');
+    } else if (type === 'mouseup') {
+      this._disableTooltips = false;
+    }
+  }
+
+
+  _addTooltips() {
+
+    const mouseMoveLocation = (e) => {
+
+      const latlng = e.latlng;
+      this.emit('hideTooltip');
+
+      // unhighlight all svgs
+      // d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
+
+      if (!this._geojsonFeatureCollection.features.length || this._disableTooltips) {
+        return;
+      }
+
+      const feature = this._nearestFeature(latlng);
+      if (this._tooltipProximity(latlng, feature)) {
+        const content = this._tooltipFormatter(feature);
+        if (!content) {
+          return;
+        }
+        this.emit('showTooltip', {
+          content: content,
+          position: latlng
+        });
+      }
+    };
+
+    this._deboundsMoveMoveLocation = _.debounce(mouseMoveLocation.bind(this), 15, {
+      'leading': true,
+      'trailing': false
+    });
+  }
+
+  /**
+   * Finds nearest feature in mapData to event latlng
+   *
+   * @method _nearestFeature
+   * @param latLng {Leaflet latLng}
+   * @return nearestPoint {Leaflet latLng}
+   */
+  _nearestFeature(latLng) {
+    const self = this;
+    let nearest;
+
+    if (latLng.lng < -180 || latLng.lng > 180) {
+      return;
+    }
+
+    _.reduce(this._geojsonFeatureCollection.features, function (distance, feature) {
+      const featureLatLng = self._getLatLng(feature);
+      const dist = latLng.distanceTo(featureLatLng);
+
+      if (dist < distance) {
+        nearest = feature;
+        return dist;
+      }
+
+      return distance;
+    }, Infinity);
+
+    return nearest;
+  }
+
+  /**
+   * display tooltip if feature is close enough to event latlng
+   *
+   * @method _tooltipProximity
+   * @param latlng {Leaflet latLng  Object}
+   * @param feature {geoJson Object}
+   * @return {Boolean}
+   */
+  _tooltipProximity(latlng, feature) {
+    if (!feature) return;
+
+    let showTip = false;
+    const featureLatLng = this._getLatLng(feature);
+
+    // zoomScale takes map zoom and returns proximity value for tooltip display
+    // domain (input values) is map zoom (min 1 and max 18)
+    // range (output values) is distance in meters
+    // used to compare proximity of event latlng to feature latlng
+    const zoomScale = d3.scale.linear()
+      .domain([1, 4, 7, 10, 13, 16, 18])
+      .range([1000000, 300000, 100000, 15000, 2000, 150, 50]);
+
+    const proximity = zoomScale(this._zoom);
+    const distance = latlng.distanceTo(featureLatLng);
+
+    // maxLngDif is max difference in longitudes
+    // to prevent feature tooltip from appearing 360°
+    // away from event latlng
+    const maxLngDif = 40;
+    const lngDif = Math.abs(latlng.lng - featureLatLng.lng);
+
+    if (distance < proximity && lngDif < maxLngDif) {
+      showTip = true;
+    }
+
+    d3.scale.pow().exponent(0.2)
+      .domain([1, 18])
+      .range([1500000, 50]);
+    return showTip;
+  }
+
+}
+
+
+
+/**
+ * returns data for data for heat map intensity
+ * if heatNormalizeData attribute is checked/true
+ • normalizes data for heat map intensity
+ *
+ * @method _dataToHeatArray
+ * @param max {Number}
+ * @return {Array}
+ */
+function dataToHeatArray(max, heatNormalizeData, featureCollection) {
+
+  return featureCollection.features.map((feature) => {
+    const lat = feature.geometry.coordinates[1];
+    const lng = feature.geometry.coordinates[0];
+    let heatIntensity;
+    if (!heatNormalizeData) {
+      // show bucket value on heatmap
+      heatIntensity = feature.properties.value;
+    } else {
+      // show bucket value normalized to max value
+      heatIntensity = feature.properties.value / max;
+    }
+
+    return [lat, lng, heatIntensity];
+  });
+}
+
diff --git a/src/ui/public/vis_maps/scaled_circles.js b/src/ui/public/vis_maps/scaled_circles.js
new file mode 100644
index 0000000000000..49dd0f39828a3
--- /dev/null
+++ b/src/ui/public/vis_maps/scaled_circles.js
@@ -0,0 +1,224 @@
+import L from 'leaflet';
+import _ from 'lodash';
+import d3 from 'd3';
+import $ from 'jquery';
+import { EventEmitter } from 'events';
+
+export default class ScaledCircles extends EventEmitter {
+
+  constructor(featureCollection, options, targetZoom) {
+    super();
+    this._geohashGeoJson = featureCollection;
+    this._zoom = targetZoom;
+    this._valueFormatter = options.valueFormatter;
+    this._tooltipFormatter = options.tooltipFormatter;
+    this._legendColors = null;
+    this._legendQuantizer = null;
+
+    this._popups = [];
+    this._leafletLayer = L.geoJson(null, {
+      pointToLayer: this.getMarkerFunction(),
+      style: this.getStyleFunction(),
+      onEachFeature: (feature, layer) => {
+        this._bindPopup(feature, layer);
+      }
+    });
+    this._leafletLayer.addData(this._geohashGeoJson);
+  }
+
+  getLeafletLayer() {
+    return this._leafletLayer;
+  }
+
+
+  getStyleFunction() {
+    const min = _.get(this._geohashGeoJson, 'properties.min', 0);
+    const max = _.get(this._geohashGeoJson, 'properties.max', 1);
+
+    const quantizeDomain = (min !== max) ? [min, max] : d3.scale.quantize().domain();
+    this._legendColors = makeCircleMarkerLegendColors(min, max);
+    this._legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(this._legendColors);
+
+    return makeStyleFunction(min, max, this._legendColors, quantizeDomain);
+  }
+
+
+  movePointer(event) {
+  }
+
+  getLabel() {
+    if (this._popups.length) {
+      return this._popups[0].feature.properties.aggConfigResult.aggConfig.makeLabel();
+    }
+    return '';
+  }
+
+
+  appendLegendContents(jqueryDiv) {
+
+    if (!this._legendColors || !this._legendQuantizer) {
+      return;
+    }
+
+    const titleText = this.getLabel();
+    const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
+    jqueryDiv.append($title);
+
+    this._legendColors.forEach((color) => {
+      const labelText = this._legendQuantizer
+        .invertExtent(color)
+        .map(this._valueFormatter)
+        .join(' – ');
+
+      const label = $('<div>');
+      const icon = $('<i>').css({
+        background: color,
+        'border-color': makeColorDarker(color)
+      });
+
+      const text = $('<span>').text(labelText);
+      label.append(icon);
+      label.append(text);
+
+      jqueryDiv.append(label);
+    });
+
+  }
+
+
+  /**
+   * Binds popup and events to each feature on map
+   *
+   * @method bindPopup
+   * @param feature {Object}
+   * @param layer {Object}
+   * return {undefined}
+   */
+  _bindPopup(feature, layer) {
+    const popup = layer.on({
+      mouseover: (e) => {
+        const layer = e.target;
+        // bring layer to front if not older browser
+        if (!L.Browser.ie && !L.Browser.opera) {
+          layer.bringToFront();
+        }
+        this._showTooltip(feature);
+      },
+      mouseout: () => {
+        this.emit('hideTooltip');
+      }
+    });
+
+    this._popups.push(popup);
+  }
+
+  /**
+   * Checks if event latlng is within bounds of mapData
+   * features and shows tooltip for that feature
+   *
+   * @method _showTooltip
+   * @param feature {LeafletFeature}
+   * @param latLng? {Leaflet latLng}
+   * @return undefined
+   */
+  _showTooltip(feature, latLng) {
+
+    const lat = _.get(feature, 'geometry.coordinates.1');
+    const lng = _.get(feature, 'geometry.coordinates.0');
+    latLng = latLng || L.latLng(lat, lng);
+
+    const content = this._tooltipFormatter(feature);
+    if (!content) {
+      return;
+    }
+
+    this.emit('showTooltip', {
+      content: content,
+      position: latLng
+    });
+  }
+
+  getMarkerFunction() {
+    const scaleFactor = 0.6;
+    return (feature, latlng) => {
+      const value = feature.properties.value;
+      const scaledRadius = this._radiusScale(value) * scaleFactor;
+      return L.circleMarker(latlng).setRadius(scaledRadius);
+    };
+  }
+
+  /**
+   * radiusScale returns a number for scaled circle markers
+   * for relative sizing of markers
+   *
+   * @method _radiusScale
+   * @param value {Number}
+   * @return {Number}
+   */
+  _radiusScale(value) {
+
+    //magic numbers
+    const precisionBiasBase = 5;
+    const precisionBiasNumerator = 200;
+
+    const precision = _.max(this._geohashGeoJson.features.map((feature) => {
+      return String(feature.properties.geohash).length;
+    }));
+
+    const pct = Math.abs(value) / Math.abs(this._geohashGeoJson.properties.max);
+    const zoomRadius = 0.5 * Math.pow(2, this._zoom);
+    const precisionScale = precisionBiasNumerator / Math.pow(precisionBiasBase, precision);
+
+    // square root value percentage
+    return Math.pow(pct, 0.5) * zoomRadius * precisionScale;
+  }
+
+  getBounds() {
+    return this._leafletLayer.getBounds();
+  }
+
+}
+
+
+/**
+ * d3 quantize scale returns a hex color, used for marker fill color
+ *
+ * @method quantizeLegendColors
+ * return {undefined}
+ */
+function makeCircleMarkerLegendColors(min, max) {
+  const reds1 = ['#ff6128'];
+  const reds3 = ['#fecc5c', '#fd8d3c', '#e31a1c'];
+  const reds5 = ['#fed976', '#feb24c', '#fd8d3c', '#f03b20', '#bd0026'];
+  const bottomCutoff = 2;
+  const middleCutoff = 24;
+  let legendColors;
+  if (max - min <= bottomCutoff) {
+    legendColors = reds1;
+  } else if (max - min <= middleCutoff) {
+    legendColors = reds3;
+  } else {
+    legendColors = reds5;
+  }
+  return legendColors;
+}
+
+function makeColorDarker(color) {
+  const amount = 1.3;//magic number, carry over from earlier
+  return d3.hcl(color).darker(amount).toString();
+}
+
+function makeStyleFunction(min, max, legendColors, quantizeDomain) {
+  const legendQuantizer = d3.scale.quantize().domain(quantizeDomain).range(legendColors);
+  return (feature) => {
+    const value = _.get(feature, 'properties.value');
+    const color = legendQuantizer(value);
+    return {
+      fillColor: color,
+      color: makeColorDarker(color),
+      weight: 1.5,
+      opacity: 1,
+      fillOpacity: 0.75
+    };
+  };
+}
diff --git a/src/ui/public/vis_maps/shaded_circles.js b/src/ui/public/vis_maps/shaded_circles.js
new file mode 100644
index 0000000000000..8c67f4fcdf396
--- /dev/null
+++ b/src/ui/public/vis_maps/shaded_circles.js
@@ -0,0 +1,46 @@
+import L from 'leaflet';
+import _ from 'lodash';
+import ScaledCircles from './scaled_circles';
+
+export default class ShadedCircles extends ScaledCircles {
+  getMarkerFunction() {
+    // multiplier to reduce size of all circles
+    const scaleFactor = 0.8;
+    return (feature, latlng) => {
+      const radius = this._geohashMinDistance(feature) * scaleFactor;
+      return L.circle(latlng, radius);
+    };
+  }
+
+
+  /**
+   * _geohashMinDistance returns a min distance in meters for sizing
+   * circle markers to fit within geohash grid rectangle
+   *
+   * @method _geohashMinDistance
+   * @param feature {Object}
+   * @return {Number}
+   */
+  _geohashMinDistance(feature) {
+    const centerPoint = _.get(feature, 'properties.center');
+    const geohashRect = _.get(feature, 'properties.rectangle');
+
+    // centerPoint is an array of [lat, lng]
+    // geohashRect is the 4 corners of the geoHash rectangle
+    //   an array that starts at the southwest corner and proceeds
+    //   clockwise, each value being an array of [lat, lng]
+
+    // center lat and southeast lng
+    const east = L.latLng([centerPoint[0], geohashRect[2][1]]);
+    // southwest lat and center lng
+    const north = L.latLng([geohashRect[3][0], centerPoint[1]]);
+
+    // get latLng of geohash center point
+    const center = L.latLng([centerPoint[0], centerPoint[1]]);
+
+    // get smallest radius at center of geohash grid rectangle
+    const eastRadius = Math.floor(center.distanceTo(east));
+    const northRadius = Math.floor(center.distanceTo(north));
+    return _.min([eastRadius, northRadius]);
+  }
+}

From 88a97f88f88e8c4247f2fba180868a02f643a1ca Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 17 Mar 2017 16:38:14 -0400
Subject: [PATCH 148/150] do not hardcode map zoom level to calculate max zoom

---
 src/ui/public/utils/zoom_to_precision.js | 36 ++++++++++++++++--------
 src/ui/public/vis_maps/kibana_map.js     |  2 +-
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/ui/public/utils/zoom_to_precision.js b/src/ui/public/utils/zoom_to_precision.js
index fafe324df5041..375a032d63613 100644
--- a/src/ui/public/utils/zoom_to_precision.js
+++ b/src/ui/public/utils/zoom_to_precision.js
@@ -5,22 +5,34 @@ const maxPrecision = 12;
  * Map Leaflet zoom levels to geohash precision levels.
  * The size of a geohash column-width on the map should be at least `minGeohashPixels` pixels wide.
  */
-const zoomPrecision = {};
+
+
+
+
+const zoomPrecisionMap = {};
 const minGeohashPixels = 16;
-for (let zoom = 0; zoom <= 21; zoom += 1) {
-  const worldPixels = 256 * Math.pow(2, zoom);
-  zoomPrecision[zoom] = 1;
-  for (let precision = 2; precision <= maxPrecision; precision += 1) {
-    const columns = geohashColumns(precision);
-    if ((worldPixels / columns) >= minGeohashPixels) {
-      zoomPrecision[zoom] = precision;
-    } else {
-      break;
+
+function calculateZoomToPrecisionMap(maxZoom) {
+
+  for (let zoom = 0; zoom <= maxZoom; zoom += 1) {
+    if (typeof zoomPrecisionMap[zoom] === 'number') {
+      continue;
+    }
+    const worldPixels = 256 * Math.pow(2, zoom);
+    zoomPrecisionMap[zoom] = 1;
+    for (let precision = 2; precision <= maxPrecision; precision += 1) {
+      const columns = geohashColumns(precision);
+      if ((worldPixels / columns) >= minGeohashPixels) {
+        zoomPrecisionMap[zoom] = precision;
+      } else {
+        break;
+      }
     }
   }
 }
 
 
-export default function zoomToPrecision(mapZoom, maxPrecision) {
-  return Math.min(zoomPrecision[mapZoom], maxPrecision);
+export default function zoomToPrecision(mapZoom, maxPrecision, maxZoom) {
+  calculateZoomToPrecisionMap(typeof maxZoom === 'number' ? maxZoom : 21);
+  return Math.min(zoomPrecisionMap[mapZoom], maxPrecision);
 }
diff --git a/src/ui/public/vis_maps/kibana_map.js b/src/ui/public/vis_maps/kibana_map.js
index d3dfd809e82a5..03d0743c507fe 100644
--- a/src/ui/public/vis_maps/kibana_map.js
+++ b/src/ui/public/vis_maps/kibana_map.js
@@ -259,7 +259,7 @@ class KibanaMap extends EventEmitter {
   }
 
   getAutoPrecision() {
-    return zoomToPrecision(this._leafletMap.getZoom(), 12);
+    return zoomToPrecision(this._leafletMap.getZoom(), 12, this._leafletMap.getMaxZoom());
   }
 
   getBounds() {

From cfdb742bddfdbfdae6c6a60875624e0753121255 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Fri, 17 Mar 2017 16:50:58 -0400
Subject: [PATCH 149/150] resolve style issues

---
 src/ui/public/agg_types/agg_params.js    | 5 -----
 src/ui/public/vis/agg_configs.js         | 4 ----
 src/ui/public/vis_maps/maps_renderbot.js | 3 +--
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/ui/public/agg_types/agg_params.js b/src/ui/public/agg_types/agg_params.js
index aa656b5cd39dd..837f27c3a3843 100644
--- a/src/ui/public/agg_types/agg_params.js
+++ b/src/ui/public/agg_types/agg_params.js
@@ -8,11 +8,6 @@ import AggTypesParamTypesStringProvider from 'ui/agg_types/param_types/string';
 import AggTypesParamTypesRawJsonProvider from 'ui/agg_types/param_types/raw_json';
 import AggTypesParamTypesBaseProvider from 'ui/agg_types/param_types/base';
 export default function AggParamsFactory(Private) {
-
-
-  // const GeoCentroidAggregation = Private(AggTypesMetricsGeoCentroidProvider);
-  // console.log(GeoCentroidAggregation);
-
   const paramTypeMap = {
     field: Private(AggTypesParamTypesFieldProvider),
     optioned: Private(AggTypesParamTypesOptionedProvider),
diff --git a/src/ui/public/vis/agg_configs.js b/src/ui/public/vis/agg_configs.js
index e5c5e943dbd0a..b7430d8779281 100644
--- a/src/ui/public/vis/agg_configs.js
+++ b/src/ui/public/vis/agg_configs.js
@@ -177,10 +177,6 @@ export default function AggConfigsFactory(Private) {
 
       aggregations.push(geocentroidMetric);
     }
-    // console.log('arg', arf);
-
-    //add
-
     return aggregations;
 
   };
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 6def9e0a69a44..996839f691335 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -140,9 +140,8 @@ module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettin
     updateParams() {
 
       this._paramsDirty = true;
-      this._kibanaMapReady.then(_ => {
+      this._kibanaMapReady.then(() => {
         const mapParams = this._getMapsParams();
-        //todo: when WMS changes, recreate the kibana-map
         if (mapParams.wms.enabled) {
           const { minZoom, maxZoom } = tilemapSettings.getMinMaxZoom(true);
           this._kibanaMap.setBaseLayer({

From c3b87a371743462509f76a353d7ee1810857e408 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Mon, 20 Mar 2017 17:45:35 -0400
Subject: [PATCH 150/150] fix rebase issues

---
 src/core_plugins/choropleth/public/choropleth_controller.js | 4 ++--
 src/ui/public/vis_maps/maps_renderbot.js                    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core_plugins/choropleth/public/choropleth_controller.js b/src/core_plugins/choropleth/public/choropleth_controller.js
index 7fd050aa88e36..9d18f0c51e3c9 100644
--- a/src/core_plugins/choropleth/public/choropleth_controller.js
+++ b/src/core_plugins/choropleth/public/choropleth_controller.js
@@ -7,14 +7,14 @@ import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_cli
 import ChoroplethLayer from './choropleth_layer';
 import colorramps from 'ui/vislib/components/color/colormaps';
 import AggResponsePointSeriesTooltipFormatterProvider from './tooltip_formatter';
-import VislibLibResizeCheckerProvider from 'ui/vislib/lib/resize_checker';
+import { ResizeCheckerProvider } from 'ui/resize_checker';
 
 const module = uiModules.get('kibana/choropleth', ['kibana']);
 module.controller('KbnChoroplethController', function ($scope, $element, Private, getAppState, tilemapSettings, vectormapsConfig, config) {
 
   const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
   const tooltipFormatter = Private(AggResponsePointSeriesTooltipFormatterProvider);
-  const ResizeChecker = Private(VislibLibResizeCheckerProvider);
+  const ResizeChecker = Private(ResizeCheckerProvider);
 
   const resizeChecker = new ResizeChecker($element);
   const containerNode = $element[0];
diff --git a/src/ui/public/vis_maps/maps_renderbot.js b/src/ui/public/vis_maps/maps_renderbot.js
index 996839f691335..b9f699b99f885 100644
--- a/src/ui/public/vis_maps/maps_renderbot.js
+++ b/src/ui/public/vis_maps/maps_renderbot.js
@@ -7,12 +7,12 @@ import KibanaMap from './kibana_map';
 import GeohashLayer from './geohash_layer';
 import './lib/tilemap_settings';
 import './styles/_tilemap.less';
-import VislibLibResizeCheckerProvider from '../vislib/lib/resize_checker';
+import { ResizeCheckerProvider } from 'ui/resize_checker';
 
 
 module.exports = function MapsRenderbotFactory(Private, $injector, tilemapSettings, Notifier, courier, getAppState) {
 
-  const ResizeChecker = Private(VislibLibResizeCheckerProvider);
+  const ResizeChecker = Private(ResizeCheckerProvider);
   const Renderbot = Private(VisRenderbotProvider);
   const buildChartData = Private(MapsVisTypeBuildChartDataProvider);
   const notify = new Notifier({ location: 'Tilemap' });