src/main/web/hicc/jsp/graph_explorer.jsp - chukwa - Git at Google

 <%
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
 %>
 <%@ page import = "java.text.DecimalFormat,java.text.NumberFormat" %>
 <%@ page import = "org.apache.hadoop.chukwa.util.XssFilter" %>

 <%
     XssFilter xf = new XssFilter(request);
     NumberFormat nf = new DecimalFormat("###,###,###,##0.00");
     response.setHeader("boxId", xf.getParameter("boxId"));
     response.setContentType("text/html; chartset=UTF-8//IGNORE");
     String boxId=xf.getParameter("boxId");
     String cluster = (String) session.getAttribute("cluster");
 %>
 <html>
   <head>
   <link href="/hicc/css/default.css" rel="stylesheet" type="text/css">
   <link href="/hicc/css/formalize.css" rel="stylesheet" type="text/css">
   <script src="/hicc/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="/hicc/js/jquery.formalize.js"></script>
   <script src="/hicc/js/autoHeight.js" type="text/javascript" charset="utf-8"></script>
   <script>
     function randString(n) {
       if(!n) {
         n = 5;
       }

       var text = '';
       var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

       for(var i=0; i < n; i++) {
         text += possible.charAt(Math.floor(Math.random() * possible.length));
       }

       return text;
     }

     var checkDataLength = function(curOption) {
       return function(data) {
         if (data.length == 0) {
           curOption.attr('disabled', 'disabled');
         }
       }
     };

     $.ajax({ url: "/hicc/v1/metrics/schema", dataType: "json", success: function(data){
       for(var i in data) {
         $('#table').append("<option>"+data[i]+"</option>");
       }
       // Look through each table option and see if it has anything in its family?
       $('#table').children().each(
         function() {
           var table = $(this).text();
           $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table),
                    dataType: "json",
                    success: checkDataLength($(this))
           });
         }
       );
     }});


     function getFamilies() {
       var size = $('#family option').size();
       $('#family').find('option').remove();
       var table = $('#table').val();
       $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table), dataType: "json", success: function(data){
         for(var i in data) {
           $('#family').append("<option>"+data[i]+"</option>");
         }
         // Look through each family option and see if it has any columns
         var table = $('#table').val();
         $('#family').children().each(
           function() {
             var family = $(this).text();
             $.ajax({ url: encodeURI("/hicc/v1/metrics/source/"+table),
                      dataType: "json",
                      success: checkDataLength($(this))
             });
           }
         );
       }});
     }

     function getColumns() {
       var size = $('#column option').size();
       $('#column').find('option').remove();
       var table = $('#table').val();
       var family = $('#family').val();
       $('#family :selected').each(function(i, selected) {
         var family = $(selected).val();
         var url = encodeURI("/hicc/v1/metrics/schema/"+table+"/"+family);
         var tableFamily = table+"/"+family;
         // Look through each column option and see if it has any rows
         $.ajax({ url: url, dataType: "json", success: function(data){
           for(var i in data) {
             $('#column').append(
               $("<option></option>")
                 .attr("value", tableFamily+"/"+data[i])
                 .text(data[i])
             );
           }
         }});
       });
     }

     function getRows() {
       var size = $('#row option').size();
       $('#row').find('option').remove();
       $('#chartType').html("");
       $('#family :selected').each(function(i, selected) {
         var metric = $(selected).val();
         var selection = metric+": <select id='ctype"+i+"'><option>lines</option><option>bars</option><option>points</option><option>area</option></select><br>";
         $('#chartType').append(selection);
       });
       $('#table :selected').each(function(i, selected) {
         var metricGroup = $(selected).val();
         var url = encodeURI("/hicc/v1/metrics/source/"+metricGroup);
         $.ajax({ url: url, dataType: "json", success: function(data){
           for(var i in data) {
             var test = $('#row').find('option[value="'+data[i]+'"]').val();
             if(typeof(test) == "undefined") {
               $('#row').append('<option value="'+data[i]+'">'+data[i]+'</option>');
             }
           }
         }});
       });
     }

     function buildChart() {
       var test = $('#row').val();
       if(test == null) {
         $('#row option:eq(0)').attr('selected',true);
       }
       var url = [];
       var idx = 0;
       $('#family :selected').each(function(i, selected) {
         var id = '#ctype' + i;
         var chartType = $(id).val();
         var chartTypeOption = { show: true };
         if (chartType=='area') {
           chartTypeOption = { show: true, fill: true };
         }
         $('#row :selected').each(function(j, rowSelected) {
           var s = { 'label' : $(selected).val() + "/" + $(rowSelected).val(), 'url' : encodeURI("/hicc/v1/metrics/series/" + $(selected).val() + "/" + $(rowSelected).val())};
           if(chartType=='area') {
             s['lines']=chartTypeOption;
           } else {
             s[chartType]=chartTypeOption;
           }
           url[idx++] = s;
         });
       });
       var title = $('#title').val();
       var ymin = $('#ymin').val() ;
       var ymax = $('#ymax').val();
       var yunit = $('#yunit').val();
       var data = { 'title' : title, 'yUnitType' : yunit, 'width' : 300, 'height' : 200, 'series' : url };
       if(ymin!='') {
         data['min']=ymin;
       }
       if(ymax!='') {
         data['max']=ymax;
       }
       return data;
     }

     function plot() {
       var data = buildChart();
       $.ajax({
         url: '/hicc/v1/chart/preview',
         type: 'PUT',
         contentType: 'application/json',
         data: JSON.stringify(data),
         success: function(result) {
           $('#graph')[0].src="about:blank";
           $('#graph')[0].contentWindow.document.open();
           $('#graph')[0].contentWindow.document.write(result);
           $('#graph')[0].contentWindow.document.close();
         }
       });
     }

     function publishChart() {
       var json = buildChart();
       var url = "/hicc/v1/chart/save";
       try {
         if($('#title').val()=="") {
           $("#title").val("Please provide a title");
           $("#title").addClass("error");
           $("#title").bind("click", function() {
             $("#title").val("");
             $("#title").removeClass("error");
             $("#title").unbind("click");
           });
           throw "no title provided.";
         }
       } catch(err) {
         console.log(err);
         return false;
       }
       $.ajax({
         type: "POST",
         url: url,
         contentType : "application/json",
         data: JSON.stringify(json),
         success: function(data) {
           alert("Chart exported.");
         },
         fail: function(data) {
           alert("Chart export failed.");
         }
       });
     }
   </script>
   </head>
   <body>
     <form>
       <center>
       <table>
         <tr>
           <th>Metric Groups</th>
           <th>Metrics</th>
           <th>Sources</th>
           <th>Options</th>
           <th>Chart Type</th>
         </tr>
         <tr>
           <td>
             <select id="table" size="10" onMouseUp="getFamilies()" style="min-width: 100px;" class="select">
             </select>
           </td>
           <td>
             <select id="family" multiple size="10" style="min-width: 110px;" onMouseUp="getRows()">
             </select>
           </td>
           <td>
             <select id="row" size="10" style="min-width: 100px;">
             </select>
           </td>
           <td>
             <table>
               <tr>
                 <td>
                   <label>Title</label>
                 </td>
                 <td>
                   <input type=text id="title">
                 </td>
               </tr>
               <tr>
                 <td>
                   <label>Y-axis Min</label>
                 </td>
                 <td>
                   <input type="text" id="ymin" />
                 </td>
               </tr>
               <tr>
                 <td>
                   <label>Y-axis Max</label>
                 </td>
                 <td>
                   <input type="text" id="ymax" />
                 </td>
               </tr>
               <tr>
                 <td>
                   <label>Y-axis Unit</label>
                 </td>
                 <td>
                   <select id="yunit">
                     <option>bytes</option>
                     <option>bytes-decimal</option>
                     <option value="ops">op/s</option>
                     <option value="percent">%</option>
                     <option>generic</option>
                   </select>
                 </td>
               </tr>
             </table>
           </td>
           <td>
             <div id="chartType"></div>
           </td>
         </tr>
         <tr>
           <td>
             <input type=button name="action" value="Plot" onClick="plot()">
             <input type=button name="action" value="Publish" onClick="publishChart()">
           </td>
           <td>
           </td>
           <td>
           </td>
         </tr>
       </table>
     </form>
     <iframe id="graph" width="95%" class="autoHeight" height="70%" frameBorder="0" scrolling="no"></iframe>
     </center>
   </body>
 </html>
	<%
	/*
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* to you under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/
	%>
	<%@ page import = "java.text.DecimalFormat,java.text.NumberFormat" %>
	<%@ page import = "org.apache.hadoop.chukwa.util.XssFilter" %>

	<%
	XssFilter xf = new XssFilter(request);
	NumberFormat nf = new DecimalFormat("###,###,###,##0.00");
	response.setHeader("boxId", xf.getParameter("boxId"));
	response.setContentType("text/html; chartset=UTF-8//IGNORE");
	String boxId=xf.getParameter("boxId");
	String cluster = (String) session.getAttribute("cluster");
	%>
	<html>
	<head>
	<link href="/hicc/css/default.css" rel="stylesheet" type="text/css">
	<link href="/hicc/css/formalize.css" rel="stylesheet" type="text/css">
	<script src="/hicc/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/hicc/js/jquery.formalize.js"></script>
	<script src="/hicc/js/autoHeight.js" type="text/javascript" charset="utf-8"></script>
	<script>
	function randString(n) {
	if(!n) {
	n = 5;
	}

	var text = '';
	var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

	for(var i=0; i < n; i++) {
	text += possible.charAt(Math.floor(Math.random() * possible.length));
	}

	return text;
	}

	var checkDataLength = function(curOption) {
	return function(data) {
	if (data.length == 0) {
	curOption.attr('disabled', 'disabled');
	}
	}
	};

	$.ajax({ url: "/hicc/v1/metrics/schema", dataType: "json", success: function(data){
	for(var i in data) {
	$('#table').append("<option>"+data[i]+"</option>");
	}
	// Look through each table option and see if it has anything in its family?
	$('#table').children().each(
	function() {
	var table = $(this).text();
	$.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table),
	dataType: "json",
	success: checkDataLength($(this))
	});
	}
	);
	}});


	function getFamilies() {
	var size = $('#family option').size();
	$('#family').find('option').remove();
	var table = $('#table').val();
	$.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table), dataType: "json", success: function(data){
	for(var i in data) {
	$('#family').append("<option>"+data[i]+"</option>");
	}
	// Look through each family option and see if it has any columns
	var table = $('#table').val();
	$('#family').children().each(
	function() {
	var family = $(this).text();
	$.ajax({ url: encodeURI("/hicc/v1/metrics/source/"+table),
	dataType: "json",
	success: checkDataLength($(this))
	});
	}
	);
	}});
	}

	function getColumns() {
	var size = $('#column option').size();
	$('#column').find('option').remove();
	var table = $('#table').val();
	var family = $('#family').val();
	$('#family :selected').each(function(i, selected) {
	var family = $(selected).val();
	var url = encodeURI("/hicc/v1/metrics/schema/"+table+"/"+family);
	var tableFamily = table+"/"+family;
	// Look through each column option and see if it has any rows
	$.ajax({ url: url, dataType: "json", success: function(data){
	for(var i in data) {
	$('#column').append(
	$("<option></option>")
	.attr("value", tableFamily+"/"+data[i])
	.text(data[i])
	);
	}
	}});
	});
	}

	function getRows() {
	var size = $('#row option').size();
	$('#row').find('option').remove();
	$('#chartType').html("");
	$('#family :selected').each(function(i, selected) {
	var metric = $(selected).val();
	var selection = metric+": <select id='ctype"+i+"'><option>lines</option><option>bars</option><option>points</option><option>area</option></select><br>";
	$('#chartType').append(selection);
	});
	$('#table :selected').each(function(i, selected) {
	var metricGroup = $(selected).val();
	var url = encodeURI("/hicc/v1/metrics/source/"+metricGroup);
	$.ajax({ url: url, dataType: "json", success: function(data){
	for(var i in data) {
	var test = $('#row').find('option[value="'+data[i]+'"]').val();
	if(typeof(test) == "undefined") {
	$('#row').append('<option value="'+data[i]+'">'+data[i]+'</option>');
	}
	}
	}});
	});
	}

	function buildChart() {
	var test = $('#row').val();
	if(test == null) {
	$('#row option:eq(0)').attr('selected',true);
	}
	var url = [];
	var idx = 0;
	$('#family :selected').each(function(i, selected) {
	var id = '#ctype' + i;
	var chartType = $(id).val();
	var chartTypeOption = { show: true };
	if (chartType=='area') {
	chartTypeOption = { show: true, fill: true };
	}
	$('#row :selected').each(function(j, rowSelected) {
	var s = { 'label' : $(selected).val() + "/" + $(rowSelected).val(), 'url' : encodeURI("/hicc/v1/metrics/series/" + $(selected).val() + "/" + $(rowSelected).val())};
	if(chartType=='area') {
	s['lines']=chartTypeOption;
	} else {
	s[chartType]=chartTypeOption;
	}
	url[idx++] = s;
	});
	});
	var title = $('#title').val();
	var ymin = $('#ymin').val() ;
	var ymax = $('#ymax').val();
	var yunit = $('#yunit').val();
	var data = { 'title' : title, 'yUnitType' : yunit, 'width' : 300, 'height' : 200, 'series' : url };
	if(ymin!='') {
	data['min']=ymin;
	}
	if(ymax!='') {
	data['max']=ymax;
	}
	return data;
	}

	function plot() {
	var data = buildChart();
	$.ajax({
	url: '/hicc/v1/chart/preview',
	type: 'PUT',
	contentType: 'application/json',
	data: JSON.stringify(data),
	success: function(result) {
	$('#graph')[0].src="about:blank";
	$('#graph')[0].contentWindow.document.open();
	$('#graph')[0].contentWindow.document.write(result);
	$('#graph')[0].contentWindow.document.close();
	}
	});
	}

	function publishChart() {
	var json = buildChart();
	var url = "/hicc/v1/chart/save";
	try {
	if($('#title').val()=="") {
	$("#title").val("Please provide a title");
	$("#title").addClass("error");
	$("#title").bind("click", function() {
	$("#title").val("");
	$("#title").removeClass("error");
	$("#title").unbind("click");
	});
	throw "no title provided.";
	}
	} catch(err) {
	console.log(err);
	return false;
	}
	$.ajax({
	type: "POST",
	url: url,
	contentType : "application/json",
	data: JSON.stringify(json),
	success: function(data) {
	alert("Chart exported.");
	},
	fail: function(data) {
	alert("Chart export failed.");
	}
	});
	}
	</script>
	</head>
	<body>
	<form>
	<center>
	<table>
	<tr>
	<th>Metric Groups</th>
	<th>Metrics</th>
	<th>Sources</th>
	<th>Options</th>
	<th>Chart Type</th>
	</tr>
	<tr>
	<td>
	<select id="table" size="10" onMouseUp="getFamilies()" style="min-width: 100px;" class="select">
	</select>
	</td>
	<td>
	<select id="family" multiple size="10" style="min-width: 110px;" onMouseUp="getRows()">
	</select>
	</td>
	<td>
	<select id="row" size="10" style="min-width: 100px;">
	</select>
	</td>
	<td>
	<table>
	<tr>
	<td>
	<label>Title</label>
	</td>
	<td>
	<input type=text id="title">
	</td>
	</tr>
	<tr>
	<td>
	<label>Y-axis Min</label>
	</td>
	<td>
	<input type="text" id="ymin" />
	</td>
	</tr>
	<tr>
	<td>
	<label>Y-axis Max</label>
	</td>
	<td>
	<input type="text" id="ymax" />
	</td>
	</tr>
	<tr>
	<td>
	<label>Y-axis Unit</label>
	</td>
	<td>
	<select id="yunit">
	<option>bytes</option>
	<option>bytes-decimal</option>
	<option value="ops">op/s</option>
	<option value="percent">%</option>
	<option>generic</option>
	</select>
	</td>
	</tr>
	</table>
	</td>
	<td>
	<div id="chartType"></div>
	</td>
	</tr>
	<tr>
	<td>
	<input type=button name="action" value="Plot" onClick="plot()">
	<input type=button name="action" value="Publish" onClick="publishChart()">
	</td>
	<td>
	</td>
	<td>
	</td>
	</tr>
	</table>
	</form>
	<iframe id="graph" width="95%" class="autoHeight" height="70%" frameBorder="0" scrolling="no"></iframe>
	</center>
	</body>
	</html>