Skip to content

Instantly share code, notes, and snippets.

@edasque
Last active February 14, 2017 17:41
Show Gist options
  • Save edasque/1c8a8b653014ee158202 to your computer and use it in GitHub Desktop.
Save edasque/1c8a8b653014ee158202 to your computer and use it in GitHub Desktop.
HTML/JS/CSS snippet for listing dashboard in a Grafana text panel (in HTML mode)
<style type="text/css">
#dashboard_list ul {
margin:20px, 40px, 40px, 10px;
overflow:hidden;
}
#dashboard_list li {
line-height:1.5em;
float:left;
display:inline;
}
#dashboard_list a, #dashboard_list a:visited, #dashboard_list a:active {
color: #fff;
text-decoration: none;
border-bottom: 1px #336699 dotted;
}
#dashboard_list a:hover {
color: #336699;
text-decoration: underline;
border: none;
}
.double {
width:50%;
}
.triple {
width:33.333%;
}
.quad {
width:25%;
}
.six {
width:16.666%;
}
</style>
<ul id="dashboard_list"></ul>
<script language="text/javascript">
var data = {
"query": {
"query_string": {
"query": "title:*"
}
},
"sort": ["_uid"],
"facets": {
"tags": {
"terms": {
"field": "tags",
"order": "term",
"size": 50
}
}
},
"size": 20
};
$(document).ready(function() {
require(['config'], CTCT_listDashboards);
function CTCT_listDashboards(config) {
console.log("CONFIG_____________"); console.dir(config.elasticsearch);
$.ajax({
url: config.elasticsearch + '/grafana-dash/dashboard/_search',
type: 'GET',
//contentType: 'application/json; charset=UTF-8',
crossDomain: true,
timeout: 1500,
dataType: 'json',
data: JSON.stringify(data),
success: function(response) {
var data = response.hits.hits;
var doc_ids = [];
var source = null;
var content = '';
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
source = data[i];
doc_ids.push(source._id);
if (source._id != "Welcome") content = content + '<li class="double"><a href="http://' + window.location.hostname + ':' + window.location.port + '/#/dashboard/elasticsearch/' + source._id + '">' + source._id + '</a></li>';
// console.dir(data[i]);
}
// console.log(content);
$('#dashboard_list').removeClass('text-error').html(content);
} else {
$('#dashboard_list').removeClass('text-success').addClass('text-error').html('No results found.');
}
},
error: function(jqXHR, textStatus, errorThrown) {
var jso = jQuery.parseJSON(jqXHR.responseText);
console.log("Error retrieving the list of dashboards");
console.dir(jqXHR.status);
console.dir(errorThrown);
console.dir(jso);
$('#dashboard_list').removeClass('text-success').addClass('text-error').html('<li>Could not connect to Elastic Search to retrieve the list of dashboards.</li>');
}
});
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment