Use <local-navigation> for context size controls

elastic · Nov 23, 2016 · 89b31e9 · 89b31e9
1 parent 2e422f7
commit 89b31e9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/core_plugins/kibana/public/context/app.html b/src/core_plugins/kibana/public/context/app.html
@@ -1,17 +1,27 @@
 <div class="app-container">
-  <kbn-top-nav name="context" config="topNavMenu">
+  <local-navigation>
     <!-- Transcluded elements. -->
     <div data-transclude-slots>
       <!-- Breadcrumbs. -->
-      <div data-transclude-slot="topLeftCorner" class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <span class="localBreadcrumb">Context</span>
-          <span ng-bind="contextApp.indexPattern.id" class="localBreadcrumb"></span>
-          <span ng-bind="contextApp.anchorUid" class="localBreadcrumb"></span>
+      <div data-transclude-slot="primaryLeft" class="localBreadcrumbs">
+        <div class="localBreadcrumb">Context</div>
+        <div ng-bind="contextApp.indexPattern.id" class="localBreadcrumb"></div>
+        <div ng-bind="contextApp.anchorUid" class="localBreadcrumb"></div>
+      </div>
+
+      <div data-transclude-slot="primaryRight" class="localMenu">
+        <div class="localMenuItem" ng-click="contextApp.actions.increaseSize()">
+          <div class="localMenuItem__icon fa fa-plus"></div>
+        </div>
+        <div class="localMenuIten">
+          {{ contextApp.size }} surrounding entries
+        </div>
+        <div class="localMenuItem" ng-click="contextApp.actions.decreaseSize()">
+          <div class="localMenuItem__icon fa fa-minus"></div>
         </div>
       </div>
     </div>
-  </kbn-top-nav>
+  </local-navigation>
 
   <div class="container-fluid" role="main">
     <div class="row">

diff --git a/src/core_plugins/kibana/public/context/app.js b/src/core_plugins/kibana/public/context/app.js
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 
+import 'ui/local_navigation';
 import uiModules from 'ui/modules';
 import contextAppTemplate from './app.html';
 import {fetchAnchor} from './api/anchor';
@@ -10,6 +11,7 @@ const module = uiModules.get('apps/context', [
   'kibana',
   'ngRoute',
 ]);
+const DEFAULT_SIZE_INCREMENT = 5;
 
 module.directive('contextApp', function ContextApp() {
   return {
@@ -42,9 +44,7 @@ function ContextAppController($q, es) {
         .then(() => (
           fetchAnchor(es, this.indexPattern, this.anchorUid, _.zipObject([this.sort]))
         ))
-        .then(anchorRow => (
-          this.anchorRow = anchorRow
-        ))
+        .then(anchorRow => this.anchorRow = anchorRow)
     ),
     fetchContextRows: () => (
       $q.resolve(this.anchorRowPromise)
@@ -59,6 +59,8 @@ function ContextAppController($q, es) {
           this.rows = [].concat(this.predecessorRows, [this.anchorRow], this.successorRows)
         ))
     ),
+    increaseSize: (value = DEFAULT_SIZE_INCREMENT) => this.actions.setSize(this.size + value),
+    decreaseSize: (value = DEFAULT_SIZE_INCREMENT) => this.actions.setSize(this.size - value),
     reload: () => {
       this.anchorRowPromise = this.actions.fetchAnchorRow();
       this.contextRowsPromise = this.actions.fetchContextRows();
@@ -68,6 +70,10 @@ function ContextAppController($q, es) {
         this.contextRowsPromise,
       ]);
     },
+    setSize: (size) => {
+      this.size = size;
+      return this.actions.fetchContextRows();
+    },
   };
 
   this.initialize();