0
0
mirror of https://github.com/alerta/alerta.git synced 2024-12-04 12:57:32 +00:00
alerta_alerta/examples/oembed-for-grafana.html
Andrey Kuzmin cc8f93000c Oembed fix (#853)
* Fix oembed.

Use usual json (not jsonp request) with Access-Control-Allow-Origin header.
Correct path to oembed location.

* Move styling to embedding page from embedded to simplify configure.

Removed width/height from parameters.
Allow to hide title.

* More powerfull oembed.

Auto-renew.
Ability to open page locally (we heed to set http/https prefixes).
Fix loading: we need to set alerta defaults only after script loading.

* oembed example for grafana.

* Remove unused width/height from js.

* Ability to set empty background in case of no alerts.

* Oembed work fix.

qb.from_params forms incorrect arguments for query.

* Grafana load fix.

Grafana won't load script on "load". So it's better to embed js.

* Revert api path to usual environment prefix.

But leave a comment, how to use it with alerta, running in docker.
2019-03-24 20:57:21 +01:00

66 lines
1.5 KiB
HTML

<style>
.alerta-div {width:100%; padding:20px;}
.alerta-table {width:100%; border:1px solid lightgrey; text-align:center;}
</style>
<div class="mobile-alerts" style="width:100%">Loading...</div>
<a href="http://localhost:8080/">Alerta</a>
<!-- Content from http://localhost:8080/api/embed.js -->
<script type="text/javascript">
(function($, window) {
var config = {
endpoint: 'http://api.alerta.io',
key: null
};
var Alerta = function() {};
Alerta.prototype = {
defaults: {}
}
$.alerta = new Alerta();
$.fn.alerta = function( url, options ) {
$.extend(config, $.alerta.defaults, options);
return this.each(function() {
var base = config.endpoint + '/oembed?url=' + encodeURIComponent(url);
var key = (config.key ? '&api-key=' + config.key : '');
var title = (config.title ? '&title=' + encodeURIComponent(config.title) : '');
base += key + title;
$.ajax({
url: base,
context: this,
success: function(data) {
$(this).html(data.html);
}
});
});
}
window.Alerta = Alerta;
}(jQuery, window));
</script>
<script>
$(document).ready(function () {
$.alerta.defaults = {
endpoint: 'http://localhost:8080/api',
key: 'demo-key'
};
function renew() {
$('.mobile-alerts').alerta('http://localhost:8080/api/alerts/count?status=open', { title: '' });
setTimeout(renew, 30000);
}
renew();
});
</script>