Improve navigation

static/css/style-munstrap.css

@@ -23,11 +23,12 @@ img#zoom_image{
   margin-bottom: 15px;
 }
 
-.link-domain {
+
+.link-domain a.link-domain:link a.link-domain:visited a.link-domain:hover a.link-domain:focus  {
 	font-size: 1.4em;	
 	color: #660066;
 }
-.link-host {
+.link-host a.link-host:link a.link-host:visited a.link-host:hover a.link-host:focus  {
 	font-size: 1.1em;
 	color: #800080;
 }
@@ -42,3 +43,52 @@ ul.groupview, ul.groupview ul {
    display: block;
    float: left;
 }
+
+#category-period {
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
+.tab-title {
+    text-transform: capitalize;
+}
+
+.comparison {
+    text-transform: capitalize;
+}
+
+.badge-error {
+  background-color: #b94a48;
+}
+.badge-error:hover {
+  background-color: #953b39;
+}
+.badge-warning {
+  background-color: #f89406;
+}
+.badge-warning:hover {
+  background-color: #c67605;
+}
+.badge-success {
+  background-color: #468847;
+}
+.badge-success:hover {
+  background-color: #356635;
+}
+.badge-info {
+  background-color: #3a87ad;
+}
+.badge-info:hover {
+  background-color: #2d6987;
+}
+.badge-inverse {
+  background-color: #333333;
+}
+.badge-inverse:hover {
+  background-color: #1a1a1a;
+}
+
+.div-home-badges {
+    display:inline;
+    white-space: nowrap;
+}

static/js/dynazoom.js

@@ -1,31 +1,49 @@
-function refreshZoom(query, form, image, divOverlay) {
-  //INIT
-  var qs = new Querystring(query);
-  init();
-
-  var scale = refreshImg();
-  var start_epoch = (+qs.get("rst_start_epoch", form.start_epoch.value));
-  var stop_epoch = (+qs.get("rst_stop_epoch", form.stop_epoch.value));
-  var initial_left;
-  var initial_top;
-
-  //form.btnMaj.onclick = majDates;
-  form.plugin_name.onblur = refreshImg;
-  form.start_iso8601.onblur = majDates;
-  form.stop_iso8601.onblur = majDates;
-  form.start_epoch.onblur = refreshImg;
-  form.stop_epoch.onblur = refreshImg;
-  form.lower_limit.onblur = refreshImg;
-  form.upper_limit.onblur = refreshImg;
-  form.size_x.onblur = refreshImg;
-  form.size_y.onblur = refreshImg;
-  form.btnReset.onclick = reset;
-
-  // Sets the onClick handler
-  image.onclick = click;
-  var clickCounter = 0;
+function popupGraph(img) {
+
+    var query = img.attr('data-href');
+    var qs = new Querystring(query);
+
+    var form = document.getElementById("zoom_form");
+    var image = document.getElementById("zoom_image");
+
+    var start_epoch = (+qs.get("rst_start_epoch", form.start_epoch.value));
+    var stop_epoch = (+qs.get("rst_stop_epoch", form.stop_epoch.value));
+
+    var scale; 
+
+    var initial_left;
+    var initial_top;
+
+    var clickCounter = 0; 
+
+    // Sets the onBlur handler
+    form.plugin_name.onblur = refreshImg;
+    form.start_iso8601.onblur = majDates;
+    form.stop_iso8601.onblur = majDates;
+    form.start_epoch.onblur = refreshImg;
+    form.stop_epoch.onblur = refreshImg;
+    form.lower_limit.onblur = refreshImg;
+    form.upper_limit.onblur = refreshImg;
+    form.size_x.onblur = refreshImg;
+    form.size_y.onblur = refreshImg;
+    form.btnReset.onclick = reset;
+
+    // Sets the onClick handler
+    image.onclick = click;
+
+    refreshZoom(query, form, image);
+
+    var reset_start_epoch = form.start_epoch.value;
+    var reset_stop_epoch = form.stop_epoch.value; 
+
+    $('#zoom').modal('show');
+
+
 
   //FUNCTIONS
+
+
+
   function init(){
     form.plugin_name.value = qs.get("plugin_name", "localdomain/localhost.localdomain/if_eth0");
     form.start_epoch.value = qs.get("start_epoch", "1236561663");
@@ -34,16 +52,33 @@ function refreshZoom(query, form, image, divOverlay) {
     form.upper_limit.value = qs.get("upper_limit", "");
     form.size_x.value = qs.get("size_x", "");
     form.size_y.value = qs.get("size_y", "");
-
+    
     updateStartStop();
   }
 
+
+  function refreshZoom(query, form, image) {
+      qs = new Querystring(query);
+
+      init();
+
+      start_epoch = +form.start_epoch.value;
+      stop_epoch = +form.stop_epoch.value;
+      scale = refreshImg();
+
+      clickCounter = 0;  
+  }
+
   function reset(event){
     init();
 
     //Can be not the initial ones in case of manual refresh
-    form.start_epoch.value = start_epoch;
-    form.stop_epoch.value = stop_epoch;
+    form.start_epoch.value = reset_start_epoch;
+    form.stop_epoch.value = reset_stop_epoch;
+
+    start_epoch = (+qs.get("rst_start_epoch", form.start_epoch.value));
+    stop_epoch  = (+qs.get("rst_stop_epoch", form.stop_epoch.value));
+
     updateStartStop();
 
     //Redraw
@@ -123,6 +158,24 @@ function refreshZoom(query, form, image, divOverlay) {
     form.stop_iso8601.disabled = false;
     form.start_epoch.disabled = false;
     form.stop_epoch.disabled = false;
+    endZoomThenSubmit(event);
+  }
+
+  // Submit catching
+  function endZoomThenSubmit(event) {
+      var qs = new Querystring(query);
+      var src = "cgiurl_graph=" + qs.get("cgiurl_graph", "/munin-cgi/munin-cgi-graph")
+        + "&plugin_name=" + form.plugin_name.value
+        + "&start_epoch=" + form.start_epoch.value
+        + "&stop_epoch=" + form.stop_epoch.value
+        + "&rst_start_epoch=" + qs.get("start_epoch", form.start_epoch.value)
+        + "&rst_stop_epoch=" + qs.get("stop_epoch", form.stop_epoch.value)
+        + "&lower_limit=" + form.lower_limit.value
+        + "&upper_limit=" + form.upper_limit.value
+        + "&size_x=" + form.size_x.value
+        + "&size_y=" + form.size_y.value
+      ;
+      refreshZoom(src, form, image);
   }
 
   function fillDate(date, default_date) {
@@ -158,7 +211,7 @@ function refreshZoom(query, form, image, divOverlay) {
         break;
       case 1: 
         endZoom(event);
-        break;			
+        break;          
     }
   }
 
@@ -195,4 +248,4 @@ function refreshZoom(query, form, image, divOverlay) {
     posY = posY - imgPos[1];
     return [ posX, posY ];
   }
-};
+};

templates/munin-comparison-day.tmpl

@@ -1,32 +1,61 @@
 <TMPL_INCLUDE NAME="partial/head.tmpl">
 
     <h2>Comparison: day</h2>
-    <TMPL_LOOP NAME="CATEGORIES">
-      <h3 id="<TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME">"><TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME"></h3>
-      <TMPL_LOOP NAME="SERVICES">
-        <div class="row">
-          <TMPL_LOOP NAME="NODES">
-            <div class="col-md-6">
-              <a href="<TMPL_VAR ESCAPE="URL" NAME="NODENAME">/index.html"><TMPL_VAR ESCAPE="HTML" NAME="NODENAME"></a>
-                <span class="glyphicon glyphicon-chevron-right"></span>
-                  <TMPL_IF NAME="URL1"><a <TMPL_IF NAME="STATE_WARNING">class="warn"</TMPL_IF>
-                    <TMPL_IF NAME="STATE_CRITICAL">class="crit"</TMPL_IF> href="<TMPL_VAR NAME="R_PATH">/<TMPL_VAR NAME="URL">">
+    <div class="btn-group pull-right" id="largeset-nav">
+      <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+        Periods for this node <span class="caret"></span>
+      </button>
+      <ul role="menu" class="dropdown-menu">
+          <li><a href="<TMPL_VAR NAME="R_PATH">/<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"><TMPL_VAR ESCAPE="URL" NAME="PATHNAME">/</TMPL_IF></TMPL_LOOP>comparison-day.html">Period: day</a></li>
+          <li><a href="<TMPL_VAR NAME="R_PATH">/<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"><TMPL_VAR ESCAPE="URL" NAME="PATHNAME">/</TMPL_IF></TMPL_LOOP>comparison-week.html">Period: week</a></li>
+          <li><a href="<TMPL_VAR NAME="R_PATH">/<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"><TMPL_VAR ESCAPE="URL" NAME="PATHNAME">/</TMPL_IF></TMPL_LOOP>comparison-month.html">Period: month</a></li>
+          <li><a href="<TMPL_VAR NAME="R_PATH">/<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"><TMPL_VAR ESCAPE="URL" NAME="PATHNAME">/</TMPL_IF></TMPL_LOOP>comparison-year.html">Period: year</a></li>
+      </ul>    
+    </div>
+    <ul id="tabs" class="nav nav-tabs tab-title" data-tabs="tabs">
+      <TMPL_LOOP NAME="CATEGORIES">
+        <li <TMPL_IF NAME="__FIRST__"> class="active" </TMPL_IF>>
+    <a href="#<TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME">" data-toggle="tab"><TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME"></a>
+        </li>
+      </TMPL_LOOP>
+    </ul>
+
+    <div id="my-tab-content" class="tab-content">    
+
+      <TMPL_LOOP NAME="CATEGORIES">
+
+        <div class="tab-pane fade <TMPL_IF NAME="__FIRST__">in active</TMPL_IF>" id="<TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME">">
+
+          <TMPL_LOOP NAME="SERVICES">
+            <div class="row">
+              <TMPL_LOOP NAME="NODES">
+                <div class="col-md-6">
+                  <a href="<TMPL_VAR ESCAPE="URL" NAME="NODENAME">/index.html"><TMPL_VAR ESCAPE="HTML" NAME="NODENAME"></a>
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                      <TMPL_IF NAME="URL1"><a <TMPL_IF NAME="STATE_WARNING">class="warn"</TMPL_IF>
+                        <TMPL_IF NAME="STATE_CRITICAL">class="crit"</TMPL_IF> href="<TMPL_VAR NAME="R_PATH">/<TMPL_VAR NAME="URL">">
+                      </TMPL_IF>
+                      <TMPL_VAR ESCAPE="HTML" NAME="LABEL">
+                      <TMPL_IF NAME="URL1"></a></TMPL_IF>
+                  <TMPL_IF NAME="CIMGDAY">
+                    <br/>
+                    <a href="<TMPL_VAR NAME="R_PATH">/<TMPL_VAR NAME="URL">">
+                      <img src="<TMPL_VAR NAME="CIMGDAY">" alt="<TMPL_VAR ESCAPE="HTML" NAME="LABEL">"
+                       class="img-responsive i<TMPL_IF NAME="STATE_WARNING"> warn</TMPL_IF><TMPL_IF NAME="STATE_CRITICAL"> crit</TMPL_IF>"
+                       <TMPL_IF NAME="IMGDAYWIDTH">width="<TMPL_VAR NAME="IMGDAYWIDTH">" </TMPL_IF> 
+                       <TMPL_IF NAME="IMGDAYHEIGHT">height="<TMPL_VAR NAME="IMGDAYHEIGHT">"</TMPL_IF>/>
+                    </a>
                   </TMPL_IF>
-                  <TMPL_VAR ESCAPE="HTML" NAME="LABEL">
-                  <TMPL_IF NAME="URL1"></a></TMPL_IF>
-              <TMPL_IF NAME="CIMGDAY">
-                <br/>
-                <a href="<TMPL_VAR NAME="R_PATH">/<TMPL_VAR NAME="URL">">
-                  <img src="<TMPL_VAR NAME="CIMGDAY">" alt="<TMPL_VAR ESCAPE="HTML" NAME="LABEL">"
-                   class="img-responsive i<TMPL_IF NAME="STATE_WARNING"> warn</TMPL_IF><TMPL_IF NAME="STATE_CRITICAL"> crit</TMPL_IF>"
-                   <TMPL_IF NAME="IMGDAYWIDTH">width="<TMPL_VAR NAME="IMGDAYWIDTH">" </TMPL_IF> 
-                   <TMPL_IF NAME="IMGDAYHEIGHT">height="<TMPL_VAR NAME="IMGDAYHEIGHT">"</TMPL_IF>/>
-                </a>
-              </TMPL_IF>
+                </div>
+              </TMPL_LOOP>
             </div>
           </TMPL_LOOP>
+
         </div>
+
       </TMPL_LOOP>
-    </TMPL_LOOP>
+
+    </div>
+
 
 <TMPL_INCLUDE NAME="partial/footer.tmpl">

templates/munin-comparison-month.tmpl

@@ -1,32 +1,60 @@
 <TMPL_INCLUDE NAME="partial/head.tmpl">
 
     <h2>Comparison: month</h2>
-    <TMPL_LOOP NAME="CATEGORIES">
-      <h3 id="<TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME">"><TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME"></h3>
-      <TMPL_LOOP NAME="SERVICES">
-        <div class="row">
-          <TMPL_LOOP NAME="NODES">
-            <div class="col-md-6">
-              <a href="<TMPL_VAR ESCAPE="URL" NAME="NODENAME">/index.html"><TMPL_VAR ESCAPE="HTML" NAME="NODENAME"></a>
-                <span class="glyphicon glyphicon-chevron-right"></span>
-                  <TMPL_IF NAME="URL1"><a <TMPL_IF NAME="STATE_WARNING">class="warn"</TMPL_IF>
-                    <TMPL_IF NAME="STATE_CRITICAL">class="crit"</TMPL_IF> href="<TMPL_VAR NAME="R_PATH">/<TMPL_VAR NAME="URL">">
+    <div class="btn-group pull-right" id="largeset-nav">
+      <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
+        Periods for this node <span class="caret"></span>
+      </button>
+      <ul role="menu" class="dropdown-menu">
+          <li><a href="<TMPL_VAR NAME="R_PATH">/<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"><TMPL_VAR ESCAPE="URL" NAME="PATHNAME">/</TMPL_IF></TMPL_LOOP>comparison-day.html">Period: day</a></li>
+          <li><a href="<TMPL_VAR NAME="R_PATH">/<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"><TMPL_VAR ESCAPE="URL" NAME="PATHNAME">/</TMPL_IF></TMPL_LOOP>comparison-week.html">Period: week</a></li>
+          <li><a href="<TMPL_VAR NAME="R_PATH">/<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"><TMPL_VAR ESCAPE="URL" NAME="PATHNAME">/</TMPL_IF></TMPL_LOOP>comparison-month.html">Period: month</a></li>
+          <li><a href="<TMPL_VAR NAME="R_PATH">/<TMPL_LOOP NAME="PATH"><TMPL_IF NAME="pathname"><TMPL_VAR ESCAPE="URL" NAME="PATHNAME">/</TMPL_IF></TMPL_LOOP>comparison-year.html">Period: year</a></li>
+      </ul>    
+    </div>
+    <ul id="tabs" class="nav nav-tabs tab-title" data-tabs="tabs">
+      <TMPL_LOOP NAME="CATEGORIES">
+        <li <TMPL_IF NAME="__FIRST__"> class="active" </TMPL_IF>>
+    <a href="#<TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME">" data-toggle="tab"><TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME"></a>
+        </li>
+      </TMPL_LOOP>
+    </ul>
+
+    <div id="my-tab-content" class="tab-content">    
+
+      <TMPL_LOOP NAME="CATEGORIES">
+
+        <div class="tab-pane fade <TMPL_IF NAME="__FIRST__">in active</TMPL_IF>" id="<TMPL_VAR ESCAPE="HTML" NAME="GROUPNAME">">
+
+          <TMPL_LOOP NAME="SERVICES">
+            <div class="row">
+              <TMPL_LOOP NAME="NODES">
+                <div class="col-md-6">
+                  <a href="<TMPL_VAR ESCAPE="URL" NAME="NODENAME">/index.html"><TMPL_VAR ESCAPE="HTML" NAME="NODENAME"></a>
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                      <TMPL_IF NAME="URL1"><a <TMPL_IF NAME="STATE_WARNING">class="warn"</TMPL_IF>
+                        <TMPL_IF NAME="STATE_CRITICAL">class="crit"</TMPL_IF> href="<TMPL_VAR NAME="R_PATH">/<TMPL_VAR NAME="URL">">
+                      </TMPL_IF>
+                      <TMPL_VAR ESCAPE="HTML" NAME="LABEL">
+                      <TMPL_IF NAME="URL1"></a></TMPL_IF>
+                  <TMPL_IF NAME="CIMGMONTH">
+                    <br/>
+                    <a href="<TMPL_VAR NAME="R_PATH">/<TMPL_VAR NAME="URL">">
+                      <img src="<TMPL_VAR NAME="CIMGMONTH">" alt="<TMPL_VAR ESCAPE="HTML" NAME="LABEL">"
+                       class="img-responsive i<TMPL_IF NAME="STATE_WARNING"> warn</TMPL_IF><TMPL_IF NAME="STATE_CRITICAL"> crit</TMPL_IF>"
+                       <TMPL_IF NAME="IMGMONTHWIDTH">width="<TMPL_VAR NAME="IMGMONTHWIDTH">" </TMPL_IF> 
+                       <TMPL_IF NAME="IMGMONTHHEIGHT">height="<TMPL_VAR NAME="IMGMONTHHEIGHT">"</TMPL_IF>/>
+                    </a>
                   </TMPL_IF>
-                  <TMPL_VAR ESCAPE="HTML" NAME="LABEL">
-                  <TMPL_IF NAME="URL1"></a></TMPL_IF>
-              <TMPL_IF NAME="CIMGMONTH">
-                <br/>
-                <a href="<TMPL_VAR NAME="R_PATH">/<TMPL_VAR NAME="URL">">
-                  <img src="<TMPL_VAR NAME="CIMGMONTH">" alt="<TMPL_VAR ESCAPE="HTML" NAME="LABEL">"
-                   class="img-responsive i<TMPL_IF NAME="STATE_WARNING"> warn</TMPL_IF><TMPL_IF NAME="STATE_CRITICAL"> crit</TMPL_IF>"
-                   <TMPL_IF NAME="IMGMONTHWIDTH">width="<TMPL_VAR NAME="IMGMONTHWIDTH">" </TMPL_IF> 
-                   <TMPL_IF NAME="IMGMONTHHEIGHT">height="<TMPL_VAR NAME="IMGMONTHHEIGHT">"</TMPL_IF>/>
-                </a>
-              </TMPL_IF>
+                </div>
+              </TMPL_LOOP>
             </div>
           </TMPL_LOOP>
+
         </div>
+
       </TMPL_LOOP>
-    </TMPL_LOOP>
+
+    </div>
 
 <TMPL_INCLUDE NAME="partial/footer.tmpl">