API tools faq
paste
Advertisement
Guest User

index

a guest
Jul 24th, 2014
243
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Finagle metrics charts</title>
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta name="description" content="">
  8.   <meta name="author" content="">
  9.  
  10.     <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
  11.     <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
  12.     <!--script src="js/less-1.3.3.min.js"></script-->
  13.     <!--append ‘#!watch’ to the browser URL, then refresh the page. -->
  14.    
  15.     <link href="css/bootstrap.min.css" rel="stylesheet">
  16.     <link href="css/style.css" rel="stylesheet">
  17.     <link href="css/bootstrap-combobox.css" rel="stylesheet">
  18.  
  19.     <script type="text/javascript" src="js/jquery.min.js"></script>
  20.     <script type="text/javascript" src="js/bootstrap.min.js"></script>
  21.     <script type="text/javascript" src="js/scripts.js"></script>
  22.     <script type="text/javascript" src="js/Chart.js"></script>
  23.     <script type="text/javascript" src="js/legend.js"></script>
  24.     <script type="text/javascript" src="js/bootstrap-combobox.js"></script>
  25. </head>
  26.  
  27. <body>
  28.     <br>
  29.     <br>
  30.     <br>
  31.     <div class="container">
  32.         <div class="row clearfix">
  33.             <div class="col-md-8 column">
  34.                 <p>
  35.                 <!-- <h2>Title</h2> -->
  36.                 <!--     <canvas id="uptimeChart" height="500" width="1000"></canvas> -->
  37.                 <h2>Requests</h2>
  38.                     <canvas id="requestsChart" height="500" width="1"></canvas>
  39.                     <div id="requestsLegend"></div>
  40.                 </p>
  41.             </div>
  42.             <div class="col-md-4 column">
  43.                 <!-- Interval(seconds): <input id="intervalInput" type="number" name="interval" min="1" max="120" value="5"> -->
  44.                 <!-- <button onclick="changeInterval()">OK</button> -->
  45.                 <select class="combobox">
  46.                     <option value="PA">Pennsylvania</option>
  47.                     <option value="CT">Connecticut</option>
  48.                     <option value="NY">New York</option>
  49.                     <option value="MD">Maryland</option>
  50.                     <option value="VA">Virginia</option>
  51.                 </select>
  52.             </div>
  53.         </div>
  54.     </div>
  55.  
  56. <script>
  57.     var requestsCountChartData = {
  58.         labels : [],
  59.         datasets : [
  60.         {
  61.             label: "all requests",
  62.             title: "All Requests",
  63.             fillColor : "rgba(151,187,205,0.2)",
  64.             strokeColor : "rgba(151,187,205,1)",
  65.             pointColor : "rgba(151,187,205,1)",
  66.             pointStrokeColor : "#fff",
  67.             pointHighlightFill : "#fff",
  68.             pointHighlightStroke : "rgba(151,187,205,1)",
  69.             data : []
  70.         },
  71.         {
  72.             label: "Success",
  73.             title: "Success requests",
  74.             fillColor : "rgba(50,230,0,0.2)",
  75.             strokeColor : "rgba(50,230,0,0.2)",
  76.             pointColor : "rgba(50,230,0,0.2)",
  77.             pointStrokeColor : "#fff",
  78.             pointHighlightFill : "#fff",
  79.             pointHighlightStroke : "rgba(151,187,205,1)",
  80.             data : []
  81.         },
  82.         // {
  83.         //     label: "Failures",
  84.         //     fillColor : "rgba(255,187,150,0.2)",
  85.         //     strokeColor : "rgba(255,187,150,0.2)",
  86.         //     pointColor : "rgba(255,187,150,0.2)",
  87.         //     pointStrokeColor : "#fff",
  88.         //     pointHighlightFill : "#fff",
  89.         //     pointHighlightStroke : "rgba(151,187,205,1)",
  90.         //     data : []
  91.         // },
  92.         ]
  93.     }
  94.  
  95.     var myUsername = "developer";
  96.     var myPassword = "MRbEVLKnw4";
  97.     function changeInterval() {
  98.         interval = document.getElementById("intervalInput").value;
  99.     }
  100.  
  101.     function getMetrics() {
  102.         var metrics;
  103.         $.ajax({
  104.             type: "GET",
  105.             url: "http://api-admin.konfettin.ru/admin/metrics.json",
  106.             dataType: "json",
  107.             async: false,
  108.             beforeSend: function(xhr){
  109.                 xhr.setRequestHeader("Authorization",
  110.                 "Basic " + btoa(myUsername + ":" + myPassword));
  111.             },
  112.             success:function(data) {
  113.                 metrics = data;
  114.             },
  115.             error:function(x, status, error) {
  116.             },
  117.         }).responseText;
  118.         return metrics;
  119.     }
  120.  
  121.     window.chartOptions = {
  122.         segmentShowStroke: false,
  123.         percentageInnerCutout: 75,
  124.         animation: false,
  125.         datasetFill : true,
  126.     };
  127.  
  128.     // seconds
  129.     var interval = 5;
  130.  
  131.     var chartsUpdate = function() {
  132.         var metrics = getMetrics();
  133.         // $('#uptimeChart').replaceWith('<canvas id="uptimeChart" height="500" width="1000"></canvas>');
  134.         // Draw the chart
  135.         // value += 1;
  136.         // uptimeData.push(value);
  137.         // lineChartData.labels.push(value.toString());
  138.         // console.log("update");
  139.         // console.log(uptimeData);
  140.         // var ctx = $('#uptimeChart').get(0).getContext("2d");
  141.         // new Chart(ctx).Line(lineChartData, window.chartOptions);
  142.         updateRequestsCount(metrics);
  143.         // Schedule next chart update tick
  144.         setTimeout (function() { chartsUpdate(); }, interval * 1000);
  145.     }
  146.  
  147.     function balance() {
  148.         console.log(requestsCountChartData.labels.lenght);
  149.         console.log(requestsCountChartData.labels.count);
  150.         if (requestsCountChartData.labels.lenght > 3) {
  151.             requestsCountChartData.labels = requestsCountChartData.labels.splice(0, 1);
  152.             requestsCountChartData.datasets[0] = requestsCountChartData.datasets[0].splice(0, 1);
  153.             requestsCountChartData.datasets[1] = requestsCountChartData.datasets[1].splice(0, 1);
  154.         }
  155.     }
  156.  
  157.     function nextValue(prev_value, curr_value) {
  158.         if (prev_value == undefined) {
  159.             return 0;
  160.         }
  161.         var diff = curr_value - prev_value;
  162.         return diff;
  163.     }
  164.  
  165.     var requests_all_prev;
  166.     var requests_saccess_prev;
  167.     function updateRequestsCount(metrics) {
  168.         var reqs = metrics['api-backend-1/requests'];
  169.         var s = metrics['api-backend-1/success'];
  170.         balance();
  171.  
  172.         requestsCountChartData.datasets[0].data.push(nextValue(requests_all_prev, reqs));
  173.         requestsCountChartData.datasets[0].data.push(nextValue(requests_all_prev, reqs));
  174.         requests_all_prev = reqs;
  175.  
  176.         requestsCountChartData.datasets[1].data.push(nextValue(requests_saccess_prev, s));
  177.         requestsCountChartData.datasets[1].data.push(nextValue(requests_saccess_prev, s));
  178.         requests_saccess_prev = s;
  179.  
  180.         var now = new Date();
  181.         var timeString = now.getHours() + ":" +
  182.             (now.getMinutes() < 10 ? "0":"") + now.getMinutes();
  183.  
  184.        requestsCountChartData.labels.push(timeString);
  185.  
  186.        $('#requestsChart').replaceWith('<canvas id="requestsChart" height="550" width="1000"></canvas>');
  187.         var ctx = $('#requestsChart').get(0).getContext("2d");
  188.         new Chart(ctx).Line(requestsCountChartData, window.chartOptions);
  189.     }
  190.  
  191.     $(document).ready(function() {
  192.         setTimeout (chartsUpdate(), interval * 1000);
  193.         legend(document.getElementById("requestsLegend"), requestsCountChartData);
  194.     })
  195.  
  196. </script>
  197. </body>
  198. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!