www_admin/root/tt/dashboard.tt

    <!--[if IE]><script language="javascript" type="text/javascript" src="/js/jsrrd/flot/excanvas.min.js"></script><![endif]-->
    <script type="text/javascript" src="/js/jsrrd/jsrrd/binaryXHR.js"></script>
    <script type="text/javascript" src="/js/jsrrd/jsrrd/rrdFile.js"></script>
    <script type="text/javascript" src="/js/jsrrd/jsrrd/rrdMultiFile.js"></script>
    <script type="text/javascript" src="/js/jsrrd/jsrrd/rrdFlotSupport.js"></script>
    <script type="text/javascript" src="/js/jsrrd/jsrrd/rrdFlot.js"></script>
    <script type="text/javascript" src="/js/jsrrd/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="/js/jsrrd/flot/jquery.flot.selection.js"></script>
    <script type="text/javascript" src="/js/jsrrd/flot/jquery.flot.pie.js"></script>
    
    <h3 id="title">Dashboard</h3>

    <div class="topsubmenu">
      <ul>
        <li [% "class=\"selected\"" IF ctx=="system" %]><a href="system"><span>System</span></a></li>
        <li [% "class=\"selected\"" IF ctx == "voip" %]><a href="voip"><span>Voip</span></a></li>
        [% IF Catalyst.config.voisniff_features %]
        <li [% "class=\"selected\"" IF ctx == "sipstats" %]><a href="sipstats"><span>SIP Statistics</span></a></li>
        [% END %]
      </ul>
    </div>
    <div class="topsubmenudivider"> </div>

    [% IF ctx == "sipstats" %]
      <h4>Statistics of last 24 hours</h4>
      <div class="span-14 last">
        <div class="span-4"><b>Overall SIP packets:</b></div>
        <div class="span-10 last">[% stats.req_count + stats.res_count %]</div>
      </div>
      <div class="span-14 last">
        <div class="span-4"><b>Requests:</b></div>
        <div class="span-10 last">[% stats.req_count %]</div>
      </div>
      <div class="span-14 last">
        <div class="span-4"><b>Responses:</b></div>
        <div class="span-10 last">[% stats.res_count %]</div>
      </div>

      <script type="text/javascript">

        var req_data = [
          [% FOREACH req IN stats.req.pairs %]
            [% k = req.key %]
            { label: "[% req.key %]", data: [% req.value %], },
          [% END %]
        ];
        var res_data = [
          [% FOREACH res IN stats.res.pairs %]
            { label: "[% res.key %]", data: [% res.value %], },
          [% END %]
        ];

        function pieHover(event, pos, obj, elem) 
        {
          if (!obj)
            return;
	  percent = parseFloat(obj.series.percent).toFixed(2);
	  $(elem).html('<span>'+obj.series.label+': '+obj.series.data[0][1]+' packets ('+percent+'%)</span>');
        }

        $(document).ready(function(){
          $.plot($("#req_pie"), req_data,
          {
            series: {
              pie: {
                show: true,
                combine: {
                  color: '#999',
                  threshold: 0.03,
                },
              },
            },
            legend: {
              show: false,
            },
            grid: {
              hoverable: true,
              clickable: false,
            },
          });
          $("#req_pie").bind("plothover", function(event, pos, obj){pieHover(event, pos, obj, "#req_hover");});

          $.plot($("#res_pie"), res_data,
          {
            series: {
              pie: {
                show: true,
                combine: {
                  color: '#999',
                  threshold: 0.03,
                },
              },
            },
            legend: {
              show: false,
            },
            grid: {
              hoverable: true,
              clickable: false,
            },
          });
          $("#res_pie").bind("plothover", function(event, pos, obj){pieHover(event, pos, obj, "#res_hover");});

        });
      </script>

      <div style="clear:both"></div>
      <div class="hspace-20"></div>
      
      <div class="span-18 last"><b>Requests</b></div>
      <div class="span-18 last">
        <div class="span-9">
          <div id="req_hover" class="span-9 last">&nbsp;</div>
          <div id="req_pie" class="span-9 last" style="width:350px;height:350px;"></div>
        </div>
        <div class="span-9 last" style="padding-top:70px;">
          [% FOREACH req IN stats.req.pairs %]
            <div class="span-3">[% req.key %]:</div>
            <div class="span-6 last">[% req.value%]</div>
          [% END %]
        </div>
      </div>
      <div style="clear:both"></div>

      <div class="span-18 last"><b>Responses</b></div>
      <div class="span-18 last">
        <div class="span-9">
          <div id="res_hover" class="span-9 last">&nbsp;</div>
          <div id="res_pie" class="span-9 last" style="width:350px;height:350px;"></div>
        </div>
        <div class="span-9 last" style="padding-top:70px;">
          [% FOREACH res IN stats.res.pairs %]
            <div class="span-3">[% res.key %]:</div>
            <div class="span-6 last">[% res.value%]</div>
          [% END %]
        </div>
      </div>

      <div style="clear:both"></div>
      <div class="hspace-20"></div>
      <h4>Packet Analyzer Statistics</h4>
    [% END %]

    <p>Click&amp;Drag on the graphs to zoom individual ranges.</p> 
	
    <div class="nobg span-17">
      [% even = 0 %]
      [% FOREACH item IN plotdata %]
        <span style="font-weight: bold;">[% item.title %]</span>
        <div id="plot_[% item.name %]"><div style="margin: 20px;"><img src="/static/images/loader.gif" alt="loading" style="margin-right: 10px;"/>loading...</div></div>
      [% END %]
    </div>

    <script type="text/javascript">

      function update_fname(rrd_data_arr, args) {
        var graph_opts = {};
        var ds_graph_opts = {};
        var tz_offset = [% tz_offset %];

        if (rrd_data_arr.length == 1)
          var f = new rrdFlot(args['plot_id'],rrd_data_arr[0],graph_opts,ds_graph_opts,args['si_suffix'],tz_offset);
        else {
          var t = new RRDFileSum(rrd_data_arr, false);
          var f = new rrdFlot(args['plot_id'],t,graph_opts,ds_graph_opts,args['si_suffix'],tz_offset);
        }
      }

      function update_fname_handler(bf, args) {
          var rrd_data=undefined;
          var fname = args['name'];
          var output = args['output'];
          try {
            var rrd_data=new RRDFile(bf);
          } catch(err) {
            alert("File "+fname+" is not a valid RRD archive!");
          }
          if (rrd_data!=undefined) {
            output.push(rrd_data);
            if (output.length >= args['rrd_count']) {
              update_fname(output, args);
            }
          }
      }

      function fname_update(fname, plot_id, si_suffix) {
        var o = new Array();
        for (var i = 0; i < fname.length; i++) {
          try {
            FetchBinaryURLAsync(fname[i], update_fname_handler, {plot_id: plot_id,
                                     si_suffix: si_suffix, rrd_count: fname.length, name: fname[i],
                                     output: o});
          } catch (err) {
             alert("Failed loading "+fname[i]+"\n"+err);
          }
        }
      }

      [% FOREACH item IN plotdata %]
        fname_update([
          [% FOREACH url IN item.url %]
            "[% url %]",
          [% END %]
        ], "plot_[% item.name %]", [% item.si ? "true" : "false" %]);
      [% END %]

    </script>