Merge pull request #9239 from vitessio/frances/plotly-replace

Migrate jQuery (pt. 1)

.gitignore

@@ -73,6 +73,8 @@ releases
 /web/vtctld2/bower.json~
 /web/vtctld2/public/bower_components/
 
+# Local examples
+/examples/local/vtdataroot
 
 # Vagrant
 .vagrant

Makefile

@@ -292,6 +292,9 @@ docker_lite_all: docker_lite $(DOCKER_LITE_TARGETS)
 docker_local:
 	${call build_docker_image,docker/local/Dockerfile,vitess/local}
 
+docker_run_local:
+	./docker/local/run.sh
+
 docker_mini:
 	${call build_docker_image,docker/mini/Dockerfile,vitess/mini}
 

go/vt/vtgate/executor_stats.go

@@ -22,10 +22,8 @@ const (
 <table style="vertical-align: middle; width: 100%">
 <tr>
 <td width="50%">
-  <div>
   <!-- The div in the next line will be overwritten by the JavaScript graph. -->
-    <div id="qps_chart">QPS</div>
-  </div>
+    <div id="qps_chart" style="height: 500px; width: 900px;">QPS</div>
 </td>
 
 <td width="50%" style="padding: 20px;">
@@ -38,11 +36,9 @@ const (
 </tr>
 </table>
 
-
-<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
 
-google.load("jquery", "1.4.0");
 google.load("visualization", "1", {packages:["corechart"]});
 
 function sampleDate(d, i) {
@@ -52,7 +48,7 @@ function sampleDate(d, i) {
 }
 
 function drawQPSChart() {
-  var div = $('#qps_chart').height(500).width(900).unwrap()[0]
+  var div = document.getElementById("qps_chart")
   var chart = new google.visualization.LineChart(div);
 
   var options = {
@@ -71,8 +67,9 @@ function drawQPSChart() {
     vars_url = window.location.pathname.substring(0, pos) + vars_url;
   }
 
-  var redraw = function() {
-    $.getJSON(vars_url, function(input_data) {
+  const redraw = () => fetch(vars_url)
+  .then(async (response) => {
+      const input_data = await response.json();
       var now = new Date();
       var qps = input_data.QPSByDbType;
       var planTypes = Object.keys(qps);
@@ -102,8 +99,7 @@ function drawQPSChart() {
         data.push(datum)
       }
       chart.draw(google.visualization.arrayToDataTable(data), options);
-    })
-  };
+  })
 
   redraw();
 

go/vt/vttablet/tabletmanager/vreplication/stats.go

@@ -463,13 +463,13 @@ var vreplicationTemplate = `
       <td>{{range $key, $values := .Rates}}<b>{{$key}}</b>: {{range $values}}{{.}} {{end}}<br>{{end}}</td>
       <td>{{range $index, $value := .Messages}}{{$value}}<br>{{end}}</td>
     </tr>{{end}}
-<div id="vreplication_qps_chart">QPS All Streams </div>
+<div id="vreplication_qps_chart" style="height: 500px; width: 900px">QPS All Streams </div>
 
-<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
 
 function drawVReplicationQPSChart() {
-  var div = $('#vreplication_qps_chart').height(500).width(900).unwrap()[0]
+  var div = document.getElementById('vreplication_qps_chart')
   var chart = new google.visualization.LineChart(div);
 
   var options = {
@@ -488,9 +488,10 @@ function drawVReplicationQPSChart() {
     vars_url = window.location.pathname.substring(0, pos) + vars_url;
   }
 
-  var redraw = function() {
-    $.getJSON(vars_url, function(input_data) {
-      var now = new Date();
+  const redraw = () => fetch(vars_url)
+  .then(async (response) => {
+	const input_data = await response.json();
+	var now = new Date();
       var qps = input_data.VReplicationQPS;
       var planTypes = Object.keys(qps);
       if (planTypes.length === 0) {
@@ -519,8 +520,7 @@ function drawVReplicationQPSChart() {
         data.push(datum)
       }
       chart.draw(google.visualization.arrayToDataTable(data), options);
-    })
-  };
+  })
 
   redraw();
 

go/vt/vttablet/tabletserver/status.go

@@ -128,11 +128,10 @@ var (
   <dd>will not serve traffic.</dd>
 </dl>
 <!-- The div in the next line will be overwritten by the JavaScript graph. -->
-<div id="qps_chart">QPS: {{.CurrentQPS}}</div>
-<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<div id="qps_chart" style="height: 500px; width: 900px">QPS: {{.CurrentQPS}}</div>
+<script src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
 
-google.load("jquery", "1.4.0");
 google.load("visualization", "1", {packages:["corechart"]});
 
 function sampleDate(d, i) {
@@ -142,7 +141,7 @@ function sampleDate(d, i) {
 }
 
 function drawQPSChart() {
-  var div = $('#qps_chart').height(500).width(900).unwrap()[0]
+  var div = document.getElementById("qps_chart")
   var chart = new google.visualization.LineChart(div);
 
   var options = {
@@ -161,18 +160,17 @@ function drawQPSChart() {
     vars_url = window.location.pathname.substring(0, pos) + vars_url;
   }
 
-  var redraw = function() {
-    $.getJSON(vars_url, function(input_data) {
+  const redraw = () => fetch(vars_url)
+  .then(async (response) => {
+      const input_data = await response.json();
       var now = new Date();
       var qps = input_data.QPS;
       var planTypes = Object.keys(qps);
       if (planTypes.length === 0) {
         planTypes = ["All"];
         qps["All"] = [];
       }
-
       var data = [["Time"].concat(planTypes)];
-
       // Create data points, starting with the most recent timestamp.
       // (On the graph this means going from right to left.)
       // Time span: 15 minutes in 5 second intervals.
@@ -192,8 +190,7 @@ function drawQPSChart() {
         data.push(datum)
       }
       chart.draw(google.visualization.arrayToDataTable(data), options);
-    })
-  };
+  })
 
   redraw();
 
@@ -202,7 +199,6 @@ function drawQPSChart() {
 }
 google.setOnLoadCallback(drawQPSChart);
 </script>
-
 `
 )
 

web/vtctld2/app/index.html

@@ -27,5 +27,5 @@
 </head>
 <body class="flex-column">
   <vt-app-root class="flex-column flex-grow">Loading...</vt-app-root>
-<script type="text/javascript" src="inline.js"></script><script type="text/javascript" src="styles.38b88af69dfd283498eb.bundle.js"></script><script type="text/javascript" src="main.28aaf6796e51c187f55b.bundle.js"></script></body>
+<script type="text/javascript" src="inline.js"></script><script type="text/javascript" src="styles.38b88af69dfd283498eb.bundle.js"></script><script type="text/javascript" src="main.4f05e5457c6dec67dde5.bundle.js"></script></body>
 </html>