Reworked the examples app to be a better example of how other apps could be formatted

This commit is contained in:
Spencer Alger 2014-02-24 15:18:34 -07:00
parent b2b5db4ff2
commit 193f4f999f
21 changed files with 6285 additions and 154 deletions

3
.gitignore vendored
View file

@ -1,3 +1,2 @@
.DS_Store
node_modules
src/kibana/styles/*.css
node_modules

View file

@ -9,7 +9,7 @@
<!-- load the root require context -->
<script src="bower_components/requirejs/require.js"></script>
<script src="kibana/require.config.js"></script>
<script>require(['main'], function () {});</script>
<script>require(['kibana'], function () {});</script>
<link rel="stylesheet" href="kibana/styles/main.css" >
</head>
<body>

View file

@ -1,3 +1,5 @@
define(function (require) {
require('css!./styles/main.css');
});

View file

@ -1,3 +1,5 @@
define(function (require) {
require('css!./styles/main.css');
});

View file

@ -1,8 +1,8 @@
<div ng-controller="examples">
<div ng-controller="examples" id="examples">
<ul class="nav nav-tabs">
<li ng-repeat="example in examples" ng-class="{ active: active === example }">
<a ng-click="makeActive(example)">{{example}}</a>
</li>
</ul>
<div ng-include="activeUrl" onload="exampleLoaded()" ></div>
<ng-include src="activeUrl" onload="exampleLoaded()" ></ng-include>
</div>

View file

@ -1,135 +1,145 @@
define(function (require) {
var angular = require('angular');
var kibana = require('kibana');
angular
.module('kibana/controllers')
.controller('examples', function ($scope, $location, courier) {
$scope.examples = [
'config',
'mapper',
'courier'
];
require('css!./styles/index.css');
$scope.makeActive = function (example) {
$scope.active = example;
$scope.activeUrl = 'kibana/apps/examples/partials/' + example + '.html';
};
var app = angular.module('app/examples', []);
kibana.useModule(app);
$scope.exampleLoaded = function () {
if ($scope.active !== 'config') {
courier.fetch();
}
};
});
// main controller for the examples
app.controller('examples', function ($scope, $location, courier) {
$scope.examples = [
'config',
'mapper',
'courier'
];
angular
.module('kibana/directives')
.directive('configTest', function () {
return {
restrict: 'E',
template: 'My favorite number is {{favoriteNum}} <button ng-click="click()">New Favorite</button>',
controller: function ($scope, config) {
config.$bind($scope, 'favoriteNum', {
default: 0
$scope.makeActive = function (example) {
$scope.active = example;
$scope.activeUrl = 'kibana/apps/examples/partials/' + example + '.html';
};
$scope.exampleLoaded = function () {
if ($scope.active !== 'config') {
courier.fetch();
}
};
});
// verify that config can be used, that it is stored, and that changes to it can be seen across tabs
app.directive('configExample', function () {
return {
restrict: 'E',
template: 'My favorite number is {{favoriteNum}} <button ng-click="click()">New Favorite</button>',
controller: function ($scope, config) {
config.$bind($scope, 'favoriteNum', {
default: 0
});
$scope.click = function () {
$scope.favoriteNum++;
};
}
};
});
// verify that a search can be created and it will automatically fetch results
app.directive('courierExample', function () {
return {
restrict: 'E',
scope: {
type: '@'
},
template: '<strong style="float:left">{{count}} :&nbsp;</strong><pre>{{json}}</pre>',
controller: function ($scope, courier) {
$scope.count = 0;
var source = courier.rootSearchSource.extend()
.type($scope.type)
.source({
include: 'country'
})
.$scope($scope)
.on('results', function (resp) {
$scope.count ++;
$scope.json = JSON.stringify(resp.hits, null, ' ');
});
}
};
});
// verify that a doc can be fetched, and it will be updated across tabs
app.directive('courierDocExample', function () {
return {
restrict: 'E',
scope: {
id: '@',
type: '@',
index: '@'
},
template: '<strong style="float:left">{{count}} : <button ng-click="click()">reindex</button> :&nbsp;</strong><pre>{{json}}</pre>',
controller: function (courier, $scope) {
$scope.count = 0;
var currentSource;
$scope.click = function () {
if (currentSource) {
source.doIndex(currentSource);
}
};
var source = courier.createSource('doc')
.id($scope.id)
.type($scope.type)
.index($scope.index)
.$scope($scope)
.on('results', function (doc) {
currentSource = doc._source;
$scope.count ++;
$scope.json = JSON.stringify(doc, null, ' ');
});
}
};
});
// fetch the mapping for an index pattern
app.directive('mappingExample', function () {
return {
restrict: 'E',
scope: {
type: '@',
fields: '@'
},
template: 'Mappings:<br><div ng-repeat="(name,mapping) in mappedFields">{{name}} = {{mapping.type}}</div><hr>' +
'<strong style="float:left">{{count}} :&nbsp;</strong><pre>{{json}}</pre>',
controller: function ($rootScope, $scope, courier) {
$scope.count = 0;
$scope.mappedFields = {};
var source = courier.rootSearchSource.extend()
.index('logstash-*')
.type($scope.type)
.source({
include: 'geo'
})
.$scope($scope)
.on('results', function (resp) {
$scope.count ++;
$scope.json = JSON.stringify(resp.hits, null, ' ');
});
$scope.click = function () {
$scope.favoriteNum++;
};
}
};
})
.directive('courierTest', function () {
return {
restrict: 'E',
scope: {
type: '@'
},
template: '<strong style="float:left">{{count}} :&nbsp;</strong><pre>{{json}}</pre>',
controller: function ($scope, courier) {
$scope.count = 0;
var source = courier.rootSearchSource.extend()
.type($scope.type)
.source({
include: 'country'
})
.$scope($scope)
.on('results', function (resp) {
$scope.count ++;
$scope.json = JSON.stringify(resp.hits, null, ' ');
});
}
};
})
.directive('courierDocTest', function () {
return {
restrict: 'E',
scope: {
id: '@',
type: '@',
index: '@'
},
template: '<strong style="float:left">{{count}} : <button ng-click="click()">reindex</button> :&nbsp;</strong><pre>{{json}}</pre>',
controller: function (courier, $scope) {
$scope.count = 0;
var currentSource;
$scope.click = function () {
if (currentSource) {
source.doIndex(currentSource);
}
};
var source = courier.createSource('doc')
.id($scope.id)
.type($scope.type)
.index($scope.index)
.$scope($scope)
.on('results', function (doc) {
currentSource = doc._source;
$scope.count ++;
$scope.json = JSON.stringify(doc, null, ' ');
});
}
};
})
.directive('mappingTest', function () {
return {
restrict: 'E',
scope: {
type: '@',
fields: '@'
},
template: 'Mappings:<br><div ng-repeat="(name,mapping) in mappedFields">{{name}} = {{mapping.type}}</div><hr>' +
'<strong style="float:left">{{count}} :&nbsp;</strong><pre>{{json}}</pre>',
controller: function ($rootScope, $scope, courier) {
$scope.count = 0;
$scope.mappedFields = {};
var fields = $scope.fields.split(',');
var source = courier.rootSearchSource.extend()
.index('logstash-*')
.type($scope.type)
.source({
include: 'geo'
})
.$scope($scope)
.on('results', function (resp) {
$scope.count ++;
$scope.json = JSON.stringify(resp.hits, null, ' ');
});
var fields = $scope.fields.split(',');
fields.forEach(function (field) {
courier._mapper.getFieldMapping(source, field, function (err, mapping) {
$scope.$apply(function () {
$scope.mappedFields[field] = mapping;
});
fields.forEach(function (field) {
courier._mapper.getFieldMapping(source, field, function (err, mapping) {
$scope.$apply(function () {
$scope.mappedFields[field] = mapping;
});
});
});
courier._mapper.getFields(source, function (err, response, status) {
console.log(response);
});
}
};
});
courier._mapper.getFields(source, function (err, response, status) {
console.log(response);
});
}
};
});
});

View file

@ -1 +1 @@
<config-test></config-test>
<config-example></config-example>

View file

@ -1,3 +1,3 @@
<courier-doc-test index="logstash-2014.02.11" type="apache" id="6434"></courier-doc-test>
<courier-doc-test index="logstash-2014.02.11" type="apache" id="6434"></courier-doc-test>
<courier-test type="apache" fields="extension,response,request"></courier-test>
<courier-doc-example index="logstash-2014.02.11" type="apache" id="6434"></courier-doc-example>
<courier-doc-example index="logstash-2014.02.11" type="apache" id="6434"></courier-doc-example>
<courier-example type="apache" fields="extension,response,request"></courier-example>

View file

@ -1 +1 @@
<mapping-test type="apache" fields="extension,response,request"></mapping-test>
<mapping-example type="apache" fields="extension,response,request"></mapping-example>

View file

@ -0,0 +1,4 @@
#examples ng-include {
display: block;
margin: 10px;
}

View file

@ -0,0 +1,4 @@
#examples ng-include {
display: block;
margin: 10px;
}

View file

@ -1,3 +1,5 @@
define(function (require) {
require('css!./styles/main.css');
});

View file

@ -14,8 +14,8 @@ define(function (require) {
require('elasticsearch');
require('angular-route');
var app = angular.module('kibana', []);
enableAsyncModules(app);
var kibana = angular.module('kibana', []);
enableAsyncModules(kibana);
var dependencies = [
'elasticsearch',
@ -29,19 +29,16 @@ define(function (require) {
'kibana/constants'
];
function isScope(obj) {
return obj && obj.$evalAsync && obj.$watch;
}
dependencies.forEach(function (name) {
if (name.indexOf('kibana/') === 0) {
app.useModule(angular.module(name, []));
kibana.useModule(angular.module(name, []));
}
});
app.requires = dependencies;
app.value('configFile', configFile);
app.config(function ($routeProvider) {
kibana.requires = dependencies;
kibana.value('configFile', configFile);
kibana.config(function ($routeProvider) {
$routeProvider
.otherwise({
redirectTo: '/discover'
@ -50,7 +47,7 @@ define(function (require) {
configFile.apps.forEach(function (app) {
var deps = {};
deps['app/' + app.id] = function () {
return loadApp(app);
return kibana.loadChildApp(app);
};
$routeProvider.when('/' + app.id, {
@ -60,10 +57,8 @@ define(function (require) {
});
});
var loadApp; // so dumb
app.run(function ($q) {
loadApp = function (app) {
kibana.run(function ($q) {
kibana.loadChildApp = function (app) {
var defer = $q.defer();
require([
@ -77,16 +72,11 @@ define(function (require) {
defer.reject();
};
// optional dependencies
require([
'css!apps/' + app.id + '/index.css'
]);
return defer.promise;
};
});
setup(app, function (err) {
setup(kibana, function (err) {
if (err) throw err;
// load the elasticsearch service
@ -102,5 +92,5 @@ define(function (require) {
});
});
return app;
return kibana;
});

View file

@ -1,6 +1,7 @@
require.config({
baseUrl: 'kibana',
paths: {
kibana: './main',
courier: '../courier',
angular: '../bower_components/angular/angular',
'angular-route': '../bower_components/angular-route/angular-route',

6117
src/kibana/styles/main.css Normal file

File diff suppressed because it is too large Load diff