Add landing page with table to Visualize app.

Backports PR elastic#9605

**Commit 1:**
Refactor Visualize Wizard to use explicit controller names, instead of defining them dynamically.

* Original sha: 5778951
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-21T20:58:55Z

**Commit 2:**
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.

* Original sha: 5a5eecb
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T00:08:06Z

**Commit 3:**
Add kuiIcon--basic and support icons in Table component. Display icons in Visualize landing page.

* Original sha: 1dbffd1
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:38:35Z

**Commit 4:**
Fix bug with vertical alignment in Table cells.

* Original sha: f69df4c
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:41:56Z

**Commit 5:**
Change Visualize menu items: New goes to landing page, Open goes to wizard.

* Original sha: 8ca2faf
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-22T01:46:22Z

**Commit 6:**
Move visualize/landing route to live at visualize/ instead.

* Original sha: e674f6c
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T21:46:21Z

**Commit 7:**
Refactor Visualize Wizard templates to use import syntax.

* Original sha: b129af5
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T21:48:11Z

**Commit 8:**
Set kuiViewContent width to 100% to avoid it shrink wrapping its content.

* Original sha: 94afb6f
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:00:36Z

**Commit 9:**
Move ToolBar buttons to the right side. Remove labels and add tooltips.

* Original sha: 6a66f6f
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T22:04:49Z

**Commit 10:**
Fix functional tests for Visualize, to work with new landing page.

* Original sha: 5a720c9
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T23:47:52Z

**Commit 11:**
Remove unused Visualize load menu template.

* Original sha: b010488
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T23:52:24Z

**Commit 12:**
Remove Edit link from Visualization listing.

* Original sha: a1f737f
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-03T19:41:50Z

**Commit 13:**
Disable timepicker in Visualization listing.

* Original sha: ca4adc3
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-05T00:18:35Z

**Commit 14:**
Add basic Icon example. Fix Visualize Wizard titles and layout.

* Original sha: 50e2da7
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-17T16:57:31Z

**Commit 15:**
Remove icon cells from Table component. Fix Visualize landing table header bug and type icon position.

* Original sha: 5625264
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-01T18:19:49Z

**Commit 16:**
Change Visualize route names. Add omitPages attribute to breadcrumbs directive. Make Visualize breadcrumbs into links.

* Original sha: 93c9533
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T00:41:07Z

**Commit 17:**
Remove Open and New menu buttons from Visualize.

* Original sha: f243762
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:07:55Z

**Commit 18:**
Add ConfirmationModal for deleting visualizations.

* Original sha: d0325ba
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:14:34Z

**Commit 19:**
Implement sorting for name and type columns in Visualize listing.

* Original sha: 39ed424
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T01:21:57Z

**Commit 20:**
Refactor Visualize routes into VisualizeConstants file. Fix functional tests.

* Original sha: 43ceb6e
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-02T18:45:17Z

**Commit 21:**
Add pager_controls directive and pager service. Add pagination to Dashboard and Visualize landing pages. Change Dashboard listing to use hrefs for each dashboard.

* Original sha: d1d3da7
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:37:28Z

**Commit 22:**
Add Basic Icon example.

* Original sha: 880b7b4
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:41:59Z

**Commit 23:**
Use ng-if instead of ng-hide to hide/reveal Table action buttons in Dashboard listing.

* Original sha: 668d598
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-04T00:44:06Z

**Commit 24:**
Redirect from old Visualize wizard routes to new ones.

* Original sha: 99525ac
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T18:37:05Z

**Commit 25:**
Use ViewContent and Title components in Visualize wizard.

* Original sha: 734c85b
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T18:46:50Z

**Commit 26:**
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.

* Original sha: de4f7b4
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:05:16Z

**Commit 27:**
- 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.

* Original sha: 10dbff6
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:22:09Z

**Commit 28:**
Rename pagerService factory to pagerFactory.

* Original sha: 6eeeab6
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:29:36Z

**Commit 29:**
Minor code style improvements.

* Original sha: 438f5c4
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:36:17Z

**Commit 30:**
Use  inject dependencies in Visualize and Dashboard listing.

* Original sha: 794b18c
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-06T19:45:00Z

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'
 };

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'

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html

@@ -31,17 +31,13 @@
         </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"
           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>
@@ -53,15 +49,30 @@
           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>
         </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 -->
+    <!-- NoItems -->
     <div
       class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
       ng-if="!listingController.items.length && listingController.filter"
@@ -78,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">
@@ -87,7 +98,7 @@
             href="#/dashboard/create"
           >
             <span class="kuiButton__icon kuiIcon fa-plus"></span>
-            Add a dashboard
+            Create a dashboard
           </a>
         </div>
       </div>
@@ -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>

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js

@@ -1,64 +1,91 @@
 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(
-  $scope,
-  kbnUrl,
-  Notifier,
-  Private,
-  timefilter,
-  confirmModal
-) {
+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');
   // TODO: Extract this into an external service.
   const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
   const dashboardService = services.dashboards;
   const notify = new Notifier({ location: 'Dashboard' });
 
   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();
       });
   };
 
+  const deselectAll = () => {
+    selectedItems = [];
+  };
+
+  const selectAll = () => {
+    selectedItems = this.pageOfItems.slice(0);
+  };
+
   this.items = [];
+  this.pageOfItems = [];
   this.filter = '';
 
+  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
    * @type {Boolean}
    */
   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();
+    deselectAll();
+    calculateItemsOnPage();
   };
 
   this.toggleAll = function toggleAll() {
     if (this.areAllItemsChecked()) {
-      selectedItems = [];
+      deselectAll();
     } else {
-      selectedItems = this.items.slice(0);
+      selectAll();
     }
   };
 
@@ -76,7 +103,7 @@ export function DashboardListingController(
   };
 
   this.areAllItemsChecked = function areAllItemsChecked() {
-    return this.getSelectedItemsCount() === this.items.length;
+    return this.getSelectedItemsCount() === this.pageOfItems.length;
   };
 
   this.getSelectedItemsCount = function getSelectedItemsCount() {
@@ -90,10 +117,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!',
       {
@@ -102,11 +130,19 @@ export function DashboardListingController(
       });
   };
 
-  this.open = function open(item) {
-    kbnUrl.change(item.url.substr(1));
+  this.onPageNext = () => {
+    deselectAll();
+    this.pager.nextPage();
+    calculateItemsOnPage();
   };
 
-  $scope.$watch(() => this.filter, () => {
-    fetchObjects();
-  });
+  this.onPagePrevious = () => {
+    deselectAll();
+    this.pager.previousPage();
+    calculateItemsOnPage();
+  };
+
+  this.getUrlForItem = function getUrlForItem(item) {
+    return `#/dashboard/${item.id}`;
+  };
 }

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>
+        page-title="getVisualizationTitle()"
+        use-links="true"
+        omit-current-page="true"
+        omit-pages="['edit']"
+      ></bread-crumbs>
 
       <!-- Search. -->
       <div
@@ -29,11 +27,11 @@
             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>
 
-        <!-- 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"