added searching to the visualize app

src/kibana/apps/visualize/controllers/editor.js

@@ -6,6 +6,7 @@ define(function (require) {
 
   require('../saved_visualizations/saved_visualizations');
   require('notify/notify');
+  require('filters/uriescape');
 
   var app = require('modules').get('app/visualize', [
     'kibana/notify',
@@ -56,7 +57,7 @@ define(function (require) {
     $scope.fields = _.sortBy(indexPattern.fields, 'name');
     $scope.fields.byName = indexPattern.fieldsByName;
 
-    var $state = new AppState(vis.getState());
+    var $state = $scope.state = new AppState(vis.getState());
 
     $scope.vis = vis;
 
@@ -73,6 +74,19 @@ define(function (require) {
       });
     };
 
+    /**
+     * YOU PROBABLY WANT write|readStateAndFetch
+     */
+    var justFetch = function () {
+      // we use state to track query, must write before we fetch
+      if ($state.query) {
+        vis.searchSource.set('query', $state.query);
+      } else {
+        vis.searchSource.set('query', false);
+      }
+      vis.searchSource.fetch();
+    };
+
     /**
      * Write the latest changes made on the visualization to the $state. This
      * will cause a fetch if there were changes
@@ -82,7 +96,7 @@ define(function (require) {
     var writeStateAndFetch = function () {
       _.assign($state, vis.getState());
       $state.commit();
-      vis.searchSource.fetch();
+      justFetch();
     };
 
     /**
@@ -92,7 +106,7 @@ define(function (require) {
     var readStateAndFetch = function () {
       // update and commit the state, which will update the vis dataSource if there were new changes
       vis.setState($state);
-      vis.searchSource.fetch();
+      justFetch();
     };
 
     /**
@@ -164,6 +178,36 @@ define(function (require) {
     // objects to make available within the config panel's scope
     $scope.conf = _.pick($scope, 'doSave', 'vis');
 
+    $scope.unlink = function () {
+      // display unlinking for a few seconds, unless it is double clicked
+      $scope.unlinking = setTimeout($scope.doneUnlinking, 1500);
+
+      delete vis.savedSearchId;
+
+      $state.query = vis.searchSource.get('query');
+
+      var parent = vis.searchSource.parent();
+      vis.searchSource.set(parent.toJSON());
+      vis.searchSource.inherits(parent.parent());
+    };
+    $scope.doneUnlinking = function () {
+      $scope.unlinking = clearTimeout($scope.unlinking);
+      $scope.linked = false;
+    };
+
+    $scope.linked = !!vis.savedSearchId;
+    if ($scope.linked) {
+      // possibly left over state from unsaved unlinking
+      delete $state.query;
+    } else {
+      var q = vis.searchSource.get('query');
+      if (_.isObject(q)) {
+        $state.query = q.query_string.query;
+      } else {
+        $state.query = q;
+      }
+    }
+
     // init
     init();
   });

src/kibana/apps/visualize/directives/search_editor.js

@@ -0,0 +1,15 @@
+define(function (require) {
+  var module = require('modules').get('app/visualize');
+  module.directive('visSearchEditor', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        vis: '='
+      },
+      template: require('text!../partials/search_editor.html'),
+      link: function ($scope, $el) {
+
+      }
+    };
+  });
+});

src/kibana/apps/visualize/editor.html

@@ -1,18 +1,45 @@
- <div ng-controller="VisualizeEditor">
+ <div ng-controller="VisualizeEditor" class="vis-editor">
   <nav class="navbar navbar-default navbar-static-top">
     <div class="container-fluid">
-      <div class="navbar-header" ng-if="vis.title">
-        <span class="navbar-brand pull-left">
+      <div ng-if="vis.title" class="navbar-header pull-left">
+        <span class="navbar-brand">
           {{vis.title}}
         </span>
       </div>
 
-      <ul class="nav navbar-nav pull-left">
+      <ul class="nav navbar-nav pull-right">
         <li><a ng-click="startOver()" class="navbar-link"><i class="fa fa-file-o"></i></a></li>
         <li><a ng-click="toggleSave()" class="navbar-link"><i class="fa fa-save"></i></a></li>
         <li><a ng-click="toggleLoad()" class="navbar-link"><i class="fa fa-folder-open"></i></a></li>
         <li><a class="navbar-link" ng-click="doVisualize()"><i class="fa fa-refresh"></i></a></li>
       </ul>
+
+      <form ng-submit="doVisualize()" ng-class="{ 'navbar-form': true, 'first': !vis.title }">
+        <div class="form-group">
+          <div class="input-group">
+            <input
+              placeholder="Search..."
+              type="text"
+              class="form-control ng-pristine ng-valid"
+              ng-model="state.query">
+            <span class="input-group-addon" ng-click="doVisualize()"><span class="fa fa-search"></span></span>
+
+            <div ng-if="linked && !unlinking" ng-dblclick="unlink()" class="bitty-modal">
+              <i class="fa fa-link"></i>
+              &nbsp;
+              This visualization is linked to the <a href="#/discover/{{ vis.savedSearchId | uriescape }}">{{ vis.savedSearchId | json}}</a> Saved Search
+              <kbn-info
+                placement="bottom"
+                info="To unlink this one visualization and modify it's data source, double click the link icon">
+              </kbn-info>
+            </div>
+
+            <div ng-if="linked && unlinking" ng-click="doneUnlinking()" class="bitty-modal">
+              <i class="fa fa-chain-broken"></i> Unlinked!
+            </div>
+          </div>
+        </div>
+      </form>
     </div>
   </nav>
   <config
@@ -21,23 +48,25 @@
   </config>
   <div class="container-fluid">
     <div class="row vis-editor-content">
-      <div class="col-md-2 sidebar-container">
-        <form class="sidebar-list">
-          <div class="sidebar-list-header">
-            <h5>Dimensions</h5>
-          </div>
-          <ul class="list-unstyled">
-            <li ng-repeat="category in visConfigCategories.displayOrder" class="sidebar-item">
-              <vis-config-category
-                vis="vis"
-                category="vis[category.name]"
-                fields="fields">
-              </vis-config-category>
-            </li>
-          </ul>
-        </form>
+      <div class="vis-sidebar">
+        <div class="sidebar-container">
+          <form class="sidebar-list">
+            <div class="sidebar-list-header">
+              <h5>Dimensions</h5>
+            </div>
+            <ul class="list-unstyled">
+              <li ng-repeat="category in visConfigCategories.displayOrder" class="sidebar-item">
+                <vis-config-category
+                  vis="vis"
+                  category="vis[category.name]"
+                  fields="fields">
+                </vis-config-category>
+              </li>
+            </ul>
+          </form>
+        </div>
       </div>
-      <div class="col-md-10 vis-canvas">
+      <div class="vis-canvas">
         <vis-canvas><visualize vis="vis"></visualize></vis-canvas>
       </div>
     </div>

src/kibana/apps/visualize/index.js

@@ -7,6 +7,7 @@ define(function (require) {
   require('./directives/canvas');
   require('./directives/visualize');
   require('./directives/config_category');
+  require('./directives/search_editor');
 
   require('routes')
   .when('/visualize', {

src/kibana/apps/visualize/styles/main.css

@@ -69,6 +69,28 @@
 .modal-footer:after {
   clear: both;
 }
+@media (min-width: 992px) {
+  .vis-editor-content {
+    display: flex;
+    -webkit-flex-direction: row;
+    -moz-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-justify-content: flex-start;
+    -moz-justify-content: flex-start;
+    -ms-justify-content: flex-start;
+    justify-content: flex-start;
+  }
+  .vis-editor-content .vis-sidebar {
+    width: 300px;
+  }
+  .vis-editor-content .vis-canvas {
+    -webkit-flex-grow: 1;
+    -moz-flex-grow: 1;
+    -ms-flex-grow: 1;
+    flex-grow: 1;
+  }
+}
 .vis-editor-content vis-config-editor {
   display: block;
 }
@@ -91,13 +113,36 @@
 .vis-editor-content .agg-config-interval td:first-child {
   padding-left: 0px;
 }
-.vis-editor-content vis-canvas {
-  display: block;
-  height: 800px;
-  width: 95%;
-  margin: 0 auto;
-  overflow: auto;
-}
 .vis-wizard h1 {
   margin-top: 45px;
 }
+vis-canvas {
+  display: block;
+}
+.vis-editor .navbar .form-group {
+  display: block;
+}
+.vis-editor .navbar .input-group {
+  position: relative;
+}
+.vis-editor .navbar .navbar-form.first {
+  margin-left: -15px;
+}
+.vis-editor .navbar .bitty-modal {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 10;
+  background: rgba(70, 82, 93, 0.9);
+  color: white;
+  text-align: center;
+  padding-top: 6px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

src/kibana/apps/visualize/styles/main.less

@@ -1,8 +1,25 @@
 @import (reference) "../../../styles/_bootstrap.less";
 @import (reference) "../../../styles/theme/_theme.less";
+@import (reference) "../../../styles/_variables.less";
+@import (reference) "../../../styles/_mixins.less";
+
+@media (min-width: @screen-md-min) {
+  .vis-editor-content {
+    display: flex;
+    .flex-direction(row);
+    .justify-content(flex-start);
+
+    .vis-sidebar {
+      width: 300px;
+    }
+
+    .vis-canvas {
+      .flex-grow(1);
+    }
+  }
+}
 
 .vis-editor-content {
-
   vis-config-editor {
     display: block;
   }
@@ -31,14 +48,6 @@
       }
     }
   }
-
-  vis-canvas {
-    display: block;
-    height: 800px;
-    width: 95%;
-    margin: 0 auto;
-    overflow: auto;
-  }
 }
 
 .vis-wizard {
@@ -46,3 +55,46 @@
     margin-top: 45px;
   }
 }
+
+vis-canvas {
+  display: block;
+}
+
+.vis-editor .navbar {
+  .form-group {
+    display: block;
+  }
+  .input-group {
+    position: relative;
+  }
+  .navbar-form.first {
+    margin-left: -15px;
+  }
+  .bitty-modal {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 10;
+    background: rgba(70, 82, 93, 0.9);
+    color: white;
+    text-align: center;
+    padding-top: 6px;
+    .prevent-selection;
+  }
+}
+
+// vis-search-editor {
+//   display: block;
+//   background: @sidebar-bg;
+//   text-align: center;
+//   min-height: 0;
+//   border-bottom: 1px solid darken(@sidebar-bg, 10%);
+//   .prevent-selection;
+
+//   color: @sidebar-color;
+//   a {
+//     color: @sidebar-color;
+//   }
+// }

src/kibana/components/courier/data_source/search_source.js

@@ -112,7 +112,7 @@ define(function (require) {
         });
       }
 
-      if (val == null) return;
+      if (val == null || !key || !_.isString(key)) return;
 
       switch (key) {
       case 'filter':
@@ -131,7 +131,12 @@ define(function (require) {
         /* fall through */
       default:
         state.body = state.body || {};
-        if (key && state.body[key] == null) {
+        // ignore if we already have a value
+        if (state.body[key] == null) {
+          if (key === 'query' && _.isString(val)) {
+            val = { query_string: { query: val }};
+          }
+
           state.body[key] = val;
         }
       }

src/kibana/filters/uriescape.js

@@ -0,0 +1,9 @@
+define(function (require) {
+  require('modules')
+    .get('kbn/filters')
+    .filter('uriescape', function () {
+      return function (str) {
+        return encodeURIComponent(str);
+      };
+    });
+});

src/kibana/styles/_mixins.less

@@ -154,4 +154,12 @@
   -moz-flex-grow: @rule;
   -ms-flex-grow: @rule;
   flex-grow: @rule;
+}
+.prevent-selection () {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }

src/kibana/styles/_sidebar.less

@@ -14,6 +14,7 @@
     .sidebar-list-header {
       padding-left: 10px;
       color: @sidebar-header-color;
+      border: 1px solid rgba(0, 0, 0, 0);
     }
     .sidebar-item {
       border-top: 1px solid @sidebar-border;

src/kibana/styles/main.css

@@ -6827,7 +6827,9 @@ button.close {
 .glyphicon-chevron-right:before {
   content: "\f061";
 }
+html,
 body {
+  height: 100%;
   margin: 0px;
 }
 .content {
@@ -7036,6 +7038,10 @@ kbn-table tr.even td {
   padding-top: 2px;
   padding-bottom: 2px;
 }
+.navbar > .container-fluid > .navbar-nav:not(.pull-right):first-child,
+.navbar > .container-fluid > .navbar-form:not(.pull-right):first-child {
+  margin-left: -15px;
+}
 .navbar-static-top .navbar-right {
   font-size: 13px;
 }
@@ -7131,6 +7137,7 @@ table td .fa {
 .sidebar-container .sidebar-list .sidebar-list-header {
   padding-left: 10px;
   color: #777777;
+  border: 1px solid rgba(0, 0, 0, 0);
 }
 .sidebar-container .sidebar-list .sidebar-item {
   border-top: 1px solid transparent;

src/kibana/styles/main.less

@@ -17,7 +17,9 @@
 
 @fa-font-path: "../../bower_components/font-awesome/fonts";
 
+html,
 body {
+  height: 100%;
   margin: 0px;
 }
 
@@ -92,6 +94,16 @@ notifications {
    padding-bottom: 2px;
 }
 
+.navbar > .container-fluid {
+  > .navbar-nav,
+  > .navbar-form {
+    &:not(.pull-right):first-child {
+      // This is how .navbar-brand accomplishes it's solid placement
+      margin-left: -15px;
+    }
+  }
+}
+
 // right section of the main nav base
 .navbar-static-top .navbar-right {
   font-size: @font-size-small;

tasks/config/less.js

@@ -1,8 +1,12 @@
 module.exports = {
   src: {
     src: [
-      '<%= app %>/**/styles/**/*.less',
-      '!<%= src %>/**/_*.less'
+      '<%= src %>/kibana/apps/dashboard/styles/main.less',
+      '<%= src %>/kibana/apps/discover/styles/main.less',
+      '<%= src %>/kibana/apps/settings/styles/main.less',
+      '<%= src %>/kibana/apps/visualize/styles/main.less',
+      '<%= src %>/kibana/apps/visualize/styles/visualization.less',
+      '<%= src %>/kibana/styles/main.less'
     ],
     expand: true,
     ext: '.css',