Merge pull request #6527 from stormpython/settings/searchbar

Kibana 5 Settings Redesign

.gitignore

@@ -1,4 +1,5 @@
 .aws-config.json
+.ackrc
 .DS_Store
 .node_binaries
 node_modules

src/plugins/kibana/public/settings/app.html

@@ -1,6 +1,7 @@
 <div class="app-container">
   <nav class="navbar navbar-default navbar-static-top subnav" data-test-subj="settingsNav">
     <div class="container-fluid">
+      <bread-crumbs></bread-crumbs>
       <ul class="nav navbar-nav">
         <li ng-repeat="section in sections" ng-class="section.class">
           <a class="navbar-link" kbn-href="{{section.url}}" data-test-subj="{{section.name}}">{{section.display}}</a>

src/plugins/kibana/public/settings/index.js

@@ -9,6 +9,7 @@ import 'ui/filters/start_from';
 import 'ui/field_editor';
 import 'plugins/kibana/settings/sections/indices/_indexed_fields';
 import 'plugins/kibana/settings/sections/indices/_scripted_fields';
+import 'ui/directives/bread_crumbs';
 import registry from 'ui/registry/settings_sections';
 import uiRoutes from 'ui/routes';
 import uiModules from 'ui/modules';

src/plugins/kibana/public/settings/styles/main.less

@@ -11,6 +11,10 @@ kbn-settings-objects-view {
   display: block;
 }
 
+nav.navbar {
+  height: 70px;
+}
+
 .settings-nav {
   text-transform: capitalize;
 }
@@ -19,6 +23,15 @@ li.kbn-settings-tab:first-letter {
   text-transform: capitalize;
 }
 
+kbn-settings-app {
+  div.app-container {
+    div.container-fluid {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
 kbn-settings-objects {
   form {
     margin-bottom: @line-height-computed;

src/plugins/kibana/public/visualize/styles/main.less

@@ -28,8 +28,9 @@
   }
 
   h3 {
-    margin-top: 35px;
-    padding: 0px 15px;
+    margin-top: 0px;
+    margin-bottom: 8px;
+    padding: 0px 5px;
   }
 
   .wizard-row {

src/plugins/kibana/public/visualize/wizard/step_1.html

@@ -1,3 +1,4 @@
+<bread-crumbs></bread-crumbs>
 <div class="wizard">
   <div class="wizard-column">
     <h3>Create New Visualization</h3>

src/plugins/kibana/public/visualize/wizard/step_2.html

@@ -1,3 +1,4 @@
+<bread-crumbs></bread-crumbs>
 <div class="wizard">
   <div class="wizard-column">
     <h3>From a New Search</h3>

src/ui/public/chrome/api/__tests__/angular.js

@@ -0,0 +1,19 @@
+import expect from 'expect.js';
+
+import kbnAngular from '../angular';
+import TabFakeStore from '../../__tests__/_tab_fake_store';
+import { noop } from 'lodash';
+
+describe('Chrome API :: Angular', () => {
+  describe('location helper methods', () => {
+    it('should return the sub app based on the url', () => {
+      const chrome = {
+        getInjected: noop,
+        addBasePath: noop
+      };
+      kbnAngular(chrome, {});
+    });
+    it('should return breadcrumbs based on the url', () => {
+    });
+  });
+});

src/ui/public/chrome/api/angular.js

@@ -3,6 +3,9 @@ import modules from 'ui/modules';
 
 module.exports = function (chrome, internals) {
 
+  chrome.getFirstPathSegment = _.noop;
+  chrome.getBreadcrumbs = _.noop;
+
   chrome.setupAngular = function () {
     var kibana = modules.get('kibana');
 
@@ -21,7 +24,16 @@ module.exports = function (chrome, internals) {
       a.href = chrome.addBasePath('/elasticsearch');
       return a.href;
     }()))
-    .config(chrome.$setupXsrfRequestInterceptor);
+    .config(chrome.$setupXsrfRequestInterceptor)
+    .run(($location) => {
+      chrome.getFirstPathSegment = () => {
+        return $location.path().split('/')[1];
+      };
+
+      chrome.getBreadcrumbs = () => {
+        return $location.path().split('/').slice(1);
+      };
+    });
 
     require('../directives')(chrome, internals);
 

src/ui/public/chrome/api/tabs.js

@@ -76,12 +76,6 @@ module.exports = function (chrome, internals) {
     return internals.tabs.getActive();
   };
 
-  /**
-   * @param {any} def - the default value if there isn't any active tab
-   * @return {any}
-   */
-  chrome.getActiveTabId = activeGetter('id');
-
   /**
    * @param {any} def - the default value if there isn't any active tab
    * @return {any}

src/ui/public/chrome/chrome.html

@@ -80,7 +80,7 @@
         </div>
         <!-- /Full navbar -->
       </nav>
-      <div class="application" ng-class="'tab-' + chrome.getActiveTabId('-none-') + ' ' + chrome.getApplicationClasses()" ng-view></div>
+      <div class="application" ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()" ng-view></div>
     </div>
   </div>
 </div>

src/ui/public/directives/bread_crumbs.js

@@ -0,0 +1,21 @@
+import _ from 'lodash';
+import chrome from 'ui/chrome/chrome';
+import breadCrumbsTemplate from 'ui/partials/bread_crumbs.html';
+import uiModules from 'ui/modules';
+var module = uiModules.get('kibana');
+
+module.directive('breadCrumbs', function () {
+  return {
+    restrict: 'E',
+    scope: true,
+    template: breadCrumbsTemplate,
+    controller: function ($scope) {
+      $scope.crumbs = chrome.getBreadcrumbs();
+
+      if (_.last($scope.crumbs) === '') {
+        // Remove the empty string from the end of the array
+        $scope.crumbs.pop();
+      }
+    }
+  };
+});

src/ui/public/partials/bread_crumbs.html

@@ -0,0 +1,6 @@
+<ul>
+  <li ng-repeat="crumb in crumbs">
+    <span>{{crumb}}</span>
+    <span ng-hide="$last"> / </span>
+  </li>
+</ul>

src/ui/public/styles/base.less

@@ -287,6 +287,32 @@ table {
   }
 }
 
+//== breadCrumbsTemplate
+bread-crumbs {
+  ul {
+    margin: 0;
+    padding: 8px 10px;
+    list-style-type: none;
+    text-transform: capitalize;
+
+    >li {
+      display: inline;
+      >span {
+        color: @kibanaGray2;
+      }
+      >span:hover {
+        color: @kibanaGray1;
+      }
+    }
+
+    >li:last-child {
+      >span {
+        color: @kibanaGray1;
+      }
+    }
+  }
+}
+
 //== SavedObjectFinder
 saved-object-finder {
   .row {
@@ -318,7 +344,7 @@ saved-object-finder {
         width: 15px;
       }
     }
-    
+
     .finder-hit-count, .finder-manage-object {
       min-width: 80px;
       padding: 5px;