Merge pull request #53 from rashidkpc/master

Adds a screen for configuring index patterns
elastic · Apr 11, 2014 · 32c2e05 · 32c2e05
2 parents 97c3255 + 5bf2c5b
commit 32c2e05
Show file tree

Hide file tree

Showing 5 changed files with 222 additions and 25 deletions.
diff --git a/src/kibana/apps/settings/controllers/settings.js b/src/kibana/apps/settings/controllers/settings.js
@@ -3,9 +3,7 @@ define(function (require) {
 
   var app = require('modules').get('app/settings');
 
-  require('services/state');
-  //require('../services/indices_pattern');
-  require('directives/fixed_scroll');
+  require('filters/start_from');
 
   var navHtml = require('text!../partials/nav.html');
 
@@ -20,35 +18,139 @@ define(function (require) {
   var template = function (params) {
     return '' +
         '<div ng-controller="settings">' +
-          navHtml +
+          //navHtml +
           sections[params] +
         '</div>';
   };
 
   require('routes')
   .when('/settings', {
-    redirectTo: '/settings/general'
+    redirectTo: '/settings/indices'
+  })
+  .when('/settings/indices', {
+    template: template('indices'),
+    reloadOnSearch: false
   })
   .when('/settings/indices/:id?', {
     template: template('indices'),
-    resolve: {
-      index: function (indexPattern, $route) {
-        console.log(indexPattern);
-        //return indexPattern.get($route.current.params.id);
-      }
-    },
     reloadOnSearch: false
   });
 
 
-  app.controller('settings', function ($scope, config, courier, createNotifier, state, $routeParams) {
+  app.controller('settings', function ($scope, configFile, courier, createNotifier, $route, $routeParams, $location, es) {
+
+    var notify = createNotifier({
+      location: 'Index Settings'
+    });
+
+    var init = function () {
+      $scope.getPatterns();
+      $scope.indices = {
+        id: $routeParams.id,
+        table: {
+          by: 'field',
+          reverse: false,
+          page: 0,
+          max: 20
+        }
+      };
+      console.log($scope.indices);
+
+      if (!!$scope.indices.id) {
+        loadPattern($scope.indices.id);
+      }
+    };
+
+    var loadPattern = function (pattern) {
+      es.get({
+        index: configFile.kibanaIndex,
+        type: 'mapping',
+        id: pattern
+      })
+      .then(function (resp) {
+        $scope.indices.mapping = _.map(resp._source, function (v, k) {
+          return {field: k, mapping: v};
+        });
+      })
+      .catch(function (err) {
+        $location.path('/settings/indices');
+      });
+    };
+
+    $scope.getPatterns = function (pattern) {
+      var source = courier.createSource('search').index(configFile.kibanaIndex).type('mapping');
+      source.query({match_all: {}})
+        .fetch()
+        .then(function (resp) {
+          $scope.indices.patterns = _.map(resp.hits.hits, function (hit) {
+            return hit._id;
+          });
+        });
+      source.destroy();
+    };
+
+    $scope.refreshFields = function (pattern) {
+      var source = courier.createSource('search').index(pattern);
+      var mapping = source.clearFieldCache().then(function () {
+        $scope.addPattern(pattern);
+      });
+    };
+
+    $scope.removePattern = function (pattern) {
+      es.delete({
+        index: configFile.kibanaIndex,
+        type: 'mapping',
+        id: pattern
+      })
+      .then(function (resp) {
+        es.indices.refresh({index: configFile.kibanaIndex})
+        .then(function () {
+          $location.path('/settings/indices');
+        });
+      })
+      .catch(function (err) {
+        $location.path('/settings/indices');
+      });
+    };
+
+    $scope.addPattern = function (pattern) {
+      console.log('adding');
+      var source = courier.createSource('search').index(pattern);
+      var mapping = source.getFields();
+      mapping.then(function (mapping) {
+        es.indices.refresh({index: configFile.kibanaIndex})
+        .then(function () {
+          $location.path('/settings/indices/' + pattern);
+          source.destroy();
+        });
+      })
+      .catch(function (err) {
+        if (err.status >= 400) {
+          notify.error('Could not locate any indices matching that pattern. Please add the index to Elasticsearch');
+        }
+      });
+    };
+
+    $scope.setFieldSort = function (by) {
+      if ($scope.indices.table.by === by) {
+        $scope.indices.table.reverse = !$scope.indices.table.reverse;
+      } else {
+        $scope.indices.table.by = by;
+      }
+    };
 
-    $scope.sectionList = sectionList;
+    $scope.sortClass = function (column) {
+      if ($scope.indices.table.by !== column) return;
+      return $scope.indices.table.reverse ? ['fa', 'fa-sort-asc'] : ['fa', 'fa-sort-desc'];
+    };
 
-    $scope.activeTab = function (tabName) {
-      return ($routeParams.section === tabName) ? 'active' : '';
+    $scope.tablePages = function () {
+      if (!$scope.indices.mapping) return 0;
+      return Math.ceil($scope.indices.mapping.length / $scope.indices.table.max);
     };
 
+    init();
+
     $scope.$emit('application.load');
   });
 

diff --git a/src/kibana/apps/settings/partials/indices.html b/src/kibana/apps/settings/partials/indices.html
@@ -1,19 +1,88 @@
-<div>
+<div bindonce>
   <div class="col-md-2 sidebar-container">
     <div class="sidebar-list">
       <div class="sidebar-list-header">
-        <h5>Index Patterns</h5>
+        <h5>Index Patterns <a ng-show="indices.id" href="#/settings/indices" class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> Add New</a></h5>
       </div>
-      <ul bindonce class="list-unstyled">
-        <li bindonce class="sidebar-item">
-          <div ng-click="loadIndex(field)" class="sidebar-item-title">
-            <span field-name="field.name" field-type="field.type"></span>
-          </div>
+      <ul class="list-unstyled">
+        <li class="sidebar-item" ng-repeat="pattern in indices.patterns">
+          <a ng-href="#/settings/indices/{{pattern}}">
+            <div class="sidebar-item-title" ng-class="{'active': pattern == indices.id}">
+              <span bo-text="pattern"></span>
+            </div>
+          </a>
         </li>
       </ul>
     </div>
   </div>
   <div class="col-md-10">
-  {{lol}}
+
+    <div class="container-fluid">
+
+      <div ng-show="!indices.id">
+        <div class="col-md-12">
+          <div class="page-header">
+            <h1>Configure an index pattern</h1>
+            In order to use Kibana you must configure at least one index pattern. Index patterns are
+            used to identify the Elasticsearch index to run search and analytics against. They are also
+            used to configure fields.
+          </div>
+          <form name="form" role="form" class="well">
+            <div class="form-group">
+              <label>Index Name <small>or pattern</small></label>
+              <input type="text" class="form-control" placeholder="Enter index name"
+                ng-model="indices.newIndex.pattern" required>
+            </div>
+            <button type="submit" class="btn btn-primary"
+              ng-disabled="form.$invalid"
+              ng-click="addPattern(indices.newIndex.pattern)">Create</button>
+          </form>
+        </div>
+      </div>
+
+      <div ng-show="indices.id">
+        <div class="col-md-12">
+          <div class="page-header">
+            <h1>
+              {{indices.id}}
+              <button class="btn btn-warning" ng-click="refreshFields(indices.id)">
+                <i class="fa fa-refresh"></i>
+              </button>
+              <button class="btn btn-danger" ng-click="removePattern(indices.id)">
+                <i class="fa fa-ban"></i>
+              </button>
+
+            </h1>
+            This page lists every field in the <strong>{{indices.id}}</strong> index and the field's
+            associated core type as recorded by Elasticsearch
+          </div>
+
+          <div ng-hide="tablePages() == 1">
+            <center>
+              <button class="btn btn-sm" ng-disabled="indices.table.page == 0" ng-click="indices.table.page=indices.table.page-1">
+                Previous
+              </button>
+              {{indices.table.page+1}}/{{tablePages()}}
+              <button class="btn btn-sm" ng-disabled="indices.table.page >= indices.mapping.length/indices.table.max - 1" ng-click="indices.table.page=indices.table.page+1">
+                Next
+              </button>
+            </center>
+          </div>
+
+          <table class="table">
+            <thead>
+              <th ng-click="setFieldSort('field')">field <i ng-class="sortClass('field')"></i></th>
+              <th ng-click="setFieldSort('mapping.type')">type <i ng-class="sortClass('mapping.type')"></i></th>
+            </thead>
+            <tr ng-repeat="field in indices.mapping | orderBy:indices.table.by:indices.table.reverse | startFrom:indices.table.page*indices.table.max | limitTo:indices.table.max">
+              <td bo-text="field.field"></td>
+              <td bo-text="field.mapping.type"></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+
+    </div>
+
   </div>
 </div>
diff --git a/src/kibana/filters/start_from.js b/src/kibana/filters/start_from.js
@@ -0,0 +1,11 @@
+define(function (require) {
+  require('modules')
+    .get('kibana/filters')
+    .filter('startFrom', function () {
+      return function (input, start) {
+        if (!input) return [];
+        start = +start; //parse to int
+        return input.slice(start);
+      };
+    });
+});
diff --git a/src/kibana/styles/main.css b/src/kibana/styles/main.css
@@ -6784,14 +6784,21 @@ kbn-table th:hover .table-header-sortchange {
   border-top: 1px solid #e3e3e3;
   font-size: 11px;
 }
+.sidebar-container .sidebar-list .sidebar-item a {
+  color: #333333;
+}
+.sidebar-container .sidebar-list .sidebar-item a:hover {
+  text-decoration: none;
+}
 .sidebar-container .sidebar-list .sidebar-item .sidebar-item-title {
   padding: 5px 10px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .sidebar-container .sidebar-list .sidebar-item .sidebar-item-title:hover,
-.sidebar-container .sidebar-list .sidebar-item .sidebar-item-title:hover .text-muted {
+.sidebar-container .sidebar-list .sidebar-item .sidebar-item-title:hover .text-muted,
+.sidebar-container .sidebar-list .sidebar-item .active {
   background-color: #428bca;
   color: #ffffff;
 }
diff --git a/src/kibana/styles/main.less b/src/kibana/styles/main.less
@@ -151,13 +151,21 @@ kbn-table {
       border-top: 1px solid @well-border;
       font-size: @font-size-smaller;
 
+      a {
+        color: @text-color;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+
       .sidebar-item-title {
         padding: 5px 10px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .sidebar-item-title:hover, .sidebar-item-title:hover .text-muted {
+      .sidebar-item-title:hover, .sidebar-item-title:hover .text-muted, .active {
         background-color: @component-active-bg;
         color: @component-active-color;
       }