vitess.io/vitess@v0.16.2/go/vt/vtgate/executor_stats.go (about)

     1  /*
     2  Copyright 2019 The Vitess Authors.
     3  
     4  Licensed under the Apache License, Version 2.0 (the "License");
     5  you may not use this file except in compliance with the License.
     6  You may obtain a copy of the License at
     7  
     8      http://www.apache.org/licenses/LICENSE-2.0
     9  
    10  Unless required by applicable law or agreed to in writing, software
    11  distributed under the License is distributed on an "AS IS" BASIS,
    12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13  See the License for the specific language governing permissions and
    14  limitations under the License.
    15  */
    16  
    17  package vtgate
    18  
    19  const (
    20  	// ExecutorTemplate is the HTML template to display ExecutorStats.
    21  	ExecutorTemplate = `
    22  <table style="vertical-align: middle; width: 100%">
    23  <tr>
    24  <td width="50%">
    25    <!-- The div in the next line will be overwritten by the JavaScript graph. -->
    26      <div id="qps_chart" style="height: 500px; width: 900px;">QPS</div>
    27  </td>
    28  
    29  <td width="50%" style="padding: 20px;">
    30    <a href="/debug/health">Health</a><br>
    31    <a href="/debug/querylogz">Current Query Log</a><br>
    32    <a href="/debug/queryz">Query Plan Stats</a><br>
    33    <a href="/debug/query_plans">Query Plans</a><br>
    34    <a href="/debug/scatter_stats">Scatter Query Statistics</a><br>
    35  </td>
    36  </tr>
    37  </table>
    38  
    39  <script src="https://www.gstatic.com/charts/loader.js"></script>
    40  <script type="text/javascript">
    41  
    42  google.load("visualization", "1", {packages:["corechart"]});
    43  
    44  function sampleDate(d, i) {
    45    var copy = new Date(d);
    46    copy.setTime(copy.getTime() - i*60/5*1000);
    47    return copy
    48  }
    49  
    50  function drawQPSChart() {
    51    var div = document.getElementById("qps_chart")
    52    var chart = new google.visualization.LineChart(div);
    53  
    54    var options = {
    55      title: "QPS By DB Type",
    56      focusTarget: 'category',
    57      vAxis: {
    58        viewWindow: {min: 0},
    59      }
    60    };
    61  
    62    // If we're accessing status through a proxy that requires a URL prefix,
    63    // add the prefix to the vars URL.
    64    var vars_url = '/debug/vars';
    65    var pos = window.location.pathname.lastIndexOf('/debug/status');
    66    if (pos > 0) {
    67      vars_url = window.location.pathname.substring(0, pos) + vars_url;
    68    }
    69  
    70    const redraw = () => fetch(vars_url)
    71    .then(async (response) => {
    72        const input_data = await response.json();
    73        var now = new Date();
    74        var qps = input_data.QPSByDbType;
    75        var planTypes = Object.keys(qps);
    76        if (planTypes.length === 0) {
    77          planTypes = ["All"];
    78          qps["All"] = [];
    79        }
    80  
    81        var data = [["Time"].concat(planTypes)];
    82  
    83        // Create data points, starting with the most recent timestamp.
    84        // (On the graph this means going from right to left.)
    85        // Time span: 15 minutes in 5 second intervals.
    86        for (var i = 0; i < 15*60/5; i++) {
    87          var datum = [sampleDate(now, i)];
    88          for (var j = 0; j < planTypes.length; j++) {
    89            if (i < qps[planTypes[j]].length) {
    90            	// Rates are ordered from least recent to most recent.
    91            	// Therefore, we have to start reading from the end of the array.
    92            	var idx = qps[planTypes[j]].length - i - 1;
    93              datum.push(+qps[planTypes[j]][idx].toFixed(2));
    94            } else {
    95              // Assume 0.0 QPS for older, non-existent data points.
    96              datum.push(0);
    97            }
    98          }
    99          data.push(datum)
   100        }
   101        chart.draw(google.visualization.arrayToDataTable(data), options);
   102    })
   103  
   104    redraw();
   105  
   106    // redraw every 2.5 seconds.
   107    window.setInterval(redraw, 2500);
   108  }
   109  google.setOnLoadCallback(drawQPSChart);
   110  </script>
   111  `
   112  )