Add landing page with table to Visualize app. (#10212)

Backports PR #9605 **Commit 1:** Refactor Visualize Wizard to use explicit controller names, instead of defining them dynamically. * Original sha: 5778951aa4637e0fc77d0ceb3c908eb88e6eab5f * Authored by CJ Cenizal <[email protected]> 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: 5a5eecbfc69585d573f1030db0dcdec438065096 * Authored by CJ Cenizal <[email protected]> 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: 1dbffd1f9e9c165cd27d24f1ed43d779fa90e95f * Authored by CJ Cenizal <[email protected]> on 2016-12-22T01:38:35Z **Commit 4:** Fix bug with vertical alignment in Table cells. * Original sha: f69df4c4ba89a3fa62351d689928d85d21072b62 * Authored by CJ Cenizal <[email protected]> on 2016-12-22T01:41:56Z **Commit 5:** Change Visualize menu items: New goes to landing page, Open goes to wizard. * Original sha: 8ca2faf4591d4a10b3d8ef30b2ba1b1f554ec06c * Authored by CJ Cenizal <[email protected]> on 2016-12-22T01:46:22Z **Commit 6:** Move visualize/landing route to live at visualize/ instead. * Original sha: e674f6c315849542fbd1c9f1deac37aa6422d22b * Authored by CJ Cenizal <[email protected]> on 2016-12-23T21:46:21Z **Commit 7:** Refactor Visualize Wizard templates to use import syntax. * Original sha: b129af5f0598fb1d435930d18d3f7d9718d45671 * Authored by CJ Cenizal <[email protected]> on 2016-12-23T21:48:11Z **Commit 8:** Set kuiViewContent width to 100% to avoid it shrink wrapping its content. * Original sha: 94afb6f3d41ba53304a64ed92c65a1eb6ea6022a * Authored by CJ Cenizal <[email protected]> on 2016-12-23T22:00:36Z **Commit 9:** Move ToolBar buttons to the right side. Remove labels and add tooltips. * Original sha: 6a66f6f5c986ee5ecb9e0b95db28b5cc221c3f7e * Authored by CJ Cenizal <[email protected]> on 2016-12-23T22:04:49Z **Commit 10:** Fix functional tests for Visualize, to work with new landing page. * Original sha: 5a720c9fc9838136b0b1c6ecd9dadc6a6264f08c * Authored by CJ Cenizal <[email protected]> on 2016-12-23T23:47:52Z **Commit 11:** Remove unused Visualize load menu template. * Original sha: b01048892599359220b473521481b88993f97928 * Authored by CJ Cenizal <[email protected]> on 2016-12-23T23:52:24Z **Commit 12:** Remove Edit link from Visualization listing. * Original sha: a1f737fcf3ce56875fb76abc97d26c3b277fe238 * Authored by CJ Cenizal <[email protected]> on 2017-01-03T19:41:50Z **Commit 13:** Disable timepicker in Visualization listing. * Original sha: ca4adc36bd5b7d0994622de247428cfdfaa7c27b * Authored by CJ Cenizal <[email protected]> on 2017-01-05T00:18:35Z **Commit 14:** Add basic Icon example. Fix Visualize Wizard titles and layout. * Original sha: 50e2da76d3c1005a71012773867bdbf5bd0ab26d * Authored by CJ Cenizal <[email protected]> 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: 56252644f221d5dfce1208a167c0fe2bc06cdc7b * Authored by CJ Cenizal <[email protected]> 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: 93c9533beb393f9a2e23f4e8a5aab839986a6a22 * Authored by CJ Cenizal <[email protected]> on 2017-02-02T00:41:07Z **Commit 17:** Remove Open and New menu buttons from Visualize. * Original sha: f243762d8f9a31054eb45977ec735b428c65aefd * Authored by CJ Cenizal <[email protected]> on 2017-02-02T01:07:55Z **Commit 18:** Add ConfirmationModal for deleting visualizations. * Original sha: d0325baa9bdb5cce4e067eef55d14c04594ce02d * Authored by CJ Cenizal <[email protected]> on 2017-02-02T01:14:34Z **Commit 19:** Implement sorting for name and type columns in Visualize listing. * Original sha: 39ed4248561e6609b5d26e3a7bfb61bdfa8811b3 * Authored by CJ Cenizal <[email protected]> on 2017-02-02T01:21:57Z **Commit 20:** Refactor Visualize routes into VisualizeConstants file. Fix functional tests. * Original sha: 43ceb6e0e184c378fd3409f4700a67b0848c4000 * Authored by CJ Cenizal <[email protected]> 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: d1d3da7741fb32cc4536ce9c769da528cadf80d2 * Authored by CJ Cenizal <[email protected]> on 2017-02-04T00:37:28Z **Commit 22:** Add Basic Icon example. * Original sha: 880b7b42f0fd9fd8c058e07e559ec71a24486e64 * Authored by CJ Cenizal <[email protected]> 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: 668d598082fd3101ea824dedc0f6d65ef6f2c367 * Authored by CJ Cenizal <[email protected]> on 2017-02-04T00:44:06Z **Commit 24:** Redirect from old Visualize wizard routes to new ones. * Original sha: 99525ac45dbe4025d86920c61e60e2423286a8e6 * Authored by CJ Cenizal <[email protected]> on 2017-02-06T18:37:05Z **Commit 25:** Use ViewContent and Title components in Visualize wizard. * Original sha: 734c85b5abaed82ccae15340e7d8f32fca9a1b0f * Authored by CJ Cenizal <[email protected]> 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: de4f7b43e2f8d89e593e58877ee05e3891efc433 * Authored by CJ Cenizal <[email protected]> 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: 10dbff66cc817ba869d8ab3d6a4ff4d9b81f390f * Authored by CJ Cenizal <[email protected]> on 2017-02-06T19:22:09Z **Commit 28:** Rename pagerService factory to pagerFactory. * Original sha: 6eeeab6833e69ac843bf491f74a92cf14f7c7a89 * Authored by CJ Cenizal <[email protected]> on 2017-02-06T19:29:36Z **Commit 29:** Minor code style improvements. * Original sha: 438f5c44688e44a80fbb31f6eebf4828844580ee * Authored by CJ Cenizal <[email protected]> on 2017-02-06T19:36:17Z **Commit 30:** Use inject dependencies in Visualize and Dashboard listing. * Original sha: 794b18cc8c5c74ac0fff46f2abbe4e63e2f5ddd9 * Authored by CJ Cenizal <[email protected]> on 2017-02-06T19:45:00Z
sirensolutions · Feb 7, 2017 · bf3734b · bf3734b
1 parent cf20b28
commit bf3734b
Show file tree

Hide file tree

Showing 43 changed files with 850 additions and 205 deletions.
diff --git 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
@@ -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/dashboard/listing/dashboard_listing.html b/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>

diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/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}`;
+ };
 }
diff --git 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>
+ 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"