From 5778951aa4637e0fc77d0ceb3c908eb88e6eab5f Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 21 Dec 2016 12:58:55 -0800
Subject: [PATCH 01/31] Refactor Visualize Wizard to use explicit controller
 names, instead of defining them dynamically.

---
 .../public/visualize/wizard/step_1.html       | 62 ++++++++++---------
 .../public/visualize/wizard/step_2.html       | 42 +++++++------
 .../kibana/public/visualize/wizard/wizard.js  | 10 ++-
 3 files changed, 58 insertions(+), 56 deletions(-)

diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
index 49baecc110961..1604638599417 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -1,33 +1,35 @@
-<div class="visualizeWizardBreadcrumbs">
-  <bread-crumbs></bread-crumbs>
-</div>
-<div class="wizard">
-  <div class="wizard-column">
-    <h3 class="wizard-sub-title">Create New Visualization</h3>
-    <div class="wizard-row">
-      <a
-        class="wizard-type"
-        ng-repeat="type in visTypes.inTitleOrder"
-        ng-href="{{ visTypeUrl(type) }}"
-      >
-        <div class="wizard-type-heading">
-          <i
-            aria-hidden="true"
-            class="wizard-type-heading-icon fa fa-fw"
-            ng-class="type.icon"
-          ></i>
-          <h4 class="wizard-type-heading-text">{{type.title}}</h4>
-        </div>
-        <p class="wizard-type-description">{{type.description}}</p>
-      </a>
-    </div>
+<div class="container-fluid vis-wizard">
+  <div class="visualizeWizardBreadcrumbs">
+    <bread-crumbs></bread-crumbs>
   </div>
-  <div class="wizard-column">
-    <h3 class="wizard-sub-title">Or, Open a Saved Visualization</h3>
-    <saved-object-finder
-      title="Saved Visualizations"
-      type="visualizations"
-      class="wizard-row"
-    ></saved-object-finder>
+  <div class="wizard">
+    <div class="wizard-column">
+      <h3 class="wizard-sub-title">Create New Visualization</h3>
+      <div class="wizard-row">
+        <a
+          class="wizard-type"
+          ng-repeat="type in visTypes.inTitleOrder"
+          ng-href="{{ visTypeUrl(type) }}"
+        >
+          <div class="wizard-type-heading">
+            <i
+              aria-hidden="true"
+              class="wizard-type-heading-icon fa fa-fw"
+              ng-class="type.icon"
+            ></i>
+            <h4 class="wizard-type-heading-text">{{type.title}}</h4>
+          </div>
+          <p class="wizard-type-description">{{type.description}}</p>
+        </a>
+      </div>
+    </div>
+    <div class="wizard-column">
+      <h3 class="wizard-sub-title">Or, Open a Saved Visualization</h3>
+      <saved-object-finder
+        title="Saved Visualizations"
+        type="visualizations"
+        class="wizard-row"
+      ></saved-object-finder>
+    </div>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
index 43fc64bdb6468..a810af180b163 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_2.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
@@ -1,24 +1,26 @@
-<div class="visualizeWizardBreadcrumbs">
-  <bread-crumbs></bread-crumbs>
-</div>
-<div class="wizard">
-  <div class="wizard-column wizard-column--small">
-    <h3 class="wizard-sub-title">From a New Search, Select Index</h3>
-    <paginated-selectable-list
-      per-page="20"
-      list="indexPattern.list"
-      user-make-url="makeUrl"
-      class="wizard-row"
-    ></paginated-selectable-list>
+<div class="container-fluid vis-wizard">
+  <div class="visualizeWizardBreadcrumbs">
+    <bread-crumbs></bread-crumbs>
   </div>
-  <div class="wizard-column wizard-column--large">
-    <h3 class="wizard-sub-title">Or, From a Saved Search</h3>
-    <!-- Saved searches -->
-    <saved-object-finder
-        title="Saved Searches"
-        type="searches"
+  <div class="wizard">
+    <div class="wizard-column wizard-column--small">
+      <h3 class="wizard-sub-title">From a New Search, Select Index</h3>
+      <paginated-selectable-list
+        per-page="20"
+        list="indexPattern.list"
+        user-make-url="makeUrl"
         class="wizard-row"
-        make-url="step2WithSearchUrl"
-      ></saved-object-finder>
+      ></paginated-selectable-list>
+    </div>
+    <div class="wizard-column wizard-column--large">
+      <h3 class="wizard-sub-title">Or, From a Saved Search</h3>
+      <!-- Saved searches -->
+      <saved-object-finder
+          title="Saved Searches"
+          type="searches"
+          class="wizard-row"
+          make-url="step2WithSearchUrl"
+        ></saved-object-finder>
+    </div>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
index 98fb790a50264..0925c4e60142f 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js
+++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -9,17 +9,14 @@ import RegistryVisTypesProvider from 'ui/registry/vis_types';
 import uiModules from 'ui/modules';
 import './wizard.less';
 
-const templateStep = function (num, txt) {
-  return '<div ng-controller="VisualizeWizardStep' + num + '" class="container-fluid vis-wizard">' + txt + '</div>';
-};
-
 const module = uiModules.get('app/visualize', ['kibana/courier']);
 
 /********
 /** Wizard Step 1
 /********/
 routes.when('/visualize/step/1', {
-  template: templateStep(1, require('plugins/kibana/visualize/wizard/step_1.html'))
+  template: require('plugins/kibana/visualize/wizard/step_1.html'),
+  controller: 'VisualizeWizardStep1',
 });
 
 module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, timefilter, Private) {
@@ -44,7 +41,8 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
 /** Wizard Step 2
 /********/
 routes.when('/visualize/step/2', {
-  template: templateStep(2, require('plugins/kibana/visualize/wizard/step_2.html')),
+  template: require('plugins/kibana/visualize/wizard/step_2.html'),
+  controller: 'VisualizeWizardStep2',
   resolve: {
     indexPatternIds: function (courier) {
       return courier.indexPatterns.getIds();

From 5a5eecbfc69585d573f1030db0dcdec438065096 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 21 Dec 2016 16:08:06 -0800
Subject: [PATCH 02/31] Add landing page with table to Visualize app. - Update
 Visualize wizard UI. - kbnTopNav directive supports no-menu-extensions
 attribute for excluding extensions, so you can hide the menu items entirely.

---
 .../public/visualize/editor/editor.html       |   2 +-
 .../kibana/public/visualize/index.js          |   3 +-
 .../public/visualize/landing/landing.js       |  11 ++
 .../visualize/landing/visualize_landing.html  | 147 ++++++++++++++++++
 .../visualize/landing/visualize_landing.js    |  83 ++++++++++
 .../kibana/public/visualize/styles/main.less  |  70 ++++-----
 .../public/visualize/wizard/step_1.html       |  30 ++--
 .../public/visualize/wizard/step_2.html       |  14 +-
 src/ui/public/kbn_top_nav/kbn_top_nav.js      |   5 +-
 9 files changed, 307 insertions(+), 58 deletions(-)
 create mode 100644 src/core_plugins/kibana/public/visualize/landing/landing.js
 create mode 100644 src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
 create mode 100644 src/core_plugins/kibana/public/visualize/landing/visualize_landing.js

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index e5535094f24cc..a782c53106dc6 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -33,7 +33,7 @@
           </a>
         </div>
 
-        <!-- Allow searching if there is no linked Saved Searc. -->
+        <!-- Allow searching if there is no linked Saved Search. -->
         <form
           ng-if="vis.type.requiresSearch && !$state.linked"
           name="queryInput"
diff --git a/src/core_plugins/kibana/public/visualize/index.js b/src/core_plugins/kibana/public/visualize/index.js
index 67cf63db22f75..21154c7ca46b6 100644
--- a/src/core_plugins/kibana/public/visualize/index.js
+++ b/src/core_plugins/kibana/public/visualize/index.js
@@ -1,5 +1,6 @@
 import 'plugins/kibana/visualize/styles/main.less';
 import 'plugins/kibana/visualize/editor/editor';
+import 'plugins/kibana/visualize/landing/landing';
 import 'plugins/kibana/visualize/wizard/wizard';
 import 'plugins/kibana/visualize/editor/add_bucket_agg';
 import 'plugins/kibana/visualize/editor/agg';
@@ -24,7 +25,7 @@ uiRoutes
   requireDefaultIndex: true
 })
 .when('/visualize', {
-  redirectTo: '/visualize/step/1'
+  redirectTo: '/visualize/landing'
 });
 
 // preloading
diff --git a/src/core_plugins/kibana/public/visualize/landing/landing.js b/src/core_plugins/kibana/public/visualize/landing/landing.js
new file mode 100644
index 0000000000000..bd563b0aa00e5
--- /dev/null
+++ b/src/core_plugins/kibana/public/visualize/landing/landing.js
@@ -0,0 +1,11 @@
+import routes from 'ui/routes';
+import modules from 'ui/modules';
+import visualizeLandingTemplate from './visualize_landing.html';
+import { VisualizeLandingController } from './visualize_landing';
+
+routes
+.when('/visualize/landing', {
+  template: visualizeLandingTemplate,
+  controller: VisualizeLandingController,
+  controllerAs: 'landingController',
+});
diff --git a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
new file mode 100644
index 0000000000000..9455e1f9aaf5b
--- /dev/null
+++ b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
@@ -0,0 +1,147 @@
+<!-- Local nav. -->
+<kbn-top-nav name="visualize" no-menu-extensions>
+  <!-- Transcluded elements. -->
+  <div data-transclude-slots>
+    <!-- Title. -->
+    <div
+      data-transclude-slot="topLeftCorner"
+      class="kuiLocalTitle"
+    >
+      Visualize
+    </div>
+  </div>
+</kbn-top-nav>
+
+<div class="kuiViewContent kuiViewContent--constrainedWidth">
+  <!-- ControlledTable -->
+  <div class="kuiViewContentItem 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..."
+            aria-label="Filter"
+            ng-model="landingController.filter"
+          >
+        </div>
+      </div>
+
+      <div class="kuiToolBarSection">
+        <!-- Bulk delete button -->
+        <button
+          class="kuiButton kuiButton--danger kuiButton--iconText"
+          confirm-click="landingController.deleteSelectedItems()"
+          confirmation="Are you sure you want to delete the selected visualizations? This action is irreversible!"
+          aria-label="Delete selected objects"
+          ng-hide="landingController.getSelectedItemsCount() === 0"
+        >
+          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
+          Delete
+        </button>
+
+        <!-- Create visualization button -->
+        <a
+          class="kuiButton kuiButton--primary kuiButton--iconText"
+          href="#/visualize/step/1"
+          aria-label="Create new visualization"
+          ng-hide="landingController.getSelectedItemsCount() > 0"
+        >
+          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
+          Create visualization
+        </a>
+      </div>
+
+      <div class="kuiToolBarSection">
+        <!-- We need an empty section for the buttons to be positioned consistently. -->
+      </div>
+    </div>
+
+    <!-- NoResults -->
+    <div class="kuiPanel kuiPanel--centered" ng-if="!landingController.items.length">
+      <div class="kuiNoResults">
+        No visualizations matched your search.
+      </div>
+    </div>
+
+    <!-- Table -->
+    <table class="kuiTable" ng-if="landingController.items.length">
+      <thead>
+        <tr>
+          <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
+            <input
+              type="checkbox"
+              class="kuiCheckBox"
+              ng-checked="landingController.areAllItemsChecked()"
+              ng-click="landingController.toggleAll()"
+            >
+          </th>
+          <th class="kuiTableHeaderCell">
+            Visualization
+          </th>
+          <th class="kuiTableHeaderCell">
+            Type
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          ng-repeat="item in landingController.items track by item.id | orderBy:'title'"
+          class="kuiTableRow"
+        >
+          <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+            <input
+              type="checkbox"
+              class="kuiCheckBox"
+              ng-click="landingController.toggleItem(item)"
+              ng-checked="landingController.isItemChecked(item)"
+            >
+          </td>
+
+          <td class="kuiTableRowCell">
+            <div class="kuiTableRowCell__liner">
+              <a class="kuiLink" ng-href="{{ item.url }}">
+                {{ item.title }}
+              </a>
+
+              <button
+                class="kuiMicroButton kuiTableRowHoverReveal"
+                ng-click="landingController.edit(item)"
+                aria-label="Edit"
+                tooltip="Edit object"
+              >
+                <span
+                  aria-hidden="true"
+                  class="kuiIcon fa-code"
+                ></span>
+              </button>
+            </div>
+          </td>
+
+          <td class="kuiTableRowCell">
+            <div class="kuiTableRowCell__liner">
+              {{ item.type.title }}
+            </div>
+          </td>
+        </tr>
+
+      </tbody>
+    </table>
+
+    <!-- ToolBarFooter -->
+    <div class="kuiToolBarFooter">
+      <div class="kuiToolBarFooterSection">
+        <div class="kuiToolBarText" ng-hide="landingController.getSelectedItemsCount() === 0">
+          {{ landingController.getSelectedItemsCount() }} selected
+        </div>
+      </div>
+      <div class="kuiToolBarFooterSection">
+        <!-- We need an empty section for the buttons to be positioned consistently. -->
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.js b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.js
new file mode 100644
index 0000000000000..e94fd3154dcce
--- /dev/null
+++ b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.js
@@ -0,0 +1,83 @@
+import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
+
+export function VisualizeLandingController(
+  $scope,
+  kbnUrl,
+  Notifier,
+  Private
+) {
+  // TODO: Extract this into an external service.
+  const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
+  const visualizationService = services.visualizations;
+  const notify = new Notifier({ location: 'Visualize' });
+
+  let selectedItems = [];
+
+  const fetchObjects = () => {
+    visualizationService.find(this.filter)
+    .then(result => {
+      this.items = result.hits;
+    });
+  };
+
+  this.items = [];
+  this.filter = '';
+
+  this.toggleAll = function toggleAll() {
+    if (this.areAllItemsChecked()) {
+      selectedItems = [];
+    } else {
+      selectedItems = this.items.slice(0);
+    }
+  };
+
+  this.toggleItem = function toggleItem(item) {
+    if (this.isItemChecked(item)) {
+      const index = selectedItems.indexOf(item);
+      selectedItems.splice(index, 1);
+    } else {
+      selectedItems.push(item);
+    }
+  };
+
+  this.isItemChecked = function isItemChecked(item) {
+    return selectedItems.indexOf(item) !== -1;
+  };
+
+  this.areAllItemsChecked = function areAllItemsChecked() {
+    return this.getSelectedItemsCount() === this.items.length;
+  };
+
+  this.getSelectedItemsCount = function getSelectedItemsCount() {
+    return selectedItems.length;
+  };
+
+  this.deleteSelectedItems = function deleteSelectedItems() {
+    const selectedIds = selectedItems.map(item => item.id);
+
+    visualizationService.delete(selectedIds)
+    .then(fetchObjects)
+    .then(() => {
+      selectedItems = [];
+    })
+    .catch(error => notify.error(error));
+  };
+
+  this.open = function open(item) {
+    kbnUrl.change(item.url.substr(1));
+  };
+
+  this.edit = function edit(item) {
+    const params = {
+      // TODO: Get this value from somewhere instead of hardcodign it.
+      service: 'savedVisualizations',
+      id: item.id
+    };
+
+    kbnUrl.change('/management/kibana/objects/{{ service }}/{{ id }}', params);
+  };
+
+  $scope.$watch(() => this.filter, () => {
+    fetchObjects();
+  });
+}
diff --git a/src/core_plugins/kibana/public/visualize/styles/main.less b/src/core_plugins/kibana/public/visualize/styles/main.less
index e14b6d8d5e010..4687f38c8edfe 100644
--- a/src/core_plugins/kibana/public/visualize/styles/main.less
+++ b/src/core_plugins/kibana/public/visualize/styles/main.less
@@ -2,56 +2,48 @@
 @import (reference) "~ui/styles/bootstrap/list-group";
 @import (reference) "~ui/styles/list-group-menu";
 
-/**
- * 1. Push down the breadcrumbs a bit.
- */
-.vis-wizard {
-  margin: 0;
-  padding: 12px 0 0; // 1
+.wizard-sub-title {
+  margin-top: 0px;
+  margin-bottom: 8px;
+  padding: 0px 5px;
 }
 
-  .wizard-sub-title {
-    margin-top: 0px;
-    margin-bottom: 8px;
-    padding: 0px 5px;
-  }
+.wizard-type {
+  flex: 1;
 
-  .wizard-type {
-    flex: 1;
+  // TODO: When we migrate off Bootstrap, we can eliminate these "mixins".
+  .list-group-item();
+  .list-group-menu .list-group-menu-item();
 
-    // TODO: When we migrate off Bootstrap, we can eliminate these "mixins".
-    .list-group-item();
-    .list-group-menu .list-group-menu-item();
+  border: none;
+  border-radius: 0;
+  background-color: @kibanaGray6;
+}
 
-    border: none;
-    border-radius: 0;
-    background-color: @kibanaGray6;
+  .wizard-type-heading {
+    flex: 0 0 200px;
+    display: flex;
+    align-items: center;
+    font-size: 1.2em;
   }
 
-    .wizard-type-heading {
-      flex: 0 0 200px;
-      display: flex;
-      align-items: center;
-      font-size: 1.2em;
+    .wizard-type-heading-icon {
+      flex: 0 0 auto;
+      margin-right: @padding-base-horizontal;
+      font-size: 1.5em;
+      text-align: center;
+      color: @saved-object-finder-icon-color;
     }
 
-      .wizard-type-heading-icon {
-        flex: 0 0 auto;
-        margin-right: @padding-base-horizontal;
-        font-size: 1.5em;
-        text-align: center;
-        color: @saved-object-finder-icon-color;
-      }
-
-      .wizard-type-heading-text {
-        flex: 1 0 auto;
-      }
-
-    .wizard-type-description {
-      flex: 1 1 auto;
-      color: @wizard-vis-type-description-color;
+    .wizard-type-heading-text {
+      flex: 1 0 auto;
     }
 
+  .wizard-type-description {
+    flex: 1 1 auto;
+    color: @wizard-vis-type-description-color;
+  }
+
 @media (min-width: @screen-lg) {
   .wizard {
     padding: 0;
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
index 1604638599417..f4c69bf82cdc7 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -1,10 +1,24 @@
-<div class="container-fluid vis-wizard">
-  <div class="visualizeWizardBreadcrumbs">
-    <bread-crumbs></bread-crumbs>
+<!-- Local nav. -->
+<kbn-top-nav name="visualize" no-menu-extensions>
+  <!-- Transcluded elements. -->
+  <div data-transclude-slots>
+    <!-- Breadcrumbs. -->
+    <bread-crumbs
+      data-transclude-slot="topLeftCorner"
+    ></bread-crumbs>
   </div>
+</kbn-top-nav>
+
+<div class="kuiViewContent kuiViewContent--constrainedWidth">
+  <!-- Header -->
+  <div class="kuiViewContentItem kuiSubHeader">
+    <h1 class="kuiTitle">
+      Select visualization type
+    </h1>
+  </div>
+
   <div class="wizard">
     <div class="wizard-column">
-      <h3 class="wizard-sub-title">Create New Visualization</h3>
       <div class="wizard-row">
         <a
           class="wizard-type"
@@ -23,13 +37,5 @@ <h4 class="wizard-type-heading-text">{{type.title}}</h4>
         </a>
       </div>
     </div>
-    <div class="wizard-column">
-      <h3 class="wizard-sub-title">Or, Open a Saved Visualization</h3>
-      <saved-object-finder
-        title="Saved Visualizations"
-        type="visualizations"
-        class="wizard-row"
-      ></saved-object-finder>
-    </div>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
index a810af180b163..2afb75122a333 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_2.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
@@ -1,7 +1,15 @@
-<div class="container-fluid vis-wizard">
-  <div class="visualizeWizardBreadcrumbs">
-    <bread-crumbs></bread-crumbs>
+<!-- Local nav. -->
+<kbn-top-nav name="visualize" no-menu-extensions>
+  <!-- Transcluded elements. -->
+  <div data-transclude-slots>
+    <!-- Breadcrumbs. -->
+    <bread-crumbs
+      data-transclude-slot="topLeftCorner"
+    ></bread-crumbs>
   </div>
+</kbn-top-nav>
+
+<div class="kuiViewContent kuiViewContent--constrainedWidth">
   <div class="wizard">
     <div class="wizard-column wizard-column--small">
       <h3 class="wizard-sub-title">From a New Search, Select Index</h3>
diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.js b/src/ui/public/kbn_top_nav/kbn_top_nav.js
index 2d4cd3ef91476..2003ccb162c4f 100644
--- a/src/ui/public/kbn_top_nav/kbn_top_nav.js
+++ b/src/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -99,9 +99,10 @@ module.directive('kbnTopNav', function (Private) {
         });
       });
 
-      const extensions = getNavbarExtensions($attrs.name);
-
       let controls = _.get($scope, $attrs.config, []);
+      const noMenuExtensions = $attrs.hasOwnProperty('noMenuExtensions');
+      const extensions = noMenuExtensions ? [] : getNavbarExtensions($attrs.name);
+
       if (controls instanceof KbnTopNavController) {
         controls.addItems(extensions);
       } else {

From 1dbffd1f9e9c165cd27d24f1ed43d779fa90e95f Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 21 Dec 2016 17:38:35 -0800
Subject: [PATCH 03/31] Add kuiIcon--basic and support icons in Table
 component. Display icons in Visualize landing page.

---
 .../visualize/landing/visualize_landing.html       |  9 +++++++++
 .../kibana/public/visualize/wizard/wizard.js       |  1 -
 .../kibana/public/visualize/wizard/wizard.less     |  6 ------
 .../doc_site/src/views/icon/icon_basic.html        |  1 +
 ui_framework/components/icon/_icon.scss            |  4 ++++
 ui_framework/components/table/_table.scss          |  4 +++-
 .../doc_site/src/views/icon/icon_example.jsx       |  6 ++++++
 .../doc_site/src/views/table/controlled_table.html | 14 ++++++++++++++
 8 files changed, 37 insertions(+), 8 deletions(-)
 delete mode 100644 src/core_plugins/kibana/public/visualize/wizard/wizard.less
 create mode 100644 src/ui_framework/doc_site/src/views/icon/icon_basic.html

diff --git a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
index 9455e1f9aaf5b..08a566a2a9694 100644
--- a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
+++ b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
@@ -79,9 +79,14 @@
               ng-click="landingController.toggleAll()"
             >
           </th>
+
+          <th class="kuiTableHeaderCell kuiTableHeaderCell--icon">
+          </th>
+
           <th class="kuiTableHeaderCell">
             Visualization
           </th>
+
           <th class="kuiTableHeaderCell">
             Type
           </th>
@@ -102,6 +107,10 @@
             >
           </td>
 
+          <td class="kuiTableRowCell kuiTableRowCell--icon">
+            <div class="kuiIcon kuiIcon--basic {{ item.icon }}"></div>
+          </td>
+
           <td class="kuiTableRowCell">
             <div class="kuiTableRowCell__liner">
               <a class="kuiLink" ng-href="{{ item.url }}">
diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
index 0925c4e60142f..3feacf7bb700c 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js
+++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -7,7 +7,6 @@ import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants
 import routes from 'ui/routes';
 import RegistryVisTypesProvider from 'ui/registry/vis_types';
 import uiModules from 'ui/modules';
-import './wizard.less';
 
 const module = uiModules.get('app/visualize', ['kibana/courier']);
 
diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.less b/src/core_plugins/kibana/public/visualize/wizard/wizard.less
deleted file mode 100644
index 5b61fe6a166e3..0000000000000
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.visualizeWizardBreadcrumbs {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 32px;
-}
diff --git a/src/ui_framework/doc_site/src/views/icon/icon_basic.html b/src/ui_framework/doc_site/src/views/icon/icon_basic.html
new file mode 100644
index 0000000000000..40ac6202f8bca
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/icon/icon_basic.html
@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--basic fa-gear"></div>
diff --git a/ui_framework/components/icon/_icon.scss b/ui_framework/components/icon/_icon.scss
index fc8426f4266c3..f104b63059e6a 100644
--- a/ui_framework/components/icon/_icon.scss
+++ b/ui_framework/components/icon/_icon.scss
@@ -30,3 +30,7 @@
 .kuiIcon--inactive {
   color: $inactiveColor;
 }
+
+.kuiIcon--basic {
+  color: #565656;
+}
diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
index 9a5341a30e0c7..acb244bc3de67 100644
--- a/ui_framework/components/table/_table.scss
+++ b/ui_framework/components/table/_table.scss
@@ -88,7 +88,9 @@
  * 2. Align checkbox with text in other cells.
  */
 .kuiTableHeaderCell--checkBox,
-.kuiTableRowCell--checkBox {
+.kuiTableRowCell--checkBox,
+.kuiTableHeaderCell--icon,
+.kuiTableRowCell--icon {
   width: 28px; /* 1 */
   padding-right: 0;
   line-height: 1;
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 3085ea62b0ff1..7aee7f935504f 100644
--- a/ui_framework/doc_site/src/views/icon/icon_example.jsx
+++ b/ui_framework/doc_site/src/views/icon/icon_example.jsx
@@ -17,6 +17,12 @@ export default createExample([{
     <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',
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..a55e1722e59bb 100644
--- a/ui_framework/doc_site/src/views/table/controlled_table.html
+++ b/ui_framework/doc_site/src/views/table/controlled_table.html
@@ -49,6 +49,8 @@
         <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </th>
+        <th class="kuiTableHeaderCell kuiTableHeaderCell--icon">
+        </th>
         <th class="kuiTableHeaderCell">
           Title
         </th>
@@ -69,6 +71,9 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
+        <th class="kuiTableRowCell kuiTableRowCell--icon">
+          <div class="kuiIcon kuiIcon--basic fa-coffee"></div>
+        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Alligator</a>
         </td>
@@ -91,6 +96,9 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
+        <th class="kuiTableRowCell kuiTableRowCell--icon">
+          <div class="kuiIcon kuiIcon--basic fa-bomb"></div>
+        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Boomerang</a>
         </td>
@@ -113,6 +121,9 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
+        <th class="kuiTableRowCell kuiTableRowCell--icon">
+          <div class="kuiIcon kuiIcon--basic fa-trophy"></div>
+        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Celebration</a>
         </td>
@@ -135,6 +146,9 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
+        <th class="kuiTableRowCell kuiTableRowCell--icon">
+          <div class="kuiIcon kuiIcon--basic fa-child"></div>
+        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Dog</a>
         </td>

From f69df4c4ba89a3fa62351d689928d85d21072b62 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 21 Dec 2016 17:41:56 -0800
Subject: [PATCH 04/31] Fix bug with vertical alignment in Table cells.

---
 ui_framework/components/table/_table.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
index acb244bc3de67..8bd03c772e454 100644
--- a/ui_framework/components/table/_table.scss
+++ b/ui_framework/components/table/_table.scss
@@ -70,7 +70,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    * > {
+    & > * {
       vertical-align: middle; /* 1 */
     }
   }

From 8ca2faf4591d4a10b3d8ef30b2ba1b1f554ec06c Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 21 Dec 2016 17:46:22 -0800
Subject: [PATCH 05/31] Change Visualize menu items: New goes to landing page,
 Open goes to wizard.

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

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.js b/src/core_plugins/kibana/public/visualize/editor/editor.js
index 0a4716f102988..159ff5e01b98e 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.js
@@ -106,7 +106,7 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
   $scope.topNavMenu = [{
     key: 'new',
     description: 'New Visualization',
-    run: function () { kbnUrl.change('/visualize', {}); },
+    run: function () { kbnUrl.change('/visualize/step/1', {}); },
     testId: 'visualizeNewButton',
   }, {
     key: 'save',
@@ -116,7 +116,7 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
   }, {
     key: 'open',
     description: 'Open Saved Visualization',
-    template: require('plugins/kibana/visualize/editor/panels/load.html'),
+    run: function () { kbnUrl.change('/visualize', {}); },
     testId: 'visualizeOpenButton',
   }, {
     key: 'share',

From e674f6c315849542fbd1c9f1deac37aa6422d22b Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 23 Dec 2016 13:46:21 -0800
Subject: [PATCH 06/31] Move visualize/landing route to live at visualize/
 instead.

---
 .../kibana/public/visualize/index.js          |  7 +++--
 .../public/visualize/landing/landing.js       | 11 --------
 .../visualize_listing.html}                   | 28 +++++++++----------
 .../visualize_listing.js}                     |  2 +-
 4 files changed, 20 insertions(+), 28 deletions(-)
 delete mode 100644 src/core_plugins/kibana/public/visualize/landing/landing.js
 rename src/core_plugins/kibana/public/visualize/{landing/visualize_landing.html => listing/visualize_listing.html} (82%)
 rename src/core_plugins/kibana/public/visualize/{landing/visualize_landing.js => listing/visualize_listing.js} (97%)

diff --git a/src/core_plugins/kibana/public/visualize/index.js b/src/core_plugins/kibana/public/visualize/index.js
index 21154c7ca46b6..e362b15f771ee 100644
--- a/src/core_plugins/kibana/public/visualize/index.js
+++ b/src/core_plugins/kibana/public/visualize/index.js
@@ -1,6 +1,5 @@
 import 'plugins/kibana/visualize/styles/main.less';
 import 'plugins/kibana/visualize/editor/editor';
-import 'plugins/kibana/visualize/landing/landing';
 import 'plugins/kibana/visualize/wizard/wizard';
 import 'plugins/kibana/visualize/editor/add_bucket_agg';
 import 'plugins/kibana/visualize/editor/agg';
@@ -19,13 +18,17 @@ import 'plugins/kibana/visualize/saved_visualizations/_saved_vis';
 import 'plugins/kibana/visualize/saved_visualizations/saved_visualizations';
 import uiRoutes from 'ui/routes';
 
+import visualizeListingTemplate from './listing/visualize_listing.html';
+import { VisualizeListingController } from './listing/visualize_listing';
 
 uiRoutes
 .defaults(/visualize/, {
   requireDefaultIndex: true
 })
 .when('/visualize', {
-  redirectTo: '/visualize/landing'
+  template: visualizeListingTemplate,
+  controller: VisualizeListingController,
+  controllerAs: 'listingController',
 });
 
 // preloading
diff --git a/src/core_plugins/kibana/public/visualize/landing/landing.js b/src/core_plugins/kibana/public/visualize/landing/landing.js
deleted file mode 100644
index bd563b0aa00e5..0000000000000
--- a/src/core_plugins/kibana/public/visualize/landing/landing.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import routes from 'ui/routes';
-import modules from 'ui/modules';
-import visualizeLandingTemplate from './visualize_landing.html';
-import { VisualizeLandingController } from './visualize_landing';
-
-routes
-.when('/visualize/landing', {
-  template: visualizeLandingTemplate,
-  controller: VisualizeLandingController,
-  controllerAs: 'landingController',
-});
diff --git a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
similarity index 82%
rename from src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
rename to src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
index 08a566a2a9694..df487b7734716 100644
--- a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -25,7 +25,7 @@
             type="text"
             placeholder="Search..."
             aria-label="Filter"
-            ng-model="landingController.filter"
+            ng-model="listingController.filter"
           >
         </div>
       </div>
@@ -34,10 +34,10 @@
         <!-- Bulk delete button -->
         <button
           class="kuiButton kuiButton--danger kuiButton--iconText"
-          confirm-click="landingController.deleteSelectedItems()"
+          confirm-click="listingController.deleteSelectedItems()"
           confirmation="Are you sure you want to delete the selected visualizations? This action is irreversible!"
           aria-label="Delete selected objects"
-          ng-hide="landingController.getSelectedItemsCount() === 0"
+          ng-hide="listingController.getSelectedItemsCount() === 0"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
           Delete
@@ -48,7 +48,7 @@
           class="kuiButton kuiButton--primary kuiButton--iconText"
           href="#/visualize/step/1"
           aria-label="Create new visualization"
-          ng-hide="landingController.getSelectedItemsCount() > 0"
+          ng-hide="listingController.getSelectedItemsCount() > 0"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
           Create visualization
@@ -61,22 +61,22 @@
     </div>
 
     <!-- NoResults -->
-    <div class="kuiPanel kuiPanel--centered" ng-if="!landingController.items.length">
+    <div class="kuiPanel kuiPanel--centered" ng-if="!listingController.items.length">
       <div class="kuiNoResults">
         No visualizations matched your search.
       </div>
     </div>
 
     <!-- Table -->
-    <table class="kuiTable" ng-if="landingController.items.length">
+    <table class="kuiTable" ng-if="listingController.items.length">
       <thead>
         <tr>
           <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
             <input
               type="checkbox"
               class="kuiCheckBox"
-              ng-checked="landingController.areAllItemsChecked()"
-              ng-click="landingController.toggleAll()"
+              ng-checked="listingController.areAllItemsChecked()"
+              ng-click="listingController.toggleAll()"
             >
           </th>
 
@@ -95,15 +95,15 @@
 
       <tbody>
         <tr
-          ng-repeat="item in landingController.items track by item.id | orderBy:'title'"
+          ng-repeat="item in listingController.items track by item.id | orderBy:'title'"
           class="kuiTableRow"
         >
           <td class="kuiTableRowCell kuiTableRowCell--checkBox">
             <input
               type="checkbox"
               class="kuiCheckBox"
-              ng-click="landingController.toggleItem(item)"
-              ng-checked="landingController.isItemChecked(item)"
+              ng-click="listingController.toggleItem(item)"
+              ng-checked="listingController.isItemChecked(item)"
             >
           </td>
 
@@ -119,7 +119,7 @@
 
               <button
                 class="kuiMicroButton kuiTableRowHoverReveal"
-                ng-click="landingController.edit(item)"
+                ng-click="listingController.edit(item)"
                 aria-label="Edit"
                 tooltip="Edit object"
               >
@@ -144,8 +144,8 @@
     <!-- ToolBarFooter -->
     <div class="kuiToolBarFooter">
       <div class="kuiToolBarFooterSection">
-        <div class="kuiToolBarText" ng-hide="landingController.getSelectedItemsCount() === 0">
-          {{ landingController.getSelectedItemsCount() }} selected
+        <div class="kuiToolBarText" ng-hide="listingController.getSelectedItemsCount() === 0">
+          {{ listingController.getSelectedItemsCount() }} selected
         </div>
       </div>
       <div class="kuiToolBarFooterSection">
diff --git a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
similarity index 97%
rename from src/core_plugins/kibana/public/visualize/landing/visualize_landing.js
rename to src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
index e94fd3154dcce..240898e63033b 100644
--- a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -1,6 +1,6 @@
 import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
 
-export function VisualizeLandingController(
+export function VisualizeListingController(
   $scope,
   kbnUrl,
   Notifier,

From b129af5f0598fb1d435930d18d3f7d9718d45671 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 23 Dec 2016 13:48:11 -0800
Subject: [PATCH 07/31] Refactor Visualize Wizard templates to use import
 syntax.

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

diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
index 3feacf7bb700c..e7c33d4857a84 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js
+++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -7,6 +7,8 @@ import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants
 import routes from 'ui/routes';
 import RegistryVisTypesProvider from 'ui/registry/vis_types';
 import uiModules from 'ui/modules';
+import visualizeWizardStep1Template from './step_1.html';
+import visualizeWizardStep2Template from './step_2.html';
 
 const module = uiModules.get('app/visualize', ['kibana/courier']);
 
@@ -14,7 +16,7 @@ const module = uiModules.get('app/visualize', ['kibana/courier']);
 /** Wizard Step 1
 /********/
 routes.when('/visualize/step/1', {
-  template: require('plugins/kibana/visualize/wizard/step_1.html'),
+  template: visualizeWizardStep1Template,
   controller: 'VisualizeWizardStep1',
 });
 
@@ -40,7 +42,7 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
 /** Wizard Step 2
 /********/
 routes.when('/visualize/step/2', {
-  template: require('plugins/kibana/visualize/wizard/step_2.html'),
+  template: visualizeWizardStep2Template,
   controller: 'VisualizeWizardStep2',
   resolve: {
     indexPatternIds: function (courier) {

From 94afb6f3d41ba53304a64ed92c65a1eb6ea6022a Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 23 Dec 2016 14:00:36 -0800
Subject: [PATCH 08/31] Set kuiViewContent width to 100% to avoid it shrink
 wrapping its content.

---
 src/ui/public/styles/base.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 1c28e5bd95f32..4da92ce29b6d4 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -621,6 +621,7 @@ fieldset {
 .kuiViewContent {
   padding-top: 20px;
   padding-bottom: 20px;
+  width: 100%;
 }
 
 .kuiViewContent--constrainedWidth {

From 6a66f6f5c986ee5ecb9e0b95db28b5cc221c3f7e Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 23 Dec 2016 14:04:49 -0800
Subject: [PATCH 09/31] Move ToolBar buttons to the right side. Remove labels
 and add tooltips.

---
 .../visualize/listing/visualize_listing.html   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

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 df487b7734716..f6046de9b0980 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -30,34 +30,34 @@
         </div>
       </div>
 
+      <div class="kuiToolBarSection">
+        <!-- We need an empty section for the buttons to be positioned consistently. -->
+      </div>
+
       <div class="kuiToolBarSection">
         <!-- Bulk delete button -->
         <button
-          class="kuiButton kuiButton--danger kuiButton--iconText"
+          class="kuiButton kuiButton--danger"
           confirm-click="listingController.deleteSelectedItems()"
           confirmation="Are you sure you want to delete the selected visualizations? This action is irreversible!"
           aria-label="Delete selected objects"
           ng-hide="listingController.getSelectedItemsCount() === 0"
+          tooltip="Delete selected visualizations"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
-          Delete
         </button>
 
         <!-- Create visualization button -->
         <a
-          class="kuiButton kuiButton--primary kuiButton--iconText"
+          class="kuiButton kuiButton--primary"
           href="#/visualize/step/1"
           aria-label="Create new visualization"
           ng-hide="listingController.getSelectedItemsCount() > 0"
+          tooltip="Create new visualization"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
-          Create visualization
         </a>
       </div>
-
-      <div class="kuiToolBarSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
-      </div>
     </div>
 
     <!-- NoResults -->
@@ -84,7 +84,7 @@
           </th>
 
           <th class="kuiTableHeaderCell">
-            Visualization
+            Name
           </th>
 
           <th class="kuiTableHeaderCell">

From 5a720c9fc9838136b0b1c6ecd9dadc6a6264f08c Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 23 Dec 2016 15:47:52 -0800
Subject: [PATCH 10/31] Fix functional tests for Visualize, to work with new
 landing page.

---
 .../kibana/public/visualize/wizard/step_1.html     |  2 +-
 test/functional/apps/visualize/_area_chart.js      |  2 +-
 test/functional/apps/visualize/_chart_types.js     |  2 +-
 test/functional/apps/visualize/_data_table.js      |  2 +-
 test/functional/apps/visualize/_line_chart.js      |  2 +-
 test/functional/apps/visualize/_metric_chart.js    |  2 +-
 test/functional/apps/visualize/_pie_chart.js       |  2 +-
 test/functional/apps/visualize/_tile_map.js        |  2 +-
 .../apps/visualize/_vertical_bar_chart.js          |  2 +-
 test/support/page_objects/common.js                |  9 +++++++++
 test/support/page_objects/visualize_page.js        | 14 ++------------
 11 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
index f4c69bf82cdc7..ce3b562e22eaa 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -31,7 +31,7 @@ <h1 class="kuiTitle">
               class="wizard-type-heading-icon fa fa-fw"
               ng-class="type.icon"
             ></i>
-            <h4 class="wizard-type-heading-text">{{type.title}}</h4>
+            <h4 data-test-subj="visualizeWizardChartTypeTitle" class="wizard-type-heading-text">{{type.title}}</h4>
           </div>
           <p class="wizard-type-description">{{type.description}}</p>
         </a>
diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js
index 908462a993bdb..fc84ecb148f96 100644
--- a/test/functional/apps/visualize/_area_chart.js
+++ b/test/functional/apps/visualize/_area_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     const toTime = '2015-09-23 18:31:44.000';
 
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize')
+    return PageObjects.common.navigateToUrl('visualize', 'step/1')
     .then(function () {
       PageObjects.common.debug('clickAreaChart');
       return PageObjects.visualize.clickAreaChart();
diff --git a/test/functional/apps/visualize/_chart_types.js b/test/functional/apps/visualize/_chart_types.js
index 374b53c8f8e62..07b78c50703fd 100644
--- a/test/functional/apps/visualize/_chart_types.js
+++ b/test/functional/apps/visualize/_chart_types.js
@@ -10,7 +10,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize');
+    return PageObjects.common.navigateToUrl('visualize', 'step/1');
   });
 
   bdd.describe('chart types', function indexPatternCreation() {
diff --git a/test/functional/apps/visualize/_data_table.js b/test/functional/apps/visualize/_data_table.js
index 9d5fbe3c270ba..b8836f7dc2184 100644
--- a/test/functional/apps/visualize/_data_table.js
+++ b/test/functional/apps/visualize/_data_table.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize')
+    return PageObjects.common.navigateToUrl('visualize', 'step/1')
     .then(function () {
       PageObjects.common.debug('clickDataTable');
       return PageObjects.visualize.clickDataTable();
diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart.js
index 34cc5f88672ac..e760f046ce83b 100644
--- a/test/functional/apps/visualize/_line_chart.js
+++ b/test/functional/apps/visualize/_line_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     const toTime = '2015-09-23 18:31:44.000';
 
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize')
+    return PageObjects.common.navigateToUrl('visualize', 'step/1')
     .then(function () {
       PageObjects.common.debug('clickLineChart');
       return PageObjects.visualize.clickLineChart();
diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js
index dc861efb07bda..ab2da7edf0fbc 100644
--- a/test/functional/apps/visualize/_metric_chart.js
+++ b/test/functional/apps/visualize/_metric_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize')
+    return PageObjects.common.navigateToUrl('visualize', 'step/1')
     .then(function () {
       PageObjects.common.debug('clickMetric');
       return PageObjects.visualize.clickMetric();
diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.js
index 5c0770f2e9556..e053bb1f908bc 100644
--- a/test/functional/apps/visualize/_pie_chart.js
+++ b/test/functional/apps/visualize/_pie_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     const toTime = '2015-09-23 18:31:44.000';
 
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize')
+    return PageObjects.common.navigateToUrl('visualize', 'step/1')
     .then(function () {
       PageObjects.common.debug('clickPieChart');
       return PageObjects.visualize.clickPieChart();
diff --git a/test/functional/apps/visualize/_tile_map.js b/test/functional/apps/visualize/_tile_map.js
index e0c61592cc151..2f5cd2f82933d 100644
--- a/test/functional/apps/visualize/_tile_map.js
+++ b/test/functional/apps/visualize/_tile_map.js
@@ -15,7 +15,7 @@ bdd.describe('visualize app', function describeIndexTests() {
   bdd.before(function () {
 
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize')
+    return PageObjects.common.navigateToUrl('visualize', 'step/1')
     .then(function () {
       PageObjects.common.debug('clickTileMap');
       return PageObjects.visualize.clickTileMap();
diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js
index 2b702fa929c4d..c474f20d9d9f5 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize')
+    return PageObjects.common.navigateToUrl('visualize', 'step/1')
     .then(function () {
       PageObjects.common.debug('clickVerticalBarChart');
       return PageObjects.visualize.clickVerticalBarChart();
diff --git a/test/support/page_objects/common.js b/test/support/page_objects/common.js
index 073c4b0ad979d..287f6ef5e470d 100644
--- a/test/support/page_objects/common.js
+++ b/test/support/page_objects/common.js
@@ -80,6 +80,15 @@ export default class Common {
     return getUrl.baseUrl(config.servers.elasticsearch);
   }
 
+  navigateToUrl(appName, subUrl) {
+    const appConfig = Object.assign({}, config.apps[appName], {
+      // Overwrite the default hash with the URL we really want.
+      hash: `${appName}/${subUrl}`,
+    });
+    const appUrl = getUrl.noAuth(config.servers.kibana, appConfig);
+    return this.remote.get(appUrl);
+  }
+
   navigateToApp(appName, testStatusPage) {
     const self = this;
     const appUrl = getUrl.noAuth(config.servers.kibana, config.apps[appName]);
diff --git a/test/support/page_objects/visualize_page.js b/test/support/page_objects/visualize_page.js
index 22c7b902c4086..2964c5b36d97c 100644
--- a/test/support/page_objects/visualize_page.js
+++ b/test/support/page_objects/visualize_page.js
@@ -82,10 +82,7 @@ export default class VisualizePage {
   }
 
   getChartTypes() {
-
-    return this.remote
-    .setFindTimeout(defaultFindTimeout)
-    .findAllByCssSelector('.wizard-type-heading h4')
+    return PageObjects.common.findAllTestSubjects('visualizeWizardChartTypeTitle')
     .then(function (chartTypes) {
       function getChartType(chart) {
         return chart.getVisibleText();
@@ -379,14 +376,7 @@ export default class VisualizePage {
   // this is for starting on the
   // bottom half of the "Create a new visualization      Step 1" page
   openSavedVisualization(vizName) {
-    const self = this;
-    return self.filterVisByName(vizName)
-    .then(() => {
-      return PageObjects.common.sleep(1000);
-    })
-    .then(function clickDashboardByLinkedText() {
-      return self.clickVisualizationByLinkText(vizName);
-    });
+    return this.clickVisualizationByLinkText(vizName);
   }
 
   getXAxisLabels() {

From b01048892599359220b473521481b88993f97928 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 23 Dec 2016 15:52:24 -0800
Subject: [PATCH 11/31] Remove unused Visualize load menu template.

---
 .../kibana/public/visualize/editor/panels/load.html             | 2 --
 1 file changed, 2 deletions(-)
 delete mode 100644 src/core_plugins/kibana/public/visualize/editor/panels/load.html

diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/load.html b/src/core_plugins/kibana/public/visualize/editor/panels/load.html
deleted file mode 100644
index 82039367f6193..0000000000000
--- a/src/core_plugins/kibana/public/visualize/editor/panels/load.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<div class="kuiLocalDropdownTitle">Open Visualization</div>
-<saved-object-finder type="visualizations"></saved-object-finder>

From a1f737fcf3ce56875fb76abc97d26c3b277fe238 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 3 Jan 2017 11:41:50 -0800
Subject: [PATCH 12/31] Remove Edit link from Visualization listing.

---
 .../public/visualize/listing/visualize_listing.html  | 12 ------------
 1 file changed, 12 deletions(-)

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 f6046de9b0980..cc7db62a61013 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -116,18 +116,6 @@
               <a class="kuiLink" ng-href="{{ item.url }}">
                 {{ item.title }}
               </a>
-
-              <button
-                class="kuiMicroButton kuiTableRowHoverReveal"
-                ng-click="listingController.edit(item)"
-                aria-label="Edit"
-                tooltip="Edit object"
-              >
-                <span
-                  aria-hidden="true"
-                  class="kuiIcon fa-code"
-                ></span>
-              </button>
             </div>
           </td>
 

From ca4adc36bd5b7d0994622de247428cfdfaa7c27b Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 4 Jan 2017 16:18:35 -0800
Subject: [PATCH 13/31] Disable timepicker in Visualization listing.

---
 .../visualize/listing/visualize_listing.html    |  2 +-
 .../visualize/listing/visualize_listing.js      | 17 ++++++++++-------
 .../kibana/public/visualize/wizard/step_1.html  |  6 +++---
 .../kibana/public/visualize/wizard/step_2.html  | 12 ++++++------
 src/ui/public/kbn_top_nav/kbn_top_nav.js        |  3 +--
 test/support/page_objects/visualize_page.js     |  2 --
 6 files changed, 21 insertions(+), 21 deletions(-)

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 cc7db62a61013..27c800762a09d 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -1,5 +1,5 @@
 <!-- Local nav. -->
-<kbn-top-nav name="visualize" no-menu-extensions>
+<kbn-top-nav name="visualize">
   <!-- Transcluded elements. -->
   <div data-transclude-slots>
     <!-- Title. -->
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 240898e63033b..7ee61742b3084 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -4,8 +4,11 @@ export function VisualizeListingController(
   $scope,
   kbnUrl,
   Notifier,
-  Private
+  Private,
+  timefilter
 ) {
+  timefilter.enabled = false;
+
   // TODO: Extract this into an external service.
   const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
   const visualizationService = services.visualizations;
@@ -56,11 +59,11 @@ export function VisualizeListingController(
     const selectedIds = selectedItems.map(item => item.id);
 
     visualizationService.delete(selectedIds)
-    .then(fetchObjects)
-    .then(() => {
-      selectedItems = [];
-    })
-    .catch(error => notify.error(error));
+      .then(fetchObjects)
+      .then(() => {
+        selectedItems = [];
+      })
+      .catch(error => notify.error(error));
   };
 
   this.open = function open(item) {
@@ -69,7 +72,7 @@ export function VisualizeListingController(
 
   this.edit = function edit(item) {
     const params = {
-      // TODO: Get this value from somewhere instead of hardcodign it.
+      // TODO: Get this value from somewhere instead of hardcoding it.
       service: 'savedVisualizations',
       id: item.id
     };
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
index ce3b562e22eaa..076254ad41f91 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -1,5 +1,5 @@
 <!-- Local nav. -->
-<kbn-top-nav name="visualize" no-menu-extensions>
+<kbn-top-nav name="visualize">
   <!-- Transcluded elements. -->
   <div data-transclude-slots>
     <!-- Breadcrumbs. -->
@@ -26,11 +26,11 @@ <h1 class="kuiTitle">
           ng-href="{{ visTypeUrl(type) }}"
         >
           <div class="wizard-type-heading">
-            <i
+            <span
               aria-hidden="true"
               class="wizard-type-heading-icon fa fa-fw"
               ng-class="type.icon"
-            ></i>
+            ></span>
             <h4 data-test-subj="visualizeWizardChartTypeTitle" class="wizard-type-heading-text">{{type.title}}</h4>
           </div>
           <p class="wizard-type-description">{{type.description}}</p>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
index 2afb75122a333..8000b70c57faf 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_2.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
@@ -1,5 +1,5 @@
 <!-- Local nav. -->
-<kbn-top-nav name="visualize" no-menu-extensions>
+<kbn-top-nav name="visualize">
   <!-- Transcluded elements. -->
   <div data-transclude-slots>
     <!-- Breadcrumbs. -->
@@ -24,11 +24,11 @@ <h3 class="wizard-sub-title">From a New Search, Select Index</h3>
       <h3 class="wizard-sub-title">Or, From a Saved Search</h3>
       <!-- Saved searches -->
       <saved-object-finder
-          title="Saved Searches"
-          type="searches"
-          class="wizard-row"
-          make-url="step2WithSearchUrl"
-        ></saved-object-finder>
+        title="Saved Searches"
+        type="searches"
+        class="wizard-row"
+        make-url="step2WithSearchUrl"
+      ></saved-object-finder>
     </div>
   </div>
 </div>
diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.js b/src/ui/public/kbn_top_nav/kbn_top_nav.js
index 2003ccb162c4f..840b5a1cca090 100644
--- a/src/ui/public/kbn_top_nav/kbn_top_nav.js
+++ b/src/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -99,9 +99,8 @@ module.directive('kbnTopNav', function (Private) {
         });
       });
 
+      const extensions = getNavbarExtensions($attrs.name);
       let controls = _.get($scope, $attrs.config, []);
-      const noMenuExtensions = $attrs.hasOwnProperty('noMenuExtensions');
-      const extensions = noMenuExtensions ? [] : getNavbarExtensions($attrs.name);
 
       if (controls instanceof KbnTopNavController) {
         controls.addItems(extensions);
diff --git a/test/support/page_objects/visualize_page.js b/test/support/page_objects/visualize_page.js
index 2964c5b36d97c..6a419b15aa6fe 100644
--- a/test/support/page_objects/visualize_page.js
+++ b/test/support/page_objects/visualize_page.js
@@ -373,8 +373,6 @@ export default class VisualizePage {
     });
   }
 
-  // this is for starting on the
-  // bottom half of the "Create a new visualization      Step 1" page
   openSavedVisualization(vizName) {
     return this.clickVisualizationByLinkText(vizName);
   }

From 50e2da76d3c1005a71012773867bdbf5bd0ab26d Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 17 Jan 2017 08:57:31 -0800
Subject: [PATCH 14/31] Add basic Icon example. Fix Visualize Wizard titles and
 layout.

---
 ui_framework/dist/ui_framework.css                    | 9 +++++++--
 ui_framework/doc_site/src/views/icon/icon_example.jsx | 7 -------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index dad77d110a2f5..76891ce3fa358 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -542,6 +542,9 @@ body {
 .kuiIcon--inactive {
   color: #c3c3c3; }
 
+.kuiIcon--basic {
+  color: #565656; }
+
 .kuiInfoPanel {
   padding: 14px 20px 18px;
   line-height: 1.5;
@@ -1407,7 +1410,7 @@ body {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis; }
-  .kuiTableRowCell__liner * > {
+  .kuiTableRowCell__liner > * {
     vertical-align: middle;
     /* 1 */ }
 
@@ -1421,7 +1424,9 @@ body {
  * 2. Align checkbox with text in other cells.
  */
 .kuiTableHeaderCell--checkBox,
-.kuiTableRowCell--checkBox {
+.kuiTableRowCell--checkBox,
+.kuiTableHeaderCell--icon,
+.kuiTableRowCell--icon {
   width: 28px;
   /* 1 */
   padding-right: 0;
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..f9a01a62f126a 100644
--- a/ui_framework/doc_site/src/views/icon/icon_example.jsx
+++ b/ui_framework/doc_site/src/views/icon/icon_example.jsx
@@ -17,13 +17,6 @@ export default createExample([{
     <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: (

From 56252644f221d5dfce1208a167c0fe2bc06cdc7b Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 1 Feb 2017 10:19:49 -0800
Subject: [PATCH 15/31] Remove icon cells from Table component. Fix Visualize
 landing table header bug and type icon position.

---
 .../visualize/listing/visualize_listing.html     | 16 ++++++----------
 ui_framework/components/table/_table.scss        |  4 +---
 ui_framework/dist/ui_framework.css               |  4 +---
 .../src/views/table/controlled_table.html        | 14 --------------
 4 files changed, 8 insertions(+), 30 deletions(-)

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 27c800762a09d..7caa22b6139da 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -41,7 +41,7 @@
           confirm-click="listingController.deleteSelectedItems()"
           confirmation="Are you sure you want to delete the selected visualizations? This action is irreversible!"
           aria-label="Delete selected objects"
-          ng-hide="listingController.getSelectedItemsCount() === 0"
+          ng-if="listingController.getSelectedItemsCount() > 0"
           tooltip="Delete selected visualizations"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
@@ -52,7 +52,7 @@
           class="kuiButton kuiButton--primary"
           href="#/visualize/step/1"
           aria-label="Create new visualization"
-          ng-hide="listingController.getSelectedItemsCount() > 0"
+          ng-if="listingController.getSelectedItemsCount() === 0"
           tooltip="Create new visualization"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
@@ -80,9 +80,6 @@
             >
           </th>
 
-          <th class="kuiTableHeaderCell kuiTableHeaderCell--icon">
-          </th>
-
           <th class="kuiTableHeaderCell">
             Name
           </th>
@@ -107,10 +104,6 @@
             >
           </td>
 
-          <td class="kuiTableRowCell kuiTableRowCell--icon">
-            <div class="kuiIcon kuiIcon--basic {{ item.icon }}"></div>
-          </td>
-
           <td class="kuiTableRowCell">
             <div class="kuiTableRowCell__liner">
               <a class="kuiLink" ng-href="{{ item.url }}">
@@ -121,7 +114,10 @@
 
           <td class="kuiTableRowCell">
             <div class="kuiTableRowCell__liner">
-              {{ item.type.title }}
+              <span class="kuiStatusText">
+                <span class="kuiStatusText__icon kuiIcon {{ item.icon }}"></span>
+                {{ item.type.title }}
+              </span>
             </div>
           </td>
         </tr>
diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
index 8bd03c772e454..66402eb89aa6a 100644
--- a/ui_framework/components/table/_table.scss
+++ b/ui_framework/components/table/_table.scss
@@ -88,9 +88,7 @@
  * 2. Align checkbox with text in other cells.
  */
 .kuiTableHeaderCell--checkBox,
-.kuiTableRowCell--checkBox,
-.kuiTableHeaderCell--icon,
-.kuiTableRowCell--icon {
+.kuiTableRowCell--checkBox {
   width: 28px; /* 1 */
   padding-right: 0;
   line-height: 1;
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 76891ce3fa358..87b70556c9e44 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1424,9 +1424,7 @@ body {
  * 2. Align checkbox with text in other cells.
  */
 .kuiTableHeaderCell--checkBox,
-.kuiTableRowCell--checkBox,
-.kuiTableHeaderCell--icon,
-.kuiTableRowCell--icon {
+.kuiTableRowCell--checkBox {
   width: 28px;
   /* 1 */
   padding-right: 0;
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 a55e1722e59bb..93dad0f2700ad 100644
--- a/ui_framework/doc_site/src/views/table/controlled_table.html
+++ b/ui_framework/doc_site/src/views/table/controlled_table.html
@@ -49,8 +49,6 @@
         <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </th>
-        <th class="kuiTableHeaderCell kuiTableHeaderCell--icon">
-        </th>
         <th class="kuiTableHeaderCell">
           Title
         </th>
@@ -71,9 +69,6 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
-        <th class="kuiTableRowCell kuiTableRowCell--icon">
-          <div class="kuiIcon kuiIcon--basic fa-coffee"></div>
-        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Alligator</a>
         </td>
@@ -96,9 +91,6 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
-        <th class="kuiTableRowCell kuiTableRowCell--icon">
-          <div class="kuiIcon kuiIcon--basic fa-bomb"></div>
-        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Boomerang</a>
         </td>
@@ -121,9 +113,6 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
-        <th class="kuiTableRowCell kuiTableRowCell--icon">
-          <div class="kuiIcon kuiIcon--basic fa-trophy"></div>
-        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Celebration</a>
         </td>
@@ -146,9 +135,6 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
-        <th class="kuiTableRowCell kuiTableRowCell--icon">
-          <div class="kuiIcon kuiIcon--basic fa-child"></div>
-        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Dog</a>
         </td>

From 93c9533beb393f9a2e23f4e8a5aab839986a6a22 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 1 Feb 2017 16:41:07 -0800
Subject: [PATCH 16/31] Change Visualize route names. Add omitPages attribute
 to breadcrumbs directive. Make Visualize breadcrumbs into links.

---
 .../kibana/public/visualize/editor/editor.html | 18 ++++++++----------
 .../kibana/public/visualize/editor/editor.js   |  4 ++++
 .../visualize/listing/visualize_listing.html   |  4 ++--
 .../visualize/listing/visualize_listing.js     | 14 ++------------
 .../kibana/public/visualize/wizard/step_1.html |  1 +
 .../kibana/public/visualize/wizard/step_2.html |  1 +
 .../kibana/public/visualize/wizard/wizard.js   |  6 +++---
 .../kbn_top_nav/bread_crumbs/bread_crumbs.js   | 11 +++++++++++
 8 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index a782c53106dc6..05088606bb248 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -3,16 +3,14 @@
   <kbn-top-nav name="visualize" config="topNavMenu">
     <!-- Transcluded elements. -->
     <div data-transclude-slots>
-      <!-- Title. -->
-      <div
+      <!-- Breadcrumbs. -->
+      <bread-crumbs
         data-transclude-slot="topLeftCorner"
-        class="kuiLocalTitle"
-      >
-        <span
-          ng-show="savedVis.id"
-          ng-bind="savedVis.lastSavedTitle"
-        ></span>
-      </div>
+        title="getVisualizationTitle()"
+        use-links="true"
+        omit-current-page="true"
+        omit-pages="['edit']"
+      ></bread-crumbs>
 
       <!-- Search. -->
       <div
@@ -29,7 +27,7 @@
             ng-dblclick="unlink()"
             tooltip="Double click to unlink from Saved Search"
           >
-            <i aria-hidden="true" class="fa fa-chain-broken"></i>
+            <span aria-hidden="true" class="fa fa-chain-broken"></span>
           </a>
         </div>
 
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.js b/src/core_plugins/kibana/public/visualize/editor/editor.js
index 159ff5e01b98e..7d3201a8936b8 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.js
@@ -224,6 +224,10 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
 
     $state.replace();
 
+    $scope.getVisualizationTitle = function getVisualizationTitle() {
+      return savedVis.lastSavedTitle || 'New Visualization';
+    };
+
     $scope.$watch('searchSource.get("index").timeFieldName', function (timeField) {
       timefilter.enabled = !!timeField;
     });
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 7caa22b6139da..988a1f293f347 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -50,7 +50,7 @@
         <!-- Create visualization button -->
         <a
           class="kuiButton kuiButton--primary"
-          href="#/visualize/step/1"
+          href="#/visualize/new"
           aria-label="Create new visualization"
           ng-if="listingController.getSelectedItemsCount() === 0"
           tooltip="Create new visualization"
@@ -106,7 +106,7 @@
 
           <td class="kuiTableRowCell">
             <div class="kuiTableRowCell__liner">
-              <a class="kuiLink" ng-href="{{ item.url }}">
+              <a class="kuiLink" ng-href="{{ listingController.getUrlForItem(item) }}">
                 {{ item.title }}
               </a>
             </div>
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 7ee61742b3084..0d136b962dd25 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -66,18 +66,8 @@ export function VisualizeListingController(
       .catch(error => notify.error(error));
   };
 
-  this.open = function open(item) {
-    kbnUrl.change(item.url.substr(1));
-  };
-
-  this.edit = function edit(item) {
-    const params = {
-      // TODO: Get this value from somewhere instead of hardcoding it.
-      service: 'savedVisualizations',
-      id: item.id
-    };
-
-    kbnUrl.change('/management/kibana/objects/{{ service }}/{{ id }}', params);
+  this.getUrlForItem = function getUrlForItem(item) {
+    return `#/visualize/edit/${item.id}`;
   };
 
   $scope.$watch(() => this.filter, () => {
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
index 076254ad41f91..7a6fc7907e57d 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -5,6 +5,7 @@
     <!-- Breadcrumbs. -->
     <bread-crumbs
       data-transclude-slot="topLeftCorner"
+      use-links="true"
     ></bread-crumbs>
   </div>
 </kbn-top-nav>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
index 8000b70c57faf..ec924de7be201 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_2.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
@@ -5,6 +5,7 @@
     <!-- Breadcrumbs. -->
     <bread-crumbs
       data-transclude-slot="topLeftCorner"
+      use-links="true"
     ></bread-crumbs>
   </div>
 </kbn-top-nav>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
index e7c33d4857a84..8bb9b28d736f0 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js
+++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -15,7 +15,7 @@ const module = uiModules.get('app/visualize', ['kibana/courier']);
 /********
 /** Wizard Step 1
 /********/
-routes.when('/visualize/step/1', {
+routes.when('/visualize/new', {
   template: visualizeWizardStep1Template,
   controller: 'VisualizeWizardStep1',
 });
@@ -28,7 +28,7 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
 
   $scope.visTypes = Private(RegistryVisTypesProvider);
   $scope.visTypeUrl = function (visType) {
-    const baseUrl = visType.requiresSearch ? '#/visualize/step/2?' : '#/visualize/create?';
+    const baseUrl = visType.requiresSearch ? '#/visualize/new/configure?' : '#/visualize/create?';
     const params = [`type=${encodeURIComponent(visType.name)}`];
     if (addToDashMode) {
       params.push(DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM);
@@ -41,7 +41,7 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
 /********
 /** Wizard Step 2
 /********/
-routes.when('/visualize/step/2', {
+routes.when('/visualize/new/configure', {
   template: visualizeWizardStep2Template,
   controller: 'VisualizeWizardStep2',
   resolve: {
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 f032005490a62..4a155219184dc 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
@@ -11,6 +11,11 @@ module.directive('breadCrumbs', function ($location) {
     replace: true,
     scope: {
       omitCurrentPage: '=',
+      /**
+       * Pages to omit from the breadcrumbs. Should be lower-case.
+       * @type {Array}
+       */
+      omitPages: '=',
       /**
        * Optional title to append at the end of the breadcrumbs. Note that this can't just be
        * 'title', because that will be interpreted by browsers as an actual 'title' HTML attribute.
@@ -32,6 +37,12 @@ module.directive('breadCrumbs', function ($location) {
         $scope.breadcrumbs.pop();
       }
 
+      if ($scope.omitPages) {
+        $scope.breadcrumbs = $scope.breadcrumbs.filter(breadcrumb =>
+          $scope.omitPages.indexOf(breadcrumb.toLowerCase()) === -1
+        );
+      }
+
       if ($scope.useLinks) {
         const url = '#' + $location.path();
         $scope.breadCrumbUrls = getBreadCrumbUrls($scope.breadcrumbs, url);

From f243762d8f9a31054eb45977ec735b428c65aefd Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 1 Feb 2017 17:07:55 -0800
Subject: [PATCH 17/31] Remove Open and New menu buttons from Visualize.

---
 .../kibana/public/visualize/editor/editor.js         | 12 +-----------
 test/support/page_objects/visualize_page.js          | 11 +++++------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.js b/src/core_plugins/kibana/public/visualize/editor/editor.js
index 7d3201a8936b8..473cd9bb98942 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.js
@@ -104,20 +104,10 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
   const searchSource = savedVis.searchSource;
 
   $scope.topNavMenu = [{
-    key: 'new',
-    description: 'New Visualization',
-    run: function () { kbnUrl.change('/visualize/step/1', {}); },
-    testId: 'visualizeNewButton',
-  }, {
     key: 'save',
     description: 'Save Visualization',
     template: require('plugins/kibana/visualize/editor/panels/save.html'),
     testId: 'visualizeSaveButton',
-  }, {
-    key: 'open',
-    description: 'Open Saved Visualization',
-    run: function () { kbnUrl.change('/visualize', {}); },
-    testId: 'visualizeOpenButton',
   }, {
     key: 'share',
     description: 'Share Visualization',
@@ -225,7 +215,7 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
     $state.replace();
 
     $scope.getVisualizationTitle = function getVisualizationTitle() {
-      return savedVis.lastSavedTitle || 'New Visualization';
+      return savedVis.lastSavedTitle || `${savedVis.title} (unsaved)`;
     };
 
     $scope.$watch('searchSource.get("index").timeFieldName', function (timeField) {
diff --git a/test/support/page_objects/visualize_page.js b/test/support/page_objects/visualize_page.js
index 6a419b15aa6fe..88db2e3ae09d9 100644
--- a/test/support/page_objects/visualize_page.js
+++ b/test/support/page_objects/visualize_page.js
@@ -296,11 +296,6 @@ export default class VisualizePage {
     });
   }
 
-  clickNewVisualization() {
-    return PageObjects.common.findTestSubject('visualizeNewButton')
-    .click();
-  }
-
   saveVisualization(vizName) {
     return PageObjects.common.findTestSubject('visualizeSaveButton')
     .click()
@@ -337,7 +332,11 @@ export default class VisualizePage {
   }
 
   clickLoadSavedVisButton() {
-    return PageObjects.common.findTestSubject('visualizeOpenButton')
+    // TODO: Use a test subject selector once we rewrite breadcrumbs to accept each breadcrumb
+    // element as a child instead of building the breadcrumbs dynamically.
+    return self.remote
+      .setFindTimeout(defaultFindTimeout)
+      .findByCssSelector('[href="#/visualize"]')
       .click();
   }
 

From d0325baa9bdb5cce4e067eef55d14c04594ce02d Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 1 Feb 2017 17:14:34 -0800
Subject: [PATCH 18/31] Add ConfirmationModal for deleting visualizations.

---
 .../visualize/listing/visualize_listing.html  |  3 +--
 .../visualize/listing/visualize_listing.js    | 24 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

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 988a1f293f347..6310f5d4af2cd 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -38,10 +38,9 @@
         <!-- Bulk delete button -->
         <button
           class="kuiButton kuiButton--danger"
-          confirm-click="listingController.deleteSelectedItems()"
-          confirmation="Are you sure you want to delete the selected visualizations? This action is irreversible!"
           aria-label="Delete selected objects"
           ng-if="listingController.getSelectedItemsCount() > 0"
+          ng-click="listingController.deleteSelectedItems()"
           tooltip="Delete selected visualizations"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
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 0d136b962dd25..12126892e9d8c 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -2,6 +2,7 @@ import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry'
 
 export function VisualizeListingController(
   $scope,
+  confirmModal,
   kbnUrl,
   Notifier,
   Private,
@@ -56,14 +57,23 @@ export function VisualizeListingController(
   };
 
   this.deleteSelectedItems = function deleteSelectedItems() {
-    const selectedIds = selectedItems.map(item => item.id);
+    const doDelete = () => {
+      const selectedIds = selectedItems.map(item => item.id);
 
-    visualizationService.delete(selectedIds)
-      .then(fetchObjects)
-      .then(() => {
-        selectedItems = [];
-      })
-      .catch(error => notify.error(error));
+      visualizationService.delete(selectedIds)
+        .then(fetchObjects)
+        .then(() => {
+          selectedItems = [];
+        })
+        .catch(error => notify.error(error));
+    };
+
+    confirmModal(
+      'Are you sure you want to delete the selected visualizations? This action is irreversible!',
+      {
+        confirmButtonText: 'Delete',
+        onConfirm: doDelete
+      });
   };
 
   this.getUrlForItem = function getUrlForItem(item) {

From 39ed4248561e6609b5d26e3a7bfb61bdfa8811b3 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 1 Feb 2017 17:21:57 -0800
Subject: [PATCH 19/31] Implement sorting for name and type columns in
 Visualize listing.

---
 .../visualize/listing/visualize_listing.html  | 16 +++++-
 .../visualize/listing/visualize_listing.js    | 57 +++++++++++++++++++
 2 files changed, 70 insertions(+), 3 deletions(-)

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 6310f5d4af2cd..4b93cfb6cdd03 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -79,19 +79,29 @@
             >
           </th>
 
-          <th class="kuiTableHeaderCell">
+          <th class="kuiTableHeaderCell" ng-click="listingController.sortOn('title')">
             Name
+            <span
+              class="kuiIcon"
+              ng-show="listingController.getSortProperty().name === 'title'"
+              ng-class="listingController.isAscending() ? 'fa-caret-up' : 'fa-caret-down'"
+            ></span>
           </th>
 
-          <th class="kuiTableHeaderCell">
+          <th class="kuiTableHeaderCell" ng-click="listingController.sortOn('type')">
             Type
+            <span
+              class="kuiIcon"
+              ng-show="listingController.getSortProperty().name === 'type'"
+              ng-class="listingController.isAscending() ? 'fa-caret-up' : 'fa-caret-down'"
+            ></span>
           </th>
         </tr>
       </thead>
 
       <tbody>
         <tr
-          ng-repeat="item in listingController.items track by item.id | orderBy:'title'"
+          ng-repeat="item in listingController.items track by item.id"
           class="kuiTableRow"
         >
           <td class="kuiTableRowCell kuiTableRowCell--checkBox">
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 12126892e9d8c..273a672da9bce 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -1,4 +1,5 @@
 import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
+import _ from 'lodash';
 
 export function VisualizeListingController(
   $scope,
@@ -21,12 +22,68 @@ export function VisualizeListingController(
     visualizationService.find(this.filter)
     .then(result => {
       this.items = result.hits;
+      this.sortItems();
     });
   };
 
   this.items = [];
   this.filter = '';
 
+  /**
+   * Remember sort direction per property.
+   */
+  this.sortProperties = [{
+    name: 'title',
+    getValue: item => item.title,
+    isSelected: true,
+    isAscending: true,
+  }, {
+    name: 'type',
+    getValue: item => item.type.title,
+    isSelected: false,
+    isAscending: true,
+  }];
+
+  this.getSortProperty = function getSortProperty() {
+    return _.find(this.sortProperties, property => property.isSelected);
+  };
+
+  this.getSortPropertyByName = function getSortPropertyByName(name) {
+    return _.find(this.sortProperties, property => property.name === name);
+  };
+
+  this.isAscending = function isAscending() {
+    const sortProperty = this.getSortProperty();
+    return sortProperty.isAscending;
+  };
+
+  /**
+   * Sorts hits either ascending or descending
+   * @param  {Array} hits Array of saved finder object hits
+   * @return {Array} Array sorted either ascending or descending
+   */
+  this.sortItems = function sortItems() {
+    const sortProperty = this.getSortProperty();
+
+    this.items =
+      sortProperty.isAscending
+      ? _.sortBy(this.items, sortProperty.getValue)
+      : _.sortBy(this.items, sortProperty.getValue).reverse();
+  };
+
+  this.sortOn = function sortOn(propertyName) {
+    const sortProperty = this.getSortProperty();
+
+    if (sortProperty.name === propertyName) {
+      sortProperty.isAscending = !sortProperty.isAscending;
+    } else {
+      sortProperty.isSelected = false;
+      this.getSortPropertyByName(propertyName).isSelected = true;
+    }
+
+    this.sortItems();
+  };
+
   this.toggleAll = function toggleAll() {
     if (this.areAllItemsChecked()) {
       selectedItems = [];

From 43ceb6e0e184c378fd3409f4700a67b0848c4000 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 2 Feb 2017 10:45:17 -0800
Subject: [PATCH 20/31] Refactor Visualize routes into VisualizeConstants file.
 Fix functional tests.

---
 .../kibana/public/visualize/editor/editor.js  | 11 +++---
 .../kibana/public/visualize/index.js          |  3 +-
 .../public/visualize/visualize_constants.js   |  7 ++++
 .../kibana/public/visualize/wizard/wizard.js  | 34 ++++++++++++++-----
 test/functional/apps/visualize/_area_chart.js |  2 +-
 .../functional/apps/visualize/_chart_types.js |  2 +-
 test/functional/apps/visualize/_data_table.js |  2 +-
 .../apps/visualize/_heatmap_chart.js          |  2 +-
 test/functional/apps/visualize/_line_chart.js |  2 +-
 .../apps/visualize/_metric_chart.js           |  2 +-
 test/functional/apps/visualize/_pie_chart.js  |  2 +-
 test/functional/apps/visualize/_tile_map.js   |  2 +-
 .../apps/visualize/_vertical_bar_chart.js     |  2 +-
 test/support/page_objects/visualize_page.js   |  2 +-
 14 files changed, 48 insertions(+), 27 deletions(-)
 create mode 100644 src/core_plugins/kibana/public/visualize/visualize_constants.js

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.js b/src/core_plugins/kibana/public/visualize/editor/editor.js
index 473cd9bb98942..476adfe6fb5b8 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.js
@@ -18,9 +18,10 @@ import uiRoutes from 'ui/routes';
 import uiModules from 'ui/modules';
 import editorTemplate from 'plugins/kibana/visualize/editor/editor.html';
 import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants';
+import { VisualizeConstants } from '../visualize_constants';
 
 uiRoutes
-.when('/visualize/create', {
+.when(VisualizeConstants.CREATE_URL, {
   template: editorTemplate,
   resolve: {
     savedVis: function (savedVisualizations, courier, $route, Private) {
@@ -37,7 +38,7 @@ uiRoutes
     }
   }
 })
-.when('/visualize/edit/:id', {
+.when(`${VisualizeConstants.EDIT_URL}/:id`, {
   template: editorTemplate,
   resolve: {
     savedVis: function (savedVisualizations, courier, $route) {
@@ -286,10 +287,6 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
     }
   };
 
-  $scope.startOver = function () {
-    kbnUrl.change('/visualize', {});
-  };
-
   /**
    * Called when the user clicks "Save" button.
    */
@@ -315,7 +312,7 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
         } else if (savedVis.id === $route.current.params.id) {
           docTitle.change(savedVis.lastSavedTitle);
         } else {
-          kbnUrl.change('/visualize/edit/{{id}}', { id: savedVis.id });
+          kbnUrl.change(`${VisualizeConstants.EDIT_URL}/{{id}}`, { id: savedVis.id });
         }
       }
     }, notify.fatal);
diff --git a/src/core_plugins/kibana/public/visualize/index.js b/src/core_plugins/kibana/public/visualize/index.js
index e362b15f771ee..2ba540095b1d4 100644
--- a/src/core_plugins/kibana/public/visualize/index.js
+++ b/src/core_plugins/kibana/public/visualize/index.js
@@ -20,12 +20,13 @@ import uiRoutes from 'ui/routes';
 
 import visualizeListingTemplate from './listing/visualize_listing.html';
 import { VisualizeListingController } from './listing/visualize_listing';
+import { VisualizeConstants } from './visualize_constants';
 
 uiRoutes
 .defaults(/visualize/, {
   requireDefaultIndex: true
 })
-.when('/visualize', {
+.when(VisualizeConstants.LANDING_PAGE_URL, {
   template: visualizeListingTemplate,
   controller: VisualizeListingController,
   controllerAs: 'listingController',
diff --git a/src/core_plugins/kibana/public/visualize/visualize_constants.js b/src/core_plugins/kibana/public/visualize/visualize_constants.js
new file mode 100644
index 0000000000000..a9d5c5d7a9e76
--- /dev/null
+++ b/src/core_plugins/kibana/public/visualize/visualize_constants.js
@@ -0,0 +1,7 @@
+export const VisualizeConstants = {
+  LANDING_PAGE_URL: '/visualize',
+  WIZARD_STEP_1_PAGE_URL: '/visualize/new',
+  WIZARD_STEP_2_PAGE_URL: '/visualize/new/configure',
+  CREATE_URL: '/visualize/create',
+  EDIT_URL: '/visualize/edit',
+};
diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
index 8bb9b28d736f0..fd35fa4f5b2fd 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js
+++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -1,9 +1,9 @@
-
 import 'plugins/kibana/visualize/saved_visualizations/saved_visualizations';
 import 'ui/directives/saved_object_finder';
 import 'ui/directives/paginated_selectable_list';
 import 'plugins/kibana/discover/saved_searches/saved_searches';
 import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants';
+import { VisualizeConstants } from '../visualize_constants';
 import routes from 'ui/routes';
 import RegistryVisTypesProvider from 'ui/registry/vis_types';
 import uiModules from 'ui/modules';
@@ -15,7 +15,7 @@ const module = uiModules.get('app/visualize', ['kibana/courier']);
 /********
 /** Wizard Step 1
 /********/
-routes.when('/visualize/new', {
+routes.when(VisualizeConstants.WIZARD_STEP_1_PAGE_URL, {
   template: visualizeWizardStep1Template,
   controller: 'VisualizeWizardStep1',
 });
@@ -27,9 +27,15 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
   kbnUrl.removeParam(DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM);
 
   $scope.visTypes = Private(RegistryVisTypesProvider);
+
   $scope.visTypeUrl = function (visType) {
-    const baseUrl = visType.requiresSearch ? '#/visualize/new/configure?' : '#/visualize/create?';
+    const baseUrl =
+      visType.requiresSearch
+      ? `#${VisualizeConstants.WIZARD_STEP_2_PAGE_URL}?`
+      : `#${VisualizeConstants.CREATE_URL}?`;
+
     const params = [`type=${encodeURIComponent(visType.name)}`];
+
     if (addToDashMode) {
       params.push(DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM);
     }
@@ -41,7 +47,7 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
 /********
 /** Wizard Step 2
 /********/
-routes.when('/visualize/new/configure', {
+routes.when(VisualizeConstants.WIZARD_STEP_2_PAGE_URL, {
   template: visualizeWizardStep2Template,
   controller: 'VisualizeWizardStep2',
   resolve: {
@@ -59,10 +65,17 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, timefilter,
   $scope.step2WithSearchUrl = function (hit) {
     if (addToDashMode) {
       return kbnUrl.eval(
-        `#/visualize/create?&type={{type}}&savedSearchId={{id}}&${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}`,
-        { type: type, id: hit.id });
+        `#${VisualizeConstants.CREATE_URL}` +
+        `?type={{type}}&savedSearchId={{id}}` +
+        `&${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}`,
+        { type: type, id: hit.id }
+      );
     }
-    return kbnUrl.eval('#/visualize/create?&type={{type}}&savedSearchId={{id}}', { type: type, id: hit.id });
+
+    return kbnUrl.eval(
+      `#${VisualizeConstants.CREATE_URL}?type={{type}}&savedSearchId={{id}}`,
+      { type: type, id: hit.id }
+    );
   };
 
   timefilter.enabled = false;
@@ -76,8 +89,11 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, timefilter,
     if (!pattern) return;
 
     if (addToDashMode) {
-      return `#/visualize/create?${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}&type=${type}&indexPattern=${pattern}`;
+      return `#${VisualizeConstants.CREATE_URL}` +
+        `?${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}` +
+        `&type=${type}&indexPattern=${pattern}`;
     }
-    return `#/visualize/create?type=${type}&indexPattern=${pattern}`;
+
+    return `#${VisualizeConstants.CREATE_URL}?type=${type}&indexPattern=${pattern}`;
   };
 });
diff --git a/test/functional/apps/visualize/_area_chart.js b/test/functional/apps/visualize/_area_chart.js
index fc84ecb148f96..fa1593c2d9ff1 100644
--- a/test/functional/apps/visualize/_area_chart.js
+++ b/test/functional/apps/visualize/_area_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     const toTime = '2015-09-23 18:31:44.000';
 
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToUrl('visualize', 'step/1')
+    return PageObjects.common.navigateToUrl('visualize', 'new')
     .then(function () {
       PageObjects.common.debug('clickAreaChart');
       return PageObjects.visualize.clickAreaChart();
diff --git a/test/functional/apps/visualize/_chart_types.js b/test/functional/apps/visualize/_chart_types.js
index 07b78c50703fd..76e265c99fbd1 100644
--- a/test/functional/apps/visualize/_chart_types.js
+++ b/test/functional/apps/visualize/_chart_types.js
@@ -10,7 +10,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToUrl('visualize', 'step/1');
+    return PageObjects.common.navigateToUrl('visualize', 'new');
   });
 
   bdd.describe('chart types', function indexPatternCreation() {
diff --git a/test/functional/apps/visualize/_data_table.js b/test/functional/apps/visualize/_data_table.js
index b8836f7dc2184..07d1bd274fb06 100644
--- a/test/functional/apps/visualize/_data_table.js
+++ b/test/functional/apps/visualize/_data_table.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToUrl('visualize', 'step/1')
+    return PageObjects.common.navigateToUrl('visualize', 'new')
     .then(function () {
       PageObjects.common.debug('clickDataTable');
       return PageObjects.visualize.clickDataTable();
diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.js
index 85a63d0452651..cd4bd06d111a3 100644
--- a/test/functional/apps/visualize/_heatmap_chart.js
+++ b/test/functional/apps/visualize/_heatmap_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToApp('visualize')
+    return PageObjects.common.navigateToUrl('visualize', 'new')
     .then(function () {
       PageObjects.common.debug('clickHeatmapChart');
       return PageObjects.visualize.clickHeatmapChart();
diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart.js
index e760f046ce83b..db324e28a5b0b 100644
--- a/test/functional/apps/visualize/_line_chart.js
+++ b/test/functional/apps/visualize/_line_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     const toTime = '2015-09-23 18:31:44.000';
 
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToUrl('visualize', 'step/1')
+    return PageObjects.common.navigateToUrl('visualize', 'new')
     .then(function () {
       PageObjects.common.debug('clickLineChart');
       return PageObjects.visualize.clickLineChart();
diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js
index ab2da7edf0fbc..2a864126435c8 100644
--- a/test/functional/apps/visualize/_metric_chart.js
+++ b/test/functional/apps/visualize/_metric_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToUrl('visualize', 'step/1')
+    return PageObjects.common.navigateToUrl('visualize', 'new')
     .then(function () {
       PageObjects.common.debug('clickMetric');
       return PageObjects.visualize.clickMetric();
diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.js
index e053bb1f908bc..7636062cdb162 100644
--- a/test/functional/apps/visualize/_pie_chart.js
+++ b/test/functional/apps/visualize/_pie_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
     const toTime = '2015-09-23 18:31:44.000';
 
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToUrl('visualize', 'step/1')
+    return PageObjects.common.navigateToUrl('visualize', 'new')
     .then(function () {
       PageObjects.common.debug('clickPieChart');
       return PageObjects.visualize.clickPieChart();
diff --git a/test/functional/apps/visualize/_tile_map.js b/test/functional/apps/visualize/_tile_map.js
index 2f5cd2f82933d..610cb88f4b480 100644
--- a/test/functional/apps/visualize/_tile_map.js
+++ b/test/functional/apps/visualize/_tile_map.js
@@ -15,7 +15,7 @@ bdd.describe('visualize app', function describeIndexTests() {
   bdd.before(function () {
 
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToUrl('visualize', 'step/1')
+    return PageObjects.common.navigateToUrl('visualize', 'new')
     .then(function () {
       PageObjects.common.debug('clickTileMap');
       return PageObjects.visualize.clickTileMap();
diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js
index c474f20d9d9f5..047ea2ecbece2 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart.js
@@ -14,7 +14,7 @@ bdd.describe('visualize app', function describeIndexTests() {
 
   bdd.before(function () {
     PageObjects.common.debug('navigateToApp visualize');
-    return PageObjects.common.navigateToUrl('visualize', 'step/1')
+    return PageObjects.common.navigateToUrl('visualize', 'new')
     .then(function () {
       PageObjects.common.debug('clickVerticalBarChart');
       return PageObjects.visualize.clickVerticalBarChart();
diff --git a/test/support/page_objects/visualize_page.js b/test/support/page_objects/visualize_page.js
index 88db2e3ae09d9..263de4eea6b83 100644
--- a/test/support/page_objects/visualize_page.js
+++ b/test/support/page_objects/visualize_page.js
@@ -334,7 +334,7 @@ export default class VisualizePage {
   clickLoadSavedVisButton() {
     // TODO: Use a test subject selector once we rewrite breadcrumbs to accept each breadcrumb
     // element as a child instead of building the breadcrumbs dynamically.
-    return self.remote
+    return this.remote
       .setFindTimeout(defaultFindTimeout)
       .findByCssSelector('[href="#/visualize"]')
       .click();

From d1d3da7741fb32cc4536ce9c769da528cadf80d2 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 3 Feb 2017 16:37:28 -0800
Subject: [PATCH 21/31] Add pager_controls directive and pager service. Add
 pagination to Dashboard and Visualize landing pages. Change Dashboard listing
 to use hrefs for each dashboard.

---
 .../dashboard/listing/dashboard_listing.html  | 39 +++++++++---
 .../dashboard/listing/dashboard_listing.js    | 60 +++++++++++++------
 .../visualize/listing/visualize_listing.html  | 35 +++++++++--
 .../visualize/listing/visualize_listing.js    | 56 ++++++++++++-----
 src/ui/public/pager/index.js                  |  1 +
 src/ui/public/pager/pager_service.factory.js  | 12 ++++
 src/ui/public/pager/pager_service.js          | 58 ++++++++++++++++++
 .../tool_bar_pager_buttons.html               | 16 +++++
 .../tool_bar_pager_buttons.js                 | 29 +++++++++
 .../tool_bar_pager_text.html                  |  3 +
 .../tool_bar_pager_text.js                    | 21 +++++++
 src/ui/public/pager_control/index.js          |  2 +
 12 files changed, 284 insertions(+), 48 deletions(-)
 create mode 100644 src/ui/public/pager/index.js
 create mode 100644 src/ui/public/pager/pager_service.factory.js
 create mode 100644 src/ui/public/pager/pager_service.js
 create mode 100644 src/ui/public/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.html
 create mode 100644 src/ui/public/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.js
 create mode 100644 src/ui/public/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.html
 create mode 100644 src/ui/public/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js
 create mode 100644 src/ui/public/pager_control/index.js

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 45ce0f34fd1e5..943296d44c4c5 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -31,10 +31,6 @@
         </div>
       </div>
 
-      <div class="kuiToolBarSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
-      </div>
-
       <div class="kuiToolBarSection">
         <!-- Bulk delete button -->
         <button
@@ -59,6 +55,21 @@
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
         </a>
       </div>
+
+      <div class="kuiToolBarSection">
+        <!-- Pagination -->
+        <tool-bar-pager-text
+          start-item="listingController.pager.startItem"
+          end-item="listingController.pager.endItem"
+          total-items="listingController.pager.totalItems"
+        ></tool-bar-pager-text>
+        <tool-bar-pager-buttons
+          has-previous-page="listingController.pager.hasPreviousPage"
+          has-next-page="listingController.pager.hasNextPage"
+          on-page-next="listingController.onPageNext"
+          on-page-previous="listingController.onPagePrevious"
+        ></tool-bar-pager-buttons>
+      </div>
     </div>
 
     <!-- NoResults -->
@@ -118,7 +129,7 @@
 
       <tbody>
       <tr
-        ng-repeat="item in listingController.items track by item.id"
+        ng-repeat="item in listingController.pageOfItems track by item.id"
         class="kuiTableRow"
       >
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
@@ -132,7 +143,7 @@
 
         <td class="kuiTableRowCell">
           <div class="kuiTableRowCell__liner">
-            <a class="kuiLink" ng-click="listingController.open(item)">
+            <a class="kuiLink" ng-href="{{ listingController.getUrlForItem(item) }}">
               {{ item.title }}
             </a>
           </div>
@@ -149,8 +160,20 @@
           {{ listingController.getSelectedItemsCount() }} selected
         </div>
       </div>
-      <div class="kuiToolBarFooterSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
+
+      <div class="kuiToolBarSection">
+        <!-- Pagination -->
+        <tool-bar-pager-text
+          start-item="listingController.pager.startItem"
+          end-item="listingController.pager.endItem"
+          total-items="listingController.pager.totalItems"
+        ></tool-bar-pager-text>
+        <tool-bar-pager-buttons
+          has-previous-page="listingController.pager.hasPreviousPage"
+          has-next-page="listingController.pager.hasNextPage"
+          on-page-next="listingController.onPageNext"
+          on-page-previous="listingController.onPagePrevious"
+        ></tool-bar-pager-buttons>
       </div>
     </div>
   </div>
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 3abec72de0128..e0b14fcf50d05 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -1,17 +1,22 @@
 import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
+import 'ui/pager_control';
+import 'ui/pager';
 import { DashboardConstants } from '../dashboard_constants';
 import _ from 'lodash';
 
 export function DashboardListingController(
+  $filter,
   $scope,
+  confirmModal,
   kbnUrl,
   Notifier,
+  pagerService,
   Private,
-  timefilter,
-  confirmModal
+  timefilter
 ) {
   timefilter.enabled = false;
 
+  const limitTo = $filter('limitTo');
   // TODO: Extract this into an external service.
   const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
   const dashboardService = services.dashboards;
@@ -19,17 +24,38 @@ export function DashboardListingController(
 
   let selectedItems = [];
 
+  /**
+   * Sorts hits either ascending or descending
+   * @param  {Array} hits Array of saved finder object hits
+   * @return {Array} Array sorted either ascending or descending
+   */
+  const sortItems = () => {
+    this.items =
+      this.isAscending
+      ? _.sortBy(this.items, 'title')
+      : _.sortBy(this.items, 'title').reverse();
+  };
+
+  const calculateItemsOnPage = () => {
+    sortItems();
+    this.pager.setTotalItems(this.items.length);
+    this.pageOfItems = limitTo(this.items, this.pager.pageSize, this.pager.startIndex);
+  };
+
   const fetchObjects = () => {
     dashboardService.find(this.filter)
       .then(result => {
         this.items = result.hits;
-        this.sortItems();
+        calculateItemsOnPage();
       });
   };
 
   this.items = [];
+  this.pageOfItems = [];
   this.filter = '';
 
+  this.pager = pagerService.create(this.items.length, 20, 1);
+
   /**
    * Boolean that keeps track of whether hits are sorted ascending (true)
    * or descending (false) by title
@@ -37,21 +63,9 @@ export function DashboardListingController(
    */
   this.isAscending = true;
 
-  /**
-   * Sorts hits either ascending or descending
-   * @param  {Array} hits Array of saved finder object hits
-   * @return {Array} Array sorted either ascending or descending
-   */
-  this.sortItems = function sortItems() {
-    this.items =
-      this.isAscending
-      ? _.sortBy(this.items, 'title')
-      : _.sortBy(this.items, 'title').reverse();
-  };
-
   this.toggleSort = function toggleSort() {
     this.isAscending = !this.isAscending;
-    this.sortItems();
+    calculateItemsOnPage();
   };
 
   this.toggleAll = function toggleAll() {
@@ -102,8 +116,18 @@ export function DashboardListingController(
       });
   };
 
-  this.open = function open(item) {
-    kbnUrl.change(item.url.substr(1));
+  this.onPageNext = () => {
+    this.pager.nextPage();
+    calculateItemsOnPage();
+  };
+
+  this.onPagePrevious = () => {
+    this.pager.previousPage();
+    calculateItemsOnPage();
+  };
+
+  this.getUrlForItem = function getUrlForItem(item) {
+    return `#/dashboard/${item.id}`;
   };
 
   $scope.$watch(() => this.filter, () => {
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 4b93cfb6cdd03..c77a324470b6c 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -30,10 +30,6 @@
         </div>
       </div>
 
-      <div class="kuiToolBarSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
-      </div>
-
       <div class="kuiToolBarSection">
         <!-- Bulk delete button -->
         <button
@@ -57,6 +53,21 @@
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
         </a>
       </div>
+
+      <div class="kuiToolBarSection">
+        <!-- Pagination -->
+        <tool-bar-pager-text
+          start-item="listingController.pager.startItem"
+          end-item="listingController.pager.endItem"
+          total-items="listingController.pager.totalItems"
+        ></tool-bar-pager-text>
+        <tool-bar-pager-buttons
+          has-previous-page="listingController.pager.hasPreviousPage"
+          has-next-page="listingController.pager.hasNextPage"
+          on-page-next="listingController.onPageNext"
+          on-page-previous="listingController.onPagePrevious"
+        ></tool-bar-pager-buttons>
+      </div>
     </div>
 
     <!-- NoResults -->
@@ -101,7 +112,7 @@
 
       <tbody>
         <tr
-          ng-repeat="item in listingController.items track by item.id"
+          ng-repeat="item in listingController.pageOfItems track by item.id"
           class="kuiTableRow"
         >
           <td class="kuiTableRowCell kuiTableRowCell--checkBox">
@@ -141,8 +152,20 @@
           {{ listingController.getSelectedItemsCount() }} selected
         </div>
       </div>
+
       <div class="kuiToolBarFooterSection">
-        <!-- We need an empty section for the buttons to be positioned consistently. -->
+        <!-- Pagination -->
+        <tool-bar-pager-text
+          start-item="listingController.pager.startItem"
+          end-item="listingController.pager.endItem"
+          total-items="listingController.pager.totalItems"
+        ></tool-bar-pager-text>
+        <tool-bar-pager-buttons
+          has-previous-page="listingController.pager.hasPreviousPage"
+          has-next-page="listingController.pager.hasNextPage"
+          on-page-next="listingController.onPageNext"
+          on-page-previous="listingController.onPagePrevious"
+        ></tool-bar-pager-buttons>
       </div>
     </div>
   </div>
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 273a672da9bce..0516f1a856d9e 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -1,16 +1,21 @@
 import SavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
+import 'ui/pager_control';
+import 'ui/pager';
 import _ from 'lodash';
 
 export function VisualizeListingController(
+  $filter,
   $scope,
   confirmModal,
   kbnUrl,
   Notifier,
+  pagerService,
   Private,
   timefilter
 ) {
   timefilter.enabled = false;
 
+  const limitTo = $filter('limitTo');
   // TODO: Extract this into an external service.
   const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
   const visualizationService = services.visualizations;
@@ -18,17 +23,40 @@ export function VisualizeListingController(
 
   let selectedItems = [];
 
+  /**
+   * Sorts hits either ascending or descending
+   * @param  {Array} hits Array of saved finder object hits
+   * @return {Array} Array sorted either ascending or descending
+   */
+  const sortItems = () => {
+    const sortProperty = this.getSortProperty();
+
+    this.items =
+      sortProperty.isAscending
+      ? _.sortBy(this.items, sortProperty.getValue)
+      : _.sortBy(this.items, sortProperty.getValue).reverse();
+  };
+
+  const calculateItemsOnPage = () => {
+    sortItems();
+    this.pager.setTotalItems(this.items.length);
+    this.pageOfItems = limitTo(this.items, this.pager.pageSize, this.pager.startIndex);
+  };
+
   const fetchObjects = () => {
     visualizationService.find(this.filter)
     .then(result => {
       this.items = result.hits;
-      this.sortItems();
+      calculateItemsOnPage();
     });
   };
 
   this.items = [];
+  this.pageOfItems = [];
   this.filter = '';
 
+  this.pager = pagerService.create(this.items.length, 20, 1);
+
   /**
    * Remember sort direction per property.
    */
@@ -57,20 +85,6 @@ export function VisualizeListingController(
     return sortProperty.isAscending;
   };
 
-  /**
-   * Sorts hits either ascending or descending
-   * @param  {Array} hits Array of saved finder object hits
-   * @return {Array} Array sorted either ascending or descending
-   */
-  this.sortItems = function sortItems() {
-    const sortProperty = this.getSortProperty();
-
-    this.items =
-      sortProperty.isAscending
-      ? _.sortBy(this.items, sortProperty.getValue)
-      : _.sortBy(this.items, sortProperty.getValue).reverse();
-  };
-
   this.sortOn = function sortOn(propertyName) {
     const sortProperty = this.getSortProperty();
 
@@ -81,7 +95,7 @@ export function VisualizeListingController(
       this.getSortPropertyByName(propertyName).isSelected = true;
     }
 
-    this.sortItems();
+    calculateItemsOnPage();
   };
 
   this.toggleAll = function toggleAll() {
@@ -133,6 +147,16 @@ export function VisualizeListingController(
       });
   };
 
+  this.onPageNext = () => {
+    this.pager.nextPage();
+    calculateItemsOnPage();
+  };
+
+  this.onPagePrevious = () => {
+    this.pager.previousPage();
+    calculateItemsOnPage();
+  };
+
   this.getUrlForItem = function getUrlForItem(item) {
     return `#/visualize/edit/${item.id}`;
   };
diff --git a/src/ui/public/pager/index.js b/src/ui/public/pager/index.js
new file mode 100644
index 0000000000000..74c9422c1d6f2
--- /dev/null
+++ b/src/ui/public/pager/index.js
@@ -0,0 +1 @@
+import './pager_service.factory';
diff --git a/src/ui/public/pager/pager_service.factory.js b/src/ui/public/pager/pager_service.factory.js
new file mode 100644
index 0000000000000..93335891841db
--- /dev/null
+++ b/src/ui/public/pager/pager_service.factory.js
@@ -0,0 +1,12 @@
+import uiModules from 'ui/modules';
+import { PagerService } from './pager_service';
+
+const app = uiModules.get('kibana');
+
+app.factory('pagerService', () => {
+  return {
+    create(...args) {
+      return new PagerService(...args);
+    }
+  };
+});
diff --git a/src/ui/public/pager/pager_service.js b/src/ui/public/pager/pager_service.js
new file mode 100644
index 0000000000000..3ecf0b825e5aa
--- /dev/null
+++ b/src/ui/public/pager/pager_service.js
@@ -0,0 +1,58 @@
+function clamp(val, min, max) {
+  return Math.min(Math.max(min, val), max);
+}
+
+export class PagerService {
+  constructor(totalItems, pageSize, startingPage) {
+    this.currentPage = startingPage;
+    this.totalItems = totalItems;
+    this.pageSize = pageSize;
+    this.startIndex = 0;
+    this.updateMeta();
+  }
+
+  get pageCount() {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get hasNextPage() {
+    return this.currentPage < this.totalPages;
+  }
+
+  get hasPreviousPage() {
+    return this.currentPage > 1;
+  }
+
+  nextPage() {
+    this.currentPage += 1;
+    this.updateMeta();
+  }
+
+  previousPage() {
+    this.currentPage -= 1;
+    this.updateMeta();
+  }
+
+  setTotalItems(count) {
+    this.totalItems = count;
+    this.updateMeta();
+  }
+
+  setPageSize(count) {
+    this.pageSize = count;
+    this.updateMeta();
+  }
+
+  updateMeta() {
+    this.totalPages = Math.ceil(this.totalItems / this.pageSize);
+    this.currentPage = clamp(this.currentPage, 1, this.totalPages);
+
+    this.startItem = ((this.currentPage - 1) * this.pageSize) + 1;
+    this.startItem = clamp(this.startItem, 0, this.totalItems);
+
+    this.endItem = (this.startItem - 1) + this.pageSize;
+    this.endItem = clamp(this.endItem, 0, this.totalItems);
+
+    this.startIndex = this.startItem - 1;
+  }
+}
diff --git a/src/ui/public/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.html b/src/ui/public/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.html
new file mode 100644
index 0000000000000..361d67848e58e
--- /dev/null
+++ b/src/ui/public/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.html
@@ -0,0 +1,16 @@
+<div class="kuiButtonGroup">
+  <button
+    class="kuiButton kuiButton--basic kuiButton--icon"
+    ng-click="toolBarPagerButtons.previousPage()"
+    ng-disabled="!toolBarPagerButtons.hasPreviousPage"
+  >
+    <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+  </button>
+  <button
+    class="kuiButton kuiButton--basic kuiButton--icon"
+    ng-click="toolBarPagerButtons.nextPage()"
+    ng-disabled="!toolBarPagerButtons.hasNextPage"
+  >
+    <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+  </button>
+</div>
diff --git a/src/ui/public/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.js b/src/ui/public/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.js
new file mode 100644
index 0000000000000..302f1382357af
--- /dev/null
+++ b/src/ui/public/pager_control/components/tool_bar_pager_buttons/tool_bar_pager_buttons.js
@@ -0,0 +1,29 @@
+import uiModules from 'ui/modules';
+import template from './tool_bar_pager_buttons.html';
+
+const app = uiModules.get('kibana');
+
+app.directive('toolBarPagerButtons', function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: template,
+    scope: {
+      hasNextPage: '=',
+      hasPreviousPage: '=',
+      onPageNext: '=',
+      onPagePrevious: '=',
+    },
+    controllerAs: 'toolBarPagerButtons',
+    bindToController: true,
+    controller: class ToolBarPagerButtonsController {
+      nextPage = () => {
+        this.onPageNext();
+      };
+
+      previousPage = () => {
+        this.onPagePrevious();
+      };
+    }
+  };
+});
diff --git a/src/ui/public/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.html b/src/ui/public/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.html
new file mode 100644
index 0000000000000..36f7675b8db32
--- /dev/null
+++ b/src/ui/public/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.html
@@ -0,0 +1,3 @@
+<div class="kuiToolBarText">
+  {{ toolBarPagerText.startItem | number }}&ndash;{{ toolBarPagerText.endItem | number }} of {{ toolBarPagerText.totalItems | number }}
+</div>
\ No newline at end of file
diff --git a/src/ui/public/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js b/src/ui/public/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js
new file mode 100644
index 0000000000000..873bdb597d0fb
--- /dev/null
+++ b/src/ui/public/pager_control/components/tool_bar_pager_text/tool_bar_pager_text.js
@@ -0,0 +1,21 @@
+import uiModules from 'ui/modules';
+import template from './tool_bar_pager_text.html';
+
+const app = uiModules.get('kibana');
+
+app.directive('toolBarPagerText', function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: template,
+    scope: {
+      startItem: '=',
+      endItem: '=',
+      totalItems: '=',
+    },
+    controllerAs: 'toolBarPagerText',
+    bindToController: true,
+    controller: class ToolBarPagerTextController {
+    }
+  };
+});
diff --git a/src/ui/public/pager_control/index.js b/src/ui/public/pager_control/index.js
new file mode 100644
index 0000000000000..9f0f3b8ea66d5
--- /dev/null
+++ b/src/ui/public/pager_control/index.js
@@ -0,0 +1,2 @@
+import './components/tool_bar_pager_text/tool_bar_pager_text';
+import './components/tool_bar_pager_buttons/tool_bar_pager_buttons';

From 880b7b42f0fd9fd8c058e07e559ec71a24486e64 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 3 Feb 2017 16:41:59 -0800
Subject: [PATCH 22/31] Add Basic Icon example.

---
 ui_framework/doc_site/src/views/icon/icon_basic.html  | 1 +
 ui_framework/doc_site/src/views/icon/icon_example.jsx | 7 +++++++
 2 files changed, 8 insertions(+)
 create mode 100644 ui_framework/doc_site/src/views/icon/icon_basic.html

diff --git a/ui_framework/doc_site/src/views/icon/icon_basic.html b/ui_framework/doc_site/src/views/icon/icon_basic.html
new file mode 100644
index 0000000000000..78f198e68b543
--- /dev/null
+++ b/ui_framework/doc_site/src/views/icon/icon_basic.html
@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--basic fa-train"></div>
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 f9a01a62f126a..7aee7f935504f 100644
--- a/ui_framework/doc_site/src/views/icon/icon_example.jsx
+++ b/ui_framework/doc_site/src/views/icon/icon_example.jsx
@@ -17,6 +17,13 @@ export default createExample([{
     <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: (

From 668d598082fd3101ea824dedc0f6d65ef6f2c367 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 3 Feb 2017 16:44:06 -0800
Subject: [PATCH 23/31] Use ng-if instead of ng-hide to hide/reveal Table
 action buttons in Dashboard listing.

---
 .../kibana/public/dashboard/listing/dashboard_listing.html    | 4 ++--
 1 file changed, 2 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 943296d44c4c5..e62feb0780046 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -37,7 +37,7 @@
           class="kuiButton kuiButton--danger"
           ng-click="listingController.deleteSelectedItems()"
           aria-label="Delete selected objects"
-          ng-hide="listingController.getSelectedItemsCount() === 0"
+          ng-if="listingController.getSelectedItemsCount() > 0"
           tooltip="Delete selected dashboards"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
@@ -49,7 +49,7 @@
           href="#/dashboard/create"
           aria-label="Create new dashboard"
           data-test-subj="newDashboardLink"
-          ng-hide="listingController.getSelectedItemsCount() > 0"
+          ng-if="listingController.getSelectedItemsCount() === 0"
           tooltip="Create new dashboard"
         >
           <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>

From 99525ac45dbe4025d86920c61e60e2423286a8e6 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 6 Feb 2017 10:37:05 -0800
Subject: [PATCH 24/31] Redirect from old Visualize wizard routes to new ones.

---
 .../kibana/public/visualize/wizard/wizard.js       | 14 ++++++++++++++
 .../doc_site/src/views/icon/icon_basic.html        |  1 -
 2 files changed, 14 insertions(+), 1 deletion(-)
 delete mode 100644 src/ui_framework/doc_site/src/views/icon/icon_basic.html

diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
index fd35fa4f5b2fd..b42aa4ebe4281 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js
+++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -15,6 +15,12 @@ const module = uiModules.get('app/visualize', ['kibana/courier']);
 /********
 /** Wizard Step 1
 /********/
+
+// Redirect old route to new route.
+routes.when('/visualize/step/1', {
+  redirectTo: VisualizeConstants.WIZARD_STEP_1_PAGE_URL,
+});
+
 routes.when(VisualizeConstants.WIZARD_STEP_1_PAGE_URL, {
   template: visualizeWizardStep1Template,
   controller: 'VisualizeWizardStep1',
@@ -47,6 +53,14 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
 /********
 /** Wizard Step 2
 /********/
+
+// Redirect old route to new route.
+// NOTE: Accessing this route directly means the user has entered into the wizard UX without
+// selecting a Visualization type in step 1. So we want to redirect them to step 1, not step 2.
+routes.when('/visualize/step/2', {
+  redirectTo: VisualizeConstants.WIZARD_STEP_1_PAGE_URL,
+});
+
 routes.when(VisualizeConstants.WIZARD_STEP_2_PAGE_URL, {
   template: visualizeWizardStep2Template,
   controller: 'VisualizeWizardStep2',
diff --git a/src/ui_framework/doc_site/src/views/icon/icon_basic.html b/src/ui_framework/doc_site/src/views/icon/icon_basic.html
deleted file mode 100644
index 40ac6202f8bca..0000000000000
--- a/src/ui_framework/doc_site/src/views/icon/icon_basic.html
+++ /dev/null
@@ -1 +0,0 @@
-<div class="kuiIcon kuiIcon--basic fa-gear"></div>

From 734c85b5abaed82ccae15340e7d8f32fca9a1b0f Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 6 Feb 2017 10:46:50 -0800
Subject: [PATCH 25/31] Use ViewContent and Title components in Visualize
 wizard.

---
 .../kibana/public/visualize/styles/main.less  |  1 -
 .../public/visualize/wizard/step_1.html       | 47 ++++++++++---------
 .../public/visualize/wizard/step_2.html       | 17 +++++--
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/core_plugins/kibana/public/visualize/styles/main.less b/src/core_plugins/kibana/public/visualize/styles/main.less
index 4687f38c8edfe..f230f71ab3f19 100644
--- a/src/core_plugins/kibana/public/visualize/styles/main.less
+++ b/src/core_plugins/kibana/public/visualize/styles/main.less
@@ -46,7 +46,6 @@
 
 @media (min-width: @screen-lg) {
   .wizard {
-    padding: 0;
     display: flex;
   }
 
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
index 7a6fc7907e57d..b67d1f996ea16 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -12,31 +12,34 @@
 
 <div class="kuiViewContent kuiViewContent--constrainedWidth">
   <!-- Header -->
-  <div class="kuiViewContentItem kuiSubHeader">
-    <h1 class="kuiTitle">
+  <div class="kuiViewContentItem">
+    <h1 class="kuiTitle kuiVerticalRhythm">
       Select visualization type
     </h1>
-  </div>
 
-  <div class="wizard">
-    <div class="wizard-column">
-      <div class="wizard-row">
-        <a
-          class="wizard-type"
-          ng-repeat="type in visTypes.inTitleOrder"
-          ng-href="{{ visTypeUrl(type) }}"
-        >
-          <div class="wizard-type-heading">
-            <span
-              aria-hidden="true"
-              class="wizard-type-heading-icon fa fa-fw"
-              ng-class="type.icon"
-            ></span>
-            <h4 data-test-subj="visualizeWizardChartTypeTitle" class="wizard-type-heading-text">{{type.title}}</h4>
-          </div>
-          <p class="wizard-type-description">{{type.description}}</p>
-        </a>
-      </div>
+    <div class="kuiVerticalRhythm">
+      <a
+        class="wizard-type"
+        ng-repeat="type in visTypes.inTitleOrder"
+        ng-href="{{ visTypeUrl(type) }}"
+      >
+        <div class="wizard-type-heading">
+          <span
+            aria-hidden="true"
+            class="wizard-type-heading-icon fa fa-fw"
+            ng-class="type.icon"
+          ></span>
+
+          <h4
+            data-test-subj="visualizeWizardChartTypeTitle"
+            class="wizard-type-heading-text"
+          >
+            {{type.title}}
+          </h4>
+        </div>
+
+        <p class="wizard-type-description">{{type.description}}</p>
+      </a>
     </div>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
index ec924de7be201..4137c9d88ae45 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_2.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
@@ -11,23 +11,30 @@
 </kbn-top-nav>
 
 <div class="kuiViewContent kuiViewContent--constrainedWidth">
-  <div class="wizard">
+  <div class="wizard kuiViewContentItem">
     <div class="wizard-column wizard-column--small">
-      <h3 class="wizard-sub-title">From a New Search, Select Index</h3>
+      <h1 class="kuiTitle kuiVerticalRhythm">
+        From a New Search, Select Index
+      </h1>
+
       <paginated-selectable-list
         per-page="20"
         list="indexPattern.list"
         user-make-url="makeUrl"
-        class="wizard-row"
+        class="wizard-row kuiVerticalRhythm"
       ></paginated-selectable-list>
     </div>
+
     <div class="wizard-column wizard-column--large">
-      <h3 class="wizard-sub-title">Or, From a Saved Search</h3>
+      <h2 class="kuiTitle kuiVerticalRhythm">
+        Or, From a Saved Search
+      </h2>
+
       <!-- Saved searches -->
       <saved-object-finder
         title="Saved Searches"
         type="searches"
-        class="wizard-row"
+        class="wizard-row kuiVerticalRhythm"
         make-url="step2WithSearchUrl"
       ></saved-object-finder>
     </div>

From de4f7b43e2f8d89e593e58877ee05e3891efc433 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 6 Feb 2017 11:05:16 -0800
Subject: [PATCH 26/31] Fix Visualize and Dashboard listing table logic so that
 selection only applies to the current page of items. - Paging clears the
 selection. - Searching clears the selection. - Sorting clears the selection.

---
 .../dashboard/listing/dashboard_listing.js    | 21 +++++++++++++++----
 .../visualize/listing/visualize_listing.js    | 20 ++++++++++++++----
 2 files changed, 33 insertions(+), 8 deletions(-)

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 e0b14fcf50d05..b834f7dedc437 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -50,6 +50,14 @@ export function DashboardListingController(
       });
   };
 
+  const deselectAll = () => {
+    selectedItems = [];
+  };
+
+  const selectAll = () => {
+    selectedItems = this.pageOfItems.slice(0);
+  };
+
   this.items = [];
   this.pageOfItems = [];
   this.filter = '';
@@ -65,14 +73,15 @@ export function DashboardListingController(
 
   this.toggleSort = function toggleSort() {
     this.isAscending = !this.isAscending;
+    deselectAll();
     calculateItemsOnPage();
   };
 
   this.toggleAll = function toggleAll() {
     if (this.areAllItemsChecked()) {
-      selectedItems = [];
+      deselectAll();
     } else {
-      selectedItems = this.items.slice(0);
+      selectAll();
     }
   };
 
@@ -90,7 +99,7 @@ export function DashboardListingController(
   };
 
   this.areAllItemsChecked = function areAllItemsChecked() {
-    return this.getSelectedItemsCount() === this.items.length;
+    return this.getSelectedItemsCount() === this.pageOfItems.length;
   };
 
   this.getSelectedItemsCount = function getSelectedItemsCount() {
@@ -104,10 +113,11 @@ export function DashboardListingController(
       dashboardService.delete(selectedIds)
         .then(fetchObjects)
         .then(() => {
-          selectedItems = [];
+          deselectAll();
         })
         .catch(error => notify.error(error));
     };
+
     confirmModal(
       'Are you sure you want to delete the selected dashboards? This action is irreversible!',
       {
@@ -117,11 +127,13 @@ export function DashboardListingController(
   };
 
   this.onPageNext = () => {
+    deselectAll();
     this.pager.nextPage();
     calculateItemsOnPage();
   };
 
   this.onPagePrevious = () => {
+    deselectAll();
     this.pager.previousPage();
     calculateItemsOnPage();
   };
@@ -131,6 +143,7 @@ export function DashboardListingController(
   };
 
   $scope.$watch(() => this.filter, () => {
+    deselectAll();
     fetchObjects();
   });
 }
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 0516f1a856d9e..05ba2690455e1 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -51,6 +51,14 @@ export function VisualizeListingController(
     });
   };
 
+  const deselectAll = () => {
+    selectedItems = [];
+  };
+
+  const selectAll = () => {
+    selectedItems = this.pageOfItems.slice(0);
+  };
+
   this.items = [];
   this.pageOfItems = [];
   this.filter = '';
@@ -95,14 +103,15 @@ export function VisualizeListingController(
       this.getSortPropertyByName(propertyName).isSelected = true;
     }
 
+    deselectAll();
     calculateItemsOnPage();
   };
 
   this.toggleAll = function toggleAll() {
     if (this.areAllItemsChecked()) {
-      selectedItems = [];
+      deselectAll();
     } else {
-      selectedItems = this.items.slice(0);
+      selectAll();
     }
   };
 
@@ -120,7 +129,7 @@ export function VisualizeListingController(
   };
 
   this.areAllItemsChecked = function areAllItemsChecked() {
-    return this.getSelectedItemsCount() === this.items.length;
+    return this.getSelectedItemsCount() === this.pageOfItems.length;
   };
 
   this.getSelectedItemsCount = function getSelectedItemsCount() {
@@ -134,7 +143,7 @@ export function VisualizeListingController(
       visualizationService.delete(selectedIds)
         .then(fetchObjects)
         .then(() => {
-          selectedItems = [];
+          deselectAll();
         })
         .catch(error => notify.error(error));
     };
@@ -148,11 +157,13 @@ export function VisualizeListingController(
   };
 
   this.onPageNext = () => {
+    deselectAll();
     this.pager.nextPage();
     calculateItemsOnPage();
   };
 
   this.onPagePrevious = () => {
+    deselectAll();
     this.pager.previousPage();
     calculateItemsOnPage();
   };
@@ -162,6 +173,7 @@ export function VisualizeListingController(
   };
 
   $scope.$watch(() => this.filter, () => {
+    deselectAll();
     fetchObjects();
   });
 }

From 10dbff66cc817ba869d8ab3d6a4ff4d9b81f390f Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 6 Feb 2017 11:22:09 -0800
Subject: [PATCH 27/31] - Fix Visualize wizard breadcrumbs. - Use consistent
 "Create" terminology in both Visualize and Dashboard for creating new items.
 - Use NoItems and PromptForItems components in Visualize listing view.

---
 .../dashboard/listing/dashboard_listing.html  |  6 ++--
 .../public/visualize/editor/editor.html       |  2 +-
 .../visualize/listing/visualize_listing.html  | 31 +++++++++++++++++--
 .../public/visualize/wizard/step_1.html       |  2 ++
 .../public/visualize/wizard/step_2.html       |  2 ++
 5 files changed, 36 insertions(+), 7 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 e62feb0780046..b5c49ad7eb7f1 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -72,7 +72,7 @@
       </div>
     </div>
 
-    <!-- NoResults -->
+    <!-- NoItems -->
     <div
       class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
       ng-if="!listingController.items.length && listingController.filter"
@@ -89,7 +89,7 @@
     >
       <div class="kuiPromptForItems">
         <div class="kuiPromptForItems__message">
-          Looks like you don&rsquo;t have any dashboards. Let&rsquo;s add some!
+          Looks like you don&rsquo;t have any dashboards. Let&rsquo;s create some!
         </div>
 
         <div class="kuiPromptForItems__actions">
@@ -98,7 +98,7 @@
             href="#/dashboard/create"
           >
             <span class="kuiButton__icon kuiIcon fa-plus"></span>
-            Add a dashboard
+            Create a dashboard
           </a>
         </div>
       </div>
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index 05088606bb248..8b29ffe04181b 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -6,7 +6,7 @@
       <!-- Breadcrumbs. -->
       <bread-crumbs
         data-transclude-slot="topLeftCorner"
-        title="getVisualizationTitle()"
+        page-title="getVisualizationTitle()"
         use-links="true"
         omit-current-page="true"
         omit-pages="['edit']"
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 c77a324470b6c..a9885114f9b27 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -70,13 +70,38 @@
       </div>
     </div>
 
-    <!-- NoResults -->
-    <div class="kuiPanel kuiPanel--centered" ng-if="!listingController.items.length">
-      <div class="kuiNoResults">
+    <!-- NoItems -->
+    <div
+      class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
+      ng-if="!listingController.items.length && listingController.filter"
+    >
+      <div class="kuiNoItems">
         No visualizations matched your search.
       </div>
     </div>
 
+    <!-- PromptForItems -->
+    <div
+      class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
+      ng-if="!listingController.items.length && !listingController.filter"
+    >
+      <div class="kuiPromptForItems">
+        <div class="kuiPromptForItems__message">
+          Looks like you don&rsquo;t have any visualizations. Let&rsquo;s create some!
+        </div>
+
+        <div class="kuiPromptForItems__actions">
+          <a
+            class="kuiButton kuiButton--primary kuiButton--iconText"
+            href="#/visualize/new"
+          >
+            <span class="kuiButton__icon kuiIcon fa-plus"></span>
+            Create a visualization
+          </a>
+        </div>
+      </div>
+    </div>
+
     <!-- Table -->
     <table class="kuiTable" ng-if="listingController.items.length">
       <thead>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
index b67d1f996ea16..ebc04c4218792 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -6,6 +6,8 @@
     <bread-crumbs
       data-transclude-slot="topLeftCorner"
       use-links="true"
+      omit-current-page="true"
+      page-title="'New'"
     ></bread-crumbs>
   </div>
 </kbn-top-nav>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_2.html b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
index 4137c9d88ae45..b818992084101 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_2.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_2.html
@@ -6,6 +6,8 @@
     <bread-crumbs
       data-transclude-slot="topLeftCorner"
       use-links="true"
+      omit-current-page="true"
+      page-title="'Choose search source'"
     ></bread-crumbs>
   </div>
 </kbn-top-nav>

From 6eeeab6833e69ac843bf491f74a92cf14f7c7a89 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 6 Feb 2017 11:29:36 -0800
Subject: [PATCH 28/31] Rename pagerService factory to pagerFactory.

---
 .../public/dashboard/listing/dashboard_listing.js    |  4 ++--
 .../public/visualize/listing/visualize_listing.js    |  4 ++--
 src/ui/public/pager/index.js                         |  2 +-
 src/ui/public/pager/{pager_service.js => pager.js}   |  2 +-
 src/ui/public/pager/pager_factory.js                 | 12 ++++++++++++
 src/ui/public/pager/pager_service.factory.js         | 12 ------------
 6 files changed, 18 insertions(+), 18 deletions(-)
 rename src/ui/public/pager/{pager_service.js => pager.js} (97%)
 create mode 100644 src/ui/public/pager/pager_factory.js
 delete mode 100644 src/ui/public/pager/pager_service.factory.js

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 b834f7dedc437..e583f733f28f4 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -10,7 +10,7 @@ export function DashboardListingController(
   confirmModal,
   kbnUrl,
   Notifier,
-  pagerService,
+  pagerFactory,
   Private,
   timefilter
 ) {
@@ -62,7 +62,7 @@ export function DashboardListingController(
   this.pageOfItems = [];
   this.filter = '';
 
-  this.pager = pagerService.create(this.items.length, 20, 1);
+  this.pager = pagerFactory.create(this.items.length, 20, 1);
 
   /**
    * Boolean that keeps track of whether hits are sorted ascending (true)
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 05ba2690455e1..91316e2824004 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -9,7 +9,7 @@ export function VisualizeListingController(
   confirmModal,
   kbnUrl,
   Notifier,
-  pagerService,
+  pagerFactory,
   Private,
   timefilter
 ) {
@@ -63,7 +63,7 @@ export function VisualizeListingController(
   this.pageOfItems = [];
   this.filter = '';
 
-  this.pager = pagerService.create(this.items.length, 20, 1);
+  this.pager = pagerFactory.create(this.items.length, 20, 1);
 
   /**
    * Remember sort direction per property.
diff --git a/src/ui/public/pager/index.js b/src/ui/public/pager/index.js
index 74c9422c1d6f2..3f8e47d5d122a 100644
--- a/src/ui/public/pager/index.js
+++ b/src/ui/public/pager/index.js
@@ -1 +1 @@
-import './pager_service.factory';
+import './pager_factory';
diff --git a/src/ui/public/pager/pager_service.js b/src/ui/public/pager/pager.js
similarity index 97%
rename from src/ui/public/pager/pager_service.js
rename to src/ui/public/pager/pager.js
index 3ecf0b825e5aa..6a8057d77628d 100644
--- a/src/ui/public/pager/pager_service.js
+++ b/src/ui/public/pager/pager.js
@@ -2,7 +2,7 @@ function clamp(val, min, max) {
   return Math.min(Math.max(min, val), max);
 }
 
-export class PagerService {
+export class Pager {
   constructor(totalItems, pageSize, startingPage) {
     this.currentPage = startingPage;
     this.totalItems = totalItems;
diff --git a/src/ui/public/pager/pager_factory.js b/src/ui/public/pager/pager_factory.js
new file mode 100644
index 0000000000000..957c219fe3478
--- /dev/null
+++ b/src/ui/public/pager/pager_factory.js
@@ -0,0 +1,12 @@
+import uiModules from 'ui/modules';
+import { Pager } from './pager';
+
+const app = uiModules.get('kibana');
+
+app.factory('pagerFactory', () => {
+  return {
+    create(...args) {
+      return new Pager(...args);
+    }
+  };
+});
diff --git a/src/ui/public/pager/pager_service.factory.js b/src/ui/public/pager/pager_service.factory.js
deleted file mode 100644
index 93335891841db..0000000000000
--- a/src/ui/public/pager/pager_service.factory.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import uiModules from 'ui/modules';
-import { PagerService } from './pager_service';
-
-const app = uiModules.get('kibana');
-
-app.factory('pagerService', () => {
-  return {
-    create(...args) {
-      return new PagerService(...args);
-    }
-  };
-});

From 438f5c44688e44a80fbb31f6eebf4828844580ee Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 6 Feb 2017 11:36:17 -0800
Subject: [PATCH 29/31] Minor code style improvements.

---
 .../dashboard/listing/dashboard_listing.js       | 10 +++++-----
 .../visualize/listing/visualize_listing.js       | 16 ++++++++--------
 .../kbn_top_nav/bread_crumbs/bread_crumbs.js     |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

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 e583f733f28f4..ec39c2f32db09 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -64,6 +64,11 @@ export function DashboardListingController(
 
   this.pager = pagerFactory.create(this.items.length, 20, 1);
 
+  $scope.$watch(() => this.filter, () => {
+    deselectAll();
+    fetchObjects();
+  });
+
   /**
    * Boolean that keeps track of whether hits are sorted ascending (true)
    * or descending (false) by title
@@ -141,9 +146,4 @@ export function DashboardListingController(
   this.getUrlForItem = function getUrlForItem(item) {
     return `#/dashboard/${item.id}`;
   };
-
-  $scope.$watch(() => this.filter, () => {
-    deselectAll();
-    fetchObjects();
-  });
 }
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 91316e2824004..2592922745ed2 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -65,6 +65,11 @@ export function VisualizeListingController(
 
   this.pager = pagerFactory.create(this.items.length, 20, 1);
 
+  $scope.$watch(() => this.filter, () => {
+    deselectAll();
+    fetchObjects();
+  });
+
   /**
    * Remember sort direction per property.
    */
@@ -81,11 +86,11 @@ export function VisualizeListingController(
   }];
 
   this.getSortProperty = function getSortProperty() {
-    return _.find(this.sortProperties, property => property.isSelected);
+    return this.sortProperties.find(property => property.isSelected);
   };
 
   this.getSortPropertyByName = function getSortPropertyByName(name) {
-    return _.find(this.sortProperties, property => property.name === name);
+    return this.sortProperties.find(property => property.name === name);
   };
 
   this.isAscending = function isAscending() {
@@ -125,7 +130,7 @@ export function VisualizeListingController(
   };
 
   this.isItemChecked = function isItemChecked(item) {
-    return selectedItems.indexOf(item) !== -1;
+    return selectedItems.includes(item);
   };
 
   this.areAllItemsChecked = function areAllItemsChecked() {
@@ -171,9 +176,4 @@ export function VisualizeListingController(
   this.getUrlForItem = function getUrlForItem(item) {
     return `#/visualize/edit/${item.id}`;
   };
-
-  $scope.$watch(() => this.filter, () => {
-    deselectAll();
-    fetchObjects();
-  });
 }
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 4a155219184dc..bb02fef4971e0 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
@@ -39,7 +39,7 @@ module.directive('breadCrumbs', function ($location) {
 
       if ($scope.omitPages) {
         $scope.breadcrumbs = $scope.breadcrumbs.filter(breadcrumb =>
-          $scope.omitPages.indexOf(breadcrumb.toLowerCase()) === -1
+          !$scope.omitPages.includes(breadcrumb.toLowerCase())
         );
       }
 

From 794b18cc8c5c74ac0fff46f2abbe4e63e2f5ddd9 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 6 Feb 2017 11:45:00 -0800
Subject: [PATCH 30/31] Use  inject dependencies in Visualize and Dashboard
 listing.

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

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 ec39c2f32db09..1ae98b0637589 100644
--- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
+++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -4,16 +4,15 @@ import 'ui/pager';
 import { DashboardConstants } from '../dashboard_constants';
 import _ from 'lodash';
 
-export function DashboardListingController(
-  $filter,
-  $scope,
-  confirmModal,
-  kbnUrl,
-  Notifier,
-  pagerFactory,
-  Private,
-  timefilter
-) {
+export function DashboardListingController($injector, $scope) {
+  const $filter = $injector.get('$filter');
+  const confirmModal = $injector.get('confirmModal');
+  const kbnUrl = $injector.get('kbnUrl');
+  const Notifier = $injector.get('Notifier');
+  const pagerFactory = $injector.get('pagerFactory');
+  const Private = $injector.get('Private');
+  const timefilter = $injector.get('timefilter');
+
   timefilter.enabled = false;
 
   const limitTo = $filter('limitTo');
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 2592922745ed2..0cd96bee764d9 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -3,16 +3,15 @@ import 'ui/pager_control';
 import 'ui/pager';
 import _ from 'lodash';
 
-export function VisualizeListingController(
-  $filter,
-  $scope,
-  confirmModal,
-  kbnUrl,
-  Notifier,
-  pagerFactory,
-  Private,
-  timefilter
-) {
+export function VisualizeListingController($injector, $scope) {
+  const $filter = $injector.get('$filter');
+  const confirmModal = $injector.get('confirmModal');
+  const kbnUrl = $injector.get('kbnUrl');
+  const Notifier = $injector.get('Notifier');
+  const pagerFactory = $injector.get('pagerFactory');
+  const Private = $injector.get('Private');
+  const timefilter = $injector.get('timefilter');
+
   timefilter.enabled = false;
 
   const limitTo = $filter('limitTo');

From af07fa7de7293589aabdecee5f7355da6fa26d42 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 6 Feb 2017 11:47:16 -0800
Subject: [PATCH 31/31] Update Dashboard and Visualize constants to use PATH
 suffix instead of URL.

---
 .../public/dashboard/dashboard_constants.js   |  2 +-
 .../kibana/public/dashboard/index.js          |  2 +-
 .../kibana/public/visualize/editor/editor.js  |  6 +++---
 .../kibana/public/visualize/index.js          |  2 +-
 .../public/visualize/visualize_constants.js   | 10 +++++-----
 .../kibana/public/visualize/wizard/wizard.js  | 20 +++++++++----------
 6 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_constants.js b/src/core_plugins/kibana/public/dashboard/dashboard_constants.js
index 79305daf3c209..d7b4d32bfb898 100644
--- a/src/core_plugins/kibana/public/dashboard/dashboard_constants.js
+++ b/src/core_plugins/kibana/public/dashboard/dashboard_constants.js
@@ -2,5 +2,5 @@
 export const DashboardConstants = {
   ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM: 'addToDashboard',
   NEW_VISUALIZATION_ID_PARAM: 'addVisualization',
-  LANDING_PAGE_URL: '/dashboard'
+  LANDING_PAGE_PATH: '/dashboard'
 };
diff --git a/src/core_plugins/kibana/public/dashboard/index.js b/src/core_plugins/kibana/public/dashboard/index.js
index 7bea2c0edcb44..a90ad4275a9ee 100644
--- a/src/core_plugins/kibana/public/dashboard/index.js
+++ b/src/core_plugins/kibana/public/dashboard/index.js
@@ -14,7 +14,7 @@ uiRoutes
   .defaults(/dashboard/, {
     requireDefaultIndex: true
   })
-  .when(DashboardConstants.LANDING_PAGE_URL, {
+  .when(DashboardConstants.LANDING_PAGE_PATH, {
     template: dashboardListingTemplate,
     controller: DashboardListingController,
     controllerAs: 'listingController'
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.js b/src/core_plugins/kibana/public/visualize/editor/editor.js
index 476adfe6fb5b8..0d4904fea9556 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.js
@@ -21,7 +21,7 @@ import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants
 import { VisualizeConstants } from '../visualize_constants';
 
 uiRoutes
-.when(VisualizeConstants.CREATE_URL, {
+.when(VisualizeConstants.CREATE_PATH, {
   template: editorTemplate,
   resolve: {
     savedVis: function (savedVisualizations, courier, $route, Private) {
@@ -38,7 +38,7 @@ uiRoutes
     }
   }
 })
-.when(`${VisualizeConstants.EDIT_URL}/:id`, {
+.when(`${VisualizeConstants.EDIT_PATH}/:id`, {
   template: editorTemplate,
   resolve: {
     savedVis: function (savedVisualizations, courier, $route) {
@@ -312,7 +312,7 @@ function VisEditor($scope, $route, timefilter, AppState, $window, kbnUrl, courie
         } else if (savedVis.id === $route.current.params.id) {
           docTitle.change(savedVis.lastSavedTitle);
         } else {
-          kbnUrl.change(`${VisualizeConstants.EDIT_URL}/{{id}}`, { id: savedVis.id });
+          kbnUrl.change(`${VisualizeConstants.EDIT_PATH}/{{id}}`, { id: savedVis.id });
         }
       }
     }, notify.fatal);
diff --git a/src/core_plugins/kibana/public/visualize/index.js b/src/core_plugins/kibana/public/visualize/index.js
index 2ba540095b1d4..d8c3e45870ecf 100644
--- a/src/core_plugins/kibana/public/visualize/index.js
+++ b/src/core_plugins/kibana/public/visualize/index.js
@@ -26,7 +26,7 @@ uiRoutes
 .defaults(/visualize/, {
   requireDefaultIndex: true
 })
-.when(VisualizeConstants.LANDING_PAGE_URL, {
+.when(VisualizeConstants.LANDING_PAGE_PATH, {
   template: visualizeListingTemplate,
   controller: VisualizeListingController,
   controllerAs: 'listingController',
diff --git a/src/core_plugins/kibana/public/visualize/visualize_constants.js b/src/core_plugins/kibana/public/visualize/visualize_constants.js
index a9d5c5d7a9e76..eddc7bac7daed 100644
--- a/src/core_plugins/kibana/public/visualize/visualize_constants.js
+++ b/src/core_plugins/kibana/public/visualize/visualize_constants.js
@@ -1,7 +1,7 @@
 export const VisualizeConstants = {
-  LANDING_PAGE_URL: '/visualize',
-  WIZARD_STEP_1_PAGE_URL: '/visualize/new',
-  WIZARD_STEP_2_PAGE_URL: '/visualize/new/configure',
-  CREATE_URL: '/visualize/create',
-  EDIT_URL: '/visualize/edit',
+  LANDING_PAGE_PATH: '/visualize',
+  WIZARD_STEP_1_PAGE_PATH: '/visualize/new',
+  WIZARD_STEP_2_PAGE_PATH: '/visualize/new/configure',
+  CREATE_PATH: '/visualize/create',
+  EDIT_PATH: '/visualize/edit',
 };
diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
index b42aa4ebe4281..55b7e2c5fc7ec 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js
+++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -18,10 +18,10 @@ const module = uiModules.get('app/visualize', ['kibana/courier']);
 
 // Redirect old route to new route.
 routes.when('/visualize/step/1', {
-  redirectTo: VisualizeConstants.WIZARD_STEP_1_PAGE_URL,
+  redirectTo: VisualizeConstants.WIZARD_STEP_1_PAGE_PATH,
 });
 
-routes.when(VisualizeConstants.WIZARD_STEP_1_PAGE_URL, {
+routes.when(VisualizeConstants.WIZARD_STEP_1_PAGE_PATH, {
   template: visualizeWizardStep1Template,
   controller: 'VisualizeWizardStep1',
 });
@@ -37,8 +37,8 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
   $scope.visTypeUrl = function (visType) {
     const baseUrl =
       visType.requiresSearch
-      ? `#${VisualizeConstants.WIZARD_STEP_2_PAGE_URL}?`
-      : `#${VisualizeConstants.CREATE_URL}?`;
+      ? `#${VisualizeConstants.WIZARD_STEP_2_PAGE_PATH}?`
+      : `#${VisualizeConstants.CREATE_PATH}?`;
 
     const params = [`type=${encodeURIComponent(visType.name)}`];
 
@@ -58,10 +58,10 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
 // NOTE: Accessing this route directly means the user has entered into the wizard UX without
 // selecting a Visualization type in step 1. So we want to redirect them to step 1, not step 2.
 routes.when('/visualize/step/2', {
-  redirectTo: VisualizeConstants.WIZARD_STEP_1_PAGE_URL,
+  redirectTo: VisualizeConstants.WIZARD_STEP_1_PAGE_PATH,
 });
 
-routes.when(VisualizeConstants.WIZARD_STEP_2_PAGE_URL, {
+routes.when(VisualizeConstants.WIZARD_STEP_2_PAGE_PATH, {
   template: visualizeWizardStep2Template,
   controller: 'VisualizeWizardStep2',
   resolve: {
@@ -79,7 +79,7 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, timefilter,
   $scope.step2WithSearchUrl = function (hit) {
     if (addToDashMode) {
       return kbnUrl.eval(
-        `#${VisualizeConstants.CREATE_URL}` +
+        `#${VisualizeConstants.CREATE_PATH}` +
         `?type={{type}}&savedSearchId={{id}}` +
         `&${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}`,
         { type: type, id: hit.id }
@@ -87,7 +87,7 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, timefilter,
     }
 
     return kbnUrl.eval(
-      `#${VisualizeConstants.CREATE_URL}?type={{type}}&savedSearchId={{id}}`,
+      `#${VisualizeConstants.CREATE_PATH}?type={{type}}&savedSearchId={{id}}`,
       { type: type, id: hit.id }
     );
   };
@@ -103,11 +103,11 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, timefilter,
     if (!pattern) return;
 
     if (addToDashMode) {
-      return `#${VisualizeConstants.CREATE_URL}` +
+      return `#${VisualizeConstants.CREATE_PATH}` +
         `?${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}` +
         `&type=${type}&indexPattern=${pattern}`;
     }
 
-    return `#${VisualizeConstants.CREATE_URL}?type=${type}&indexPattern=${pattern}`;
+    return `#${VisualizeConstants.CREATE_PATH}?type=${type}&indexPattern=${pattern}`;
   };
 });