Change Visualize route names. Add omitPages attribute to breadcrumbs …

…directive. Make Visualize breadcrumbs into links.
elastic · Feb 4, 2017 · 93c9533 · 93c9533
1 parent 5625264
commit 93c9533
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 27 deletions.
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>
+        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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);