"Fossies" - the Fresh Open Source Software Archive

Member "ganglia-web-3.7.2/templates/default/cluster_view.tpl" (12 Oct 2015, 9129 Bytes) of package /linux/www/ganglia-web-3.7.2.tar.gz:


As a special service "Fossies" has tried to format the requested text file into HTML format (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 <!-- Begin cluster_view.tpl -->
    2 {if $heatmap_data}
    3 <script type="text/javascript" src="{$conf['protovis_js_path']}"></script>
    4 {/if}
    5 <script type="text/javascript">
    6 function Heatmap(elem_id, data) {
    7   this.elem_id = elem_id;
    8   this.data = data;
    9   this.num_cols = data.length;
   10   this.cell_size = $("#" + elem_id).height() / this.num_cols;
   11   var this_map = this;
   12 
   13   this.vis = new pv.Panel()
   14     .width($("#" + elem_id).width())
   15     .height($("#" + elem_id).height())
   16     .margin(2)
   17     .strokeStyle("#aaa")
   18     .lineWidth(4)
   19     .antialias(false);
   20 
   21   this.fill = pv.Scale.linear().
   22     domain(0, 0.25, 0.5, 0.75, 1.00).
   23     range("#e2ecff", "#caff98", "#ffde5e", "#ffa15e", "#ff634f");
   24 
   25   this.row = this.vis.add(pv.Panel)
   26     .data(pv.range(this.num_cols))
   27     .height(this.cell_size)
   28     .top(function(d) { return d * this_map.cell_size;});
   29 
   30   this.cell = this.row.add(pv.Panel)
   31     .data(pv.range(this.num_cols))
   32     .height(this.cell_size)
   33     .width(this.cell_size)
   34     .left(function(d) { return d * this_map.cell_size;})
   35     .fillStyle(function(col_index, row_index) { return this_map.fill(this_map.data[row_index][col_index].load);})
   36     .title(function(col_index, row_index) { return this_map.data[row_index][col_index].host + ", load = " + (this_map.data[row_index][col_index].load * 100).toFixed(0) + "%";});
   37 }
   38 
   39 Heatmap.prototype.setData = function(data) {
   40   this.data = data;
   41   this.num_cols = data.length;
   42   this.cell_size = $("#" + this.elem_id).height() / this.num_cols;
   43 }
   44 
   45 Heatmap.prototype.render = function() {
   46   this.vis.render();
   47 }
   48 
   49 function refreshClusterView() {
   50   $.get('cluster_view.php?' + jQuery.param.querystring() + '&refresh', function(data) {
   51     var item = data.split("<!-- || -->");
   52 
   53     $('#cluster_title').html(item[1]);
   54 
   55     $('#cluster_overview').html(item[2]);
   56 
   57     if ($('#load_pie').size())
   58       $('#load_pie').attr("src", item[3].replace(/&amp;/g, "&"));
   59 
   60     if ($('#heatmap-fig').size()) {
   61       eval("heatmap.setData(" + item[4] + ")");
   62       heatmap.render();
   63     }
   64 
   65     if ($('#stacked_graph').size()) {
   66       var localtimestamp = parseInt(item[0]);
   67       var src = $('#stacked_graph').attr('src');
   68       $('#stacked_graph').attr("src", jQuery.param.querystring(src, "&st=" + localtimestamp));
   69     }
   70 
   71     var host_metric_graphs = $('#host_metric_graphs');
   72     host_metric_graphs.css('height', host_metric_graphs.height() + "px");
   73     host_metric_graphs.html(item[5]);
   74   });
   75 
   76   $("#optional_graphs img").each(function (index) {
   77     var src = $(this).attr("src");
   78     if ((src.indexOf("graph.php") == 0) ||
   79         (src.indexOf("./graph.php") == 0)) {
   80       var d = new Date();
   81       $(this).attr("src", jQuery.param.querystring(src, "&_=" + d.getTime()));
   82     }    
   83   });
   84 }
   85 
   86 $(function() {
   87   // Modified from http://jqueryui.com/demos/toggle/
   88   // run the currently selected effect
   89   function runEffect(id){
   90     // most effect types need no options passed by default
   91     var options = { };
   92 
   93     options = { to: { width: 200,height: 60 } }; 
   94     
   95     // run the effect
   96     $("#"+id+"_div").toggle("blind",options,500);
   97   };
   98  
   99   // set effect from select menu value
  100   $('.button').click(function(event) {
  101     runEffect(event.target.id);
  102     return false;
  103   });
  104 
  105   $("#edit_optional_graphs").dialog({ autoOpen: 
  106                                       false, minWidth: 550,
  107                                       beforeClose: function(event, ui) {  
  108                                         location.reload(true); 
  109                                       }});
  110   $("#edit_optional_graphs_button").button();
  111   $("#save_optional_graphs_button").button();
  112   $("#close_edit_optional_graphs_link").button();
  113 
  114   $("#edit_optional_graphs_button").click(function(event) {
  115     $("#edit_optional_graphs").dialog('open');
  116     $('#edit_optional_graphs_content').html('<img src="img/spinner.gif">');
  117     $.get('edit_optional_graphs.php', 
  118           "clustername={$cluster}", 
  119           function(data) {
  120             $('#edit_optional_graphs_content').html(data);
  121           });
  122     return false;
  123   });
  124 
  125   $("#save_optional_graphs_button").click(function(event) {
  126     $.get('edit_optional_graphs.php', 
  127           $("#edit_optional_reports_form").serialize(), 
  128           function(data) {
  129             $('#edit_optional_graphs_content').html(data);
  130             $("#save_optional_graphs_button").hide();
  131             setTimeout(function() {
  132               $('#edit_optional_graphs').dialog('close');}, 5000);
  133           });
  134     return false;
  135   });
  136 
  137   $("#show_hosts_scaled").buttonset();
  138 
  139   {if $picker_autocomplete}
  140     var cache = { }, lastXhr;
  141     $("#metrics-picker").autocomplete({
  142       minLength: 2,
  143       source: function( request, response ) {
  144         var term = request.term;
  145         if ( term in cache ) {
  146           response( cache[term] );
  147           return;
  148         }
  149         lastXhr = $.getJSON("api/metrics_autocomplete.php",
  150                             request, 
  151                             function( data, status, xhr ) {
  152                               cache[term] = data.message;
  153                               if ( xhr == lastXhr ) {
  154                                 response(data.message);
  155                               }
  156                             });
  157       }
  158     });
  159   {else}
  160     $("#metrics-picker").chosen({ max_selected_options:1,
  161                                   search_contains:true,
  162                                   no_results_text:"No metrics matched",
  163                                   placeholder_text_single:"Select a metric"}).
  164     on('change', function (evt, params) { ganglia_form.submit();});
  165   {/if}
  166 });
  167 </script>
  168 
  169 <style type="text/css">
  170   .toggler { width: 500px; height: 200px; }
  171   a.button { padding: .15em 1em; text-decoration: none; }
  172   #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
  173   #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  174   #heatmap-fig {
  175     width: 200px;
  176     height: 200px;
  177   } 
  178 </style>
  179 
  180 <div id="edit_optional_graphs">
  181   <div style="text-align:center">
  182     <button  id='save_optional_graphs_button'>Save</button>
  183   </div>
  184   <div id="edit_optional_graphs_content">Empty</div>
  185 </div>
  186 
  187 <div style="background:rgb(238,238,238);text-align:center;">
  188   <font size="+1" id="cluster_title">Overview of {$cluster} @ {$localtime}</font>
  189 </div>
  190 
  191 <table border="0" cellspacing=4 width="100%">
  192 <tr>
  193 <td align="left" valign="top">
  194 <div id="cluster_overview">
  195 {include('cluster_overview.tpl')}
  196 </div>
  197 {if isset($extra)}
  198 {include(file="$extra")}
  199 {/if}
  200 </td>
  201 <td rowspan=2 align="center" valign=top>
  202 <div id="optional_graphs" style="padding-bottom:4px">
  203 {$optional_reports}<br>
  204 {foreach $optional_graphs_data graph}
  205   <a href="./graph_all_periods.php?{$graph.graph_args}&amp;g={$graph.name}_report&amp;z=large">
  206   <img border=0 {$additional_cluster_img_html_args} title="{$cluster} {$graph.name}" src="./graph.php?{$graph.graph_args}&amp;g={$graph.name}_report&amp;z=medium"></a>
  207 {/foreach}
  208 </div>
  209 {if $user_may_edit}
  210 <button id="edit_optional_graphs_button">Edit Optional Graphs</button>
  211 {/if}
  212 </td>
  213 </tr>
  214 
  215 <tr>
  216  <td align="center" valign="top">
  217 {if $php_gd && !$heatmap_data}
  218   <img id="load_pie" src="./pie.php?{$pie_args}" border="0" />
  219 {/if}
  220 {if $heatmap_data && $num_nodes > 0}
  221 Server Load Distribution<br />
  222 <div id="heatmap-fig">
  223 <script type="text/javascript">
  224 var heatmap = new Heatmap("heatmap-fig", {$heatmap_data});
  225 heatmap.render();
  226     </script>
  227  </div>
  228 {/if}
  229  </td>
  230 </tr>
  231 </table>
  232 
  233 {if $stacked_graph_args}
  234 <center>
  235 <table width="100%" border=0>
  236 <tr>
  237   <td colspan="1">
  238   <font size="+1" style="text-align:center">Stacked Graph - {$metric}</font> 
  239   </td>
  240 </tr>
  241 <tr>
  242   <td>
  243   <center><img id="stacked_graph" src="stacked.php?{$stacked_graph_args}" alt="{$cluster} {$metric}"></center>
  244   </td>
  245 </tr>
  246 </table>
  247 </center>
  248 {/if}
  249 
  250 <div id="cluster_view_chooser" style="padding:5px;background:rgb(238,238,238);">
  251   <div style="text-align:center;padding:5px;">
  252     {if $showhosts != 0}
  253     <div class="nobr">{$cluster} <strong>{$metric}</strong>
  254       last <strong>{$range}</strong>
  255       sorted <strong>{$sort}</strong>
  256     </div>
  257     <div style="display:inline;">
  258      Metric&nbsp;
  259      {if $picker_autocomplete}
  260        <input name="m" id="metrics-picker" />
  261      {else}
  262        <select name="m" id="metrics-picker">{$picker_metrics}</select>
  263      {/if}
  264     </div>
  265     {/if}
  266     <div id="show_hosts_scaled" style="display:inline;padding-left:10px;">Show Hosts Scaled:
  267       {foreach $showhosts_levels id showhosts implode=""}
  268       <input type="radio" name="sh" value="{$id}" id="shch{$id}" OnClick="ganglia_form.submit();" {$showhosts.checked}><label for="shch{$id}">{$showhosts.name}</label>
  269       {/foreach}
  270     </div>
  271     {if isset($columns_size_dropdown) && ($showhosts != 0)}
  272       <div style="display:inline;padding-left:10px;" class="nobr">Size&nbsp;&nbsp;{$size_menu}</div>
  273       <div style="display:inline;padding-left:10px;" class="nobr">Columns&nbsp;&nbsp;{$cols_menu} (0 = metric + reports)</div>
  274     {/if}
  275   </div>
  276   <div style="text-align:center;">
  277     {$additional_filter_options}
  278   </div>
  279 </div>
  280 
  281 <div id="host_metric_graphs">
  282 {include('cluster_host_metric_graphs.tpl')}
  283 </div>
  284 
  285 <!-- End cluster_view.tpl -->