mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
Reworked the examples app to be a better example of how other apps could be formatted
This commit is contained in:
parent
b2b5db4ff2
commit
193f4f999f
21 changed files with 6285 additions and 154 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -1,3 +1,2 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
src/kibana/styles/*.css
|
||||
node_modules
|
|
@ -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>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
define(function (require) {
|
||||
|
||||
require('css!./styles/main.css');
|
||||
|
||||
});
|
|
@ -1,3 +1,5 @@
|
|||
define(function (require) {
|
||||
|
||||
require('css!./styles/main.css');
|
||||
|
||||
});
|
0
src/kibana/apps/discover/styles/main.less
Normal file
0
src/kibana/apps/discover/styles/main.less
Normal 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>
|
|
@ -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}} : </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> : </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}} : </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}} : </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> : </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}} : </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);
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
|
@ -1 +1 @@
|
|||
<config-test></config-test>
|
||||
<config-example></config-example>
|
|
@ -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>
|
|
@ -1 +1 @@
|
|||
<mapping-test type="apache" fields="extension,response,request"></mapping-test>
|
||||
<mapping-example type="apache" fields="extension,response,request"></mapping-example>
|
4
src/kibana/apps/examples/styles/index.css
Normal file
4
src/kibana/apps/examples/styles/index.css
Normal file
|
@ -0,0 +1,4 @@
|
|||
#examples ng-include {
|
||||
display: block;
|
||||
margin: 10px;
|
||||
}
|
4
src/kibana/apps/examples/styles/index.less
Normal file
4
src/kibana/apps/examples/styles/index.less
Normal file
|
@ -0,0 +1,4 @@
|
|||
#examples ng-include {
|
||||
display: block;
|
||||
margin: 10px;
|
||||
}
|
|
@ -1,3 +1,5 @@
|
|||
define(function (require) {
|
||||
|
||||
require('css!./styles/main.css');
|
||||
|
||||
});
|
0
src/kibana/apps/visualize/styles/main.css
Normal file
0
src/kibana/apps/visualize/styles/main.css
Normal file
0
src/kibana/apps/visualize/styles/main.less
Normal file
0
src/kibana/apps/visualize/styles/main.less
Normal 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;
|
||||
});
|
|
@ -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
6117
src/kibana/styles/main.css
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue