Skip to content

N
nexpie-grafana-theme
Commit 55abb8a4 by Rashid Khan
Options

Merge pull request #305 from rashidkpc/master 

Updated default with more options for starter dashboards
parents ed8f7c3c 2e85fbec
Showing with 339 additions and 84 deletions
common/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
common/css/main.css
......@@ -25,10 +25,6 @@
top:0px;
}
.navbar .brand {
color: #eee;
}
.navbar-inner {
border-width: 0 0 0px;
padding-left: 0px;
......
dashboards/blank.json 0 → 100644
{
"title": "",
"services": {
"query": {
"idQueue": [
1,
2,
3,
4
],
"list": {
"0": {
"query": "*",
"alias": "",
"color": "#7EB26D",
"id": 0
}
},
"ids": [
0
]
},
"filter": {
"idQueue": [
0,
1,
2
],
"list": {},
"ids": []
}
},
"rows": [
],
"editable": true,
"index": {
"interval": "none",
"pattern": "[logstash-]YYYY.MM.DD",
"default": "NOT_CONFIGURED"
}
}
\ No newline at end of file
dashboards/default.json
......@@ -86,7 +86,7 @@
],
"type": "text",
"mode": "markdown",
"content": "### Welcome to Kibana. \nGlad you could make it. Happy to have you here! Lets get started, shall we?\n##### Requirements\n* **A good browser.** \n The latest version of Chrome or Firefox is recommended. Safari (latest version) and Internet Explorer 9 and above are also supported.\n* **A webserver.** \n Just somewhere to host the HTML and Javascript. Basically any webserver will work.\n* **Elasticsearch** \n 0.20.5 or above. Kibana will soon move to requiring Elasticsearch 0.90 or above, so upgrading is recommended.\n\n##### Configuration\nIf Kibana and Elasticsearch are on the same host, and you're using the default Elasticsearch port, then you're all set. Kibana is configured to use that setup by default! \n\nIf not, you need to edit *config.js* and set the *elasticsearch* parameter with the URL (including port, probably 9200) of your Elasticsearch server. The host part should be the entire, fully qualified domain name, or IP, **not localhost**.\n#### One quick question\n*Are you using logstash?* \n**YES** - Great! We have a prebuilt dashboard: [(Logstash Dashboard)](index.html#/dashboard/file/logstash.json). See the note to the right about making it your global default \n**NO** - Hey, no problem, you just have a bit of setup to do. Head over to the [(Guided Dashboard)](index.html#/dashboard/file/guided.json) and I'll try to walk you through it.",
"content": "### Welcome to Kibana. \nGlad you could make it. Happy to have you here! Lets get started, shall we?\n##### Requirements\n* **A good browser.** \n The latest version of Chrome or Firefox is recommended. Safari (latest version) and Internet Explorer 9 and above are also supported.\n* **A webserver.** \n Just somewhere to host the HTML and Javascript. Basically any webserver will work.\n* **Elasticsearch** \n 0.20.5 or above. Kibana will soon move to requiring Elasticsearch 0.90 or above, so upgrading is recommended.\n\n##### Configuration\nIf Kibana and Elasticsearch are on the same host, and you're using the default Elasticsearch port, then you're all set. Kibana is configured to use that setup by default! \n\nIf not, you need to edit *config.js* and set the *elasticsearch* parameter with the URL (including port, probably 9200) of your Elasticsearch server. The host part should be the entire, fully qualified domain name, or IP, **not localhost**.\n#### Are you a Logstash User?\n+ **YES** - Great! We have a prebuilt dashboard: [(Logstash Dashboard)](index.html#/dashboard/file/logstash.json). See the note to the right about making it your global default \n\n+ **NO** - Hey, no problem, you just have a bit of setup to do. You have a few choices: \n\n 1. [Sample Dashboard](index.html#/dashboard/file/guided.json) *I don't have much data yet, please extract some basics for me* \n 2. [Unconfigured Dashboard](index.html#/dashboard/file/noted.json) *I have a lot of data and I don't want Kibana to query it at once*\n 3. [Blank Dashboard](index.html#/dashboard/file/blank.json) *I'm comfortable figuring it out on my own*",
"style": {},
"status": "Stable"
}
......@@ -129,8 +129,8 @@
],
"editable": true,
"index": {
"interval": "day",
"interval": "none",
"pattern": "[logstash-]YYYY.MM.DD",
"default": "logstash-*"
"default": "NOT_CONFIGURED"
}
}
}
\ No newline at end of file
dashboards/logstash.json
......@@ -27,8 +27,8 @@
],
"list": {
"0": {
"from": "2013-07-29T03:28:07.127Z",
"to": "2013-07-29T04:28:07.128Z",
"from": "2013-07-30T18:58:13.977Z",
"to": "2013-07-30T19:58:13.977Z",
"field": "@timestamp",
"type": "time",
"mandate": "must",
......@@ -157,7 +157,7 @@
"collapsable": true,
"panels": [
{
"span": 9,
"span": 12,
"editable": true,
"group": [
"default"
......@@ -190,37 +190,6 @@
]
},
"title": "Events over time"
},
{
"error": false,
"span": 3,
"editable": true,
"group": [
"default"
],
"type": "terms",
"queries": {
"mode": "all",
"ids": [
0
]
},
"field": "_type",
"exclude": [],
"missing": true,
"other": true,
"size": 10,
"order": "count",
"style": {
"font-size": "10pt"
},
"donut": false,
"tilt": false,
"labels": true,
"arrangement": "horizontal",
"chart": "table",
"counter_pos": "above",
"title": "Top log types"
}
]
},
......@@ -277,4 +246,4 @@
"pattern": "[logstash-]YYYY.MM.DD",
"default": "NO_TIME_FILTER_OR_INDEX_PATTERN_NOT_MATCHED"
}
}
}
\ No newline at end of file
dashboards/noted.json 0 → 100644
{
"title": "Your Basic Dashboard",
"services": {
"query": {
"idQueue": [
1,
2,
3,
4
],
"list": {
"0": {
"query": "*",
"alias": "",
"color": "#7EB26D",
"id": 0
}
},
"ids": [
0
]
},
"filter": {
"idQueue": [
0,
1,
2
],
"list": {},
"ids": []
}
},
"rows": [
{
"title": "Options",
"height": "50px",
"editable": true,
"collapse": false,
"collapsable": true,
"panels": [
{
"error": false,
"span": 3,
"editable": true,
"group": [
"default"
],
"type": "dashcontrol",
"save": {
"gist": false,
"elasticsearch": true,
"local": true,
"default": true
},
"load": {
"gist": true,
"elasticsearch": true,
"local": true
},
"hide_control": false,
"elasticsearch_size": 20,
"temp": true,
"temp_ttl": "30d",
"ttl_enable": true
},
{
"error": false,
"span": 4,
"editable": true,
"group": [
"default"
],
"type": "text",
"status": "Stable",
"mode": "markdown",
"content": "The dashcontrol panel to the left lets you save this dashboard to Elasticsearch once you have it how you like it. See the note on the welcome page about setting a global default.",
"style": {},
"title": "The dashcontrol panel"
},
{
"error": false,
"span": 5,
"editable": true,
"group": [
"default"
],
"type": "text",
"status": "Stable",
"mode": "markdown",
"content": "If you have a field with a timestamp in it, you might want to add a 'timepicker' panel here. Click the cog icon over to the left to do so. You can also remove these information text panels there",
"style": {},
"title": "Have a timestamp somewhere?"
}
]
},
{
"title": "Query",
"height": "50px",
"editable": true,
"collapse": false,
"collapsable": true,
"panels": [
{
"error": false,
"span": 12,
"editable": true,
"group": [
"default"
],
"type": "query",
"label": "Search",
"history": [
"*"
],
"remember": 10,
"pinned": true,
"query": "*"
}
]
},
{
"title": "Filters",
"height": "50px",
"editable": true,
"collapse": true,
"collapsable": true,
"panels": [
{
"error": false,
"span": 3,
"editable": true,
"group": [
"default"
],
"type": "text",
"status": "Stable",
"mode": "markdown",
"content": "You found the filter row! This row has a 'filtering' panel in it that lists any active filters. You usually want one of these on any dashboard.",
"style": {}
},
{
"error": false,
"span": 9,
"editable": true,
"group": [
"default"
],
"type": "filtering"
}
]
},
{
"title": "Graph",
"height": "250px",
"editable": true,
"collapse": false,
"collapsable": true,
"panels": [
{
"error": false,
"span": 4,
"editable": true,
"group": [
"default"
],
"type": "text",
"status": "Stable",
"mode": "markdown",
"content": "See the small Filters text above this? Click it to expand the filters row. Right now there are none, but if you were to add a Table panel, you could click on event fields to drill down and add some. Or if you had timestamped data and used a time picker, your time filter would appear there",
"style": {},
"title": "Filtering"
},
{
"error": false,
"span": 8,
"editable": true,
"group": [
"default"
],
"type": "text",
"status": "Stable",
"mode": "markdown",
"content": "### Start here\nThis dashboard doesn't run any queries, but it's the best I can do without knowing much about your data!\n\n##### Kibana is currently configured to point at the special Elasticsearch *_all* index. You can change that by clicking on the cog icon in the title bar of this dashboard\nIf you have several indices and a lot of data, you should probably do that before you add any new panels. You can also add rows from that dialog. You can edit individual panels by click on the link that appears in their top right when you mouse over them",
"style": {}
}
]
},
{
"title": "Table",
"height": "650px",
"editable": true,
"collapse": false,
"collapsable": true,
"panels": [
{
"error": false,
"span": 12,
"editable": true,
"group": [
"default"
],
"type": "text",
"status": "Stable",
"mode": "markdown",
"content": "## A good place for a table\nThis is a good place for a table panel. Table panels present your data in a tabular format and allow you pick the fields you want to see, sort on them, and drill down.",
"style": {}
}
]
}
],
"editable": true,
"index": {
"interval": "none",
"pattern": "[logstash-]YYYY.MM.DD",
"default": "NOT_CONFIGURED"
}
}
\ No newline at end of file
js/filters.js
......@@ -26,4 +26,10 @@ angular.module('kibana.filters', [])
return arr.slice(start, end);
}
};
}).filter('stringify', function() {
return function(arr, start, end) {
if(!_.isUndefined(arr)) {
return arr.toString();
}
};
});
\ No newline at end of file
js/services.js
......@@ -441,7 +441,7 @@ angular.module('kibana.services', [])
index: {
interval: 'none',
pattern: '_all',
default: '_all'
default: 'INDEX_MISSING'
},
};
......
panels/bettermap/module.html
......@@ -4,7 +4,7 @@
<link rel="stylesheet" href="panels/bettermap/lib/plugins.css" />
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
<i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
</span>
<!-- This solution might work well for other panels that have trouble with heights -->
<div style="padding-right:10px;padding-top:10px;height:{{panel.height|| row.height}};overflow:hidden">
......
panels/bettermap/module.js
......@@ -140,15 +140,8 @@ angular.module('kibana.bettermap', [])
});
};
// I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) {
$scope.modal = {
title: "Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
};
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
};
})
......
panels/derivequeries/module.html
......@@ -18,7 +18,7 @@
}
</style>
<span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
<i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
</span>
<label class="small">Create new queries from
......
panels/derivequeries/module.js
......@@ -134,13 +134,7 @@ angular.module('kibana.derivequeries', [])
};
$scope.populate_modal = function(request) {
$scope.modal = {
title: "Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
};
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
};
var update_history = function(query) {
......
panels/histogram/module.html
......@@ -18,7 +18,7 @@
}
</style>
<span ng-show="panel.spyable" class='spy panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
<i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
</span>
<div>
<span ng-show='panel.zoomlinks && data'>
......
panels/histogram/module.js
......@@ -241,13 +241,7 @@ angular.module('kibana.histogram', [])
// I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) {
$scope.modal = {
title: "Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
};
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
};
$scope.set_refresh = function (state) {
......
panels/hits/editor.html
......@@ -27,4 +27,15 @@
</div>
</div>
<div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small">Spyable</label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
</div>
</div>
</div>
panels/hits/module.html
<kibana-panel ng-controller='hits' ng-init="init()">
<span ng-show="panel.spyable" class='spy panelextra pointer'>
<i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
</span>
<div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend -->
<table class="small" ng-show="panel.arrangement == 'vertical'">
......
panels/hits/module.js
......@@ -38,7 +38,8 @@ angular.module('kibana.hits', [])
counter_pos : 'above',
donut : false,
tilt : false,
labels : true
labels : true,
spyable : true
};
_.defaults($scope.panel,_d);
......@@ -77,8 +78,8 @@ angular.module('kibana.hits', [])
).size(0);
});
// TODO: Spy for hits panel
//$scope.populate_modal(request);
// Populate the inspector panel
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
// Then run it
var results = request.doSearch();
......
panels/table/module.html
......@@ -8,7 +8,7 @@
</style>
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
<i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
</span>
<div class="row-fluid">
......
panels/table/module.js
......@@ -226,13 +226,7 @@ angular.module('kibana.table', [])
};
$scope.populate_modal = function(request) {
$scope.modal = {
title: "Table Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
};
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
};
$scope.without_kibana = function (row) {
......
panels/terms/editor.html
......@@ -51,4 +51,15 @@
</div>
</div>
<div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small">Spyable</label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
</div>
</div>
</div>
panels/terms/module.html
<kibana-panel ng-controller='terms' ng-init="init()">
<span ng-show="panel.spyable" class='spy panelextra pointer'>
<i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
</span>
<!-- START Pie or bar chart -->
<div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend above -->
......
panels/terms/module.js
......@@ -45,7 +45,8 @@ angular.module('kibana.terms', [])
labels : true,
arrangement : 'horizontal',
chart : 'bar',
counter_pos : 'above'
counter_pos : 'above',
spyable : true
};
_.defaults($scope.panel,_d);
......@@ -92,7 +93,8 @@ angular.module('kibana.terms', [])
filterSrv.getBoolFilter(filterSrv.ids)
)))).size(0);
//$scope.populate_modal(request);
// Populate the inspector panel
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
results = request.doSearch();
......
partials/inspector.html 0 → 100644
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Inspector</h3>
</div>
<div class="modal-body">
<div>
<h5>Last Elasticsearch Query</h5>
<pre>curl -XGET '{{config.elasticsearch}}/{{dashboard.indices|stringify}}/_search?pretty' -d '{{inspector}}'
</pre>"
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss()">Close</button>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment