Browse Source

Implemented dynazoom as a modal dialog. Can't be a dedicated page since the dynazoom.html file is really, really static file.

master 0.3
Johann Schmitz 6 years ago
parent
commit
63869d9974
Signed by: ercpe GPG Key ID: A084064277C501ED
  1. 9
      static/js/munin-b3.js
  2. 10
      static/munin-b3.css
  3. 20
      templates/munin-serviceview.tmpl

9
static/js/munin-b3.js

@ -19,4 +19,13 @@ $(document).ready(function() {
$('nav .navbar-collapse').collapse('toggle')
}
});
$('.zoom-modal-link').click(function() {
$('#zoomModal').data('zoom-url', $(this).attr('href').replace(/size_y=400/g, "size_y=250")); //hack alert
});
$('#zoomModal').on('show.bs.modal', function() {
var me = $(this);
$('.modal-body', me).html('<iframe src="' + me.data('zoom-url') + '" />')
});
});

10
static/munin-b3.css

@ -81,4 +81,12 @@ body { padding-top: 70px; }
@media (max-width: 600px) {
ul.groupview span.host { display:block; }
ul.groupview, ul.groupview ul { padding-left: 20px; }
}
}
@media (min-width: 1002px) {
.modal-lg { width: 1000px; }
}
.modal-content { height: 750px; }
.modal-body { height: 685px; }
.modal-body iframe { width: 100%; height: 100%; border: 0px; }

20
templates/munin-serviceview.tmpl

@ -2,6 +2,18 @@
<body>
<TMPL_INCLUDE NAME="partial/logo_navigation.tmpl">
<div class="modal bs-example-modal-lg" id="zoomModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">&nbsp;</h4>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<div class="container-fluid">
<h3 class="navbar-padding-fix">Service graphs</h3>
@ -13,7 +25,7 @@
</tr>
<tr>
<td class="graph">
<a href="<TMPL_VAR NAME="ZOOMDAY">">
<a href="<TMPL_VAR NAME="ZOOMDAY">" data-toggle="modal" data-target="#zoomModal" data-remote="false" class="zoom-modal-link">
<img src="<TMPL_VAR NAME="IMGDAY">"
alt="daily graph"
title="<TMPL_VAR ESCAPE="HTML" NAME="NAME"> - daily graph"
@ -23,7 +35,7 @@
</a>
</td>
<td class="graph">
<a href="<TMPL_VAR NAME="ZOOMWEEK">">
<a href="<TMPL_VAR NAME="ZOOMWEEK">" data-toggle="modal" data-target="#zoomModal" data-remote="false" class="zoom-modal-link">
<img src="<TMPL_VAR NAME="IMGWEEK">"
alt="weekly graph"
title="<TMPL_VAR ESCAPE="HTML" NAME="NAME"> - daily graph"
@ -35,7 +47,7 @@
</tr>
<tr>
<td class="graph">
<a href="<TMPL_VAR NAME="ZOOMMONTH">">
<a href="<TMPL_VAR NAME="ZOOMMONTH">" data-toggle="modal" data-target="#zoomModal" data-remote="false" class="zoom-modal-link">
<img src="<TMPL_VAR NAME="IMGMONTH">"
alt="monthly graph"
title="<TMPL_VAR ESCAPE="HTML" NAME="NAME"> - daily graph"
@ -45,7 +57,7 @@
</a>
</td>
<td class="graph">
<a href="<TMPL_VAR NAME="ZOOMYEAR">">
<a href="<TMPL_VAR NAME="ZOOMYEAR">" data-toggle="modal" data-target="#zoomModal" data-remote="false" class="zoom-modal-link">
<img src="<TMPL_VAR NAME="IMGYEAR">"
alt="yearly graph"
title="<TMPL_VAR ESCAPE="HTML" NAME="NAME"> - daily graph"