| <!-- |
| |
| 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. |
| |
| --> |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" /> |
| <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" /> |
| <script src="../js/jquery.js" type="text/javascript"></script> |
| <script src="../js/bootstrap.min.js" type="text/javascript"></script> |
| <style> |
| .nowrap td { |
| white-space: nowrap; |
| padding: 5px; |
| } |
| |
| body { |
| margin: 5px; |
| } |
| |
| #graph { |
| min-height: 400px; |
| } |
| </style> |
| <script> |
| function status(type, message) { |
| $('#status').html('<div class="alert alert-'+type+' alert-dismissible" role="alert">'+ |
| '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+ |
| '<span aria-hidden="true">×</span></button>'+ |
| message+'</div>'); |
| } |
| |
| 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+"' class='form-control'><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 buildWidget(title, url) { |
| var widget = { |
| title: title, |
| src: url |
| } |
| widget['tokens'] = title.split(" "); |
| $.ajax({ |
| type: "POST", |
| url: '/hicc/v1/widget/create', |
| contentType: "application/json", |
| data: JSON.stringify(widget), |
| success: function(data) { |
| status("success", "Widget exported."); |
| }, |
| error: function(data) { |
| status("danger", "Widget export failed."); |
| } |
| }); |
| } |
| |
| 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) { |
| buildWidget(json.title, '/hicc/v1/chart/draw/'+data); |
| }, |
| error: function(data) { |
| alert("failed"); |
| status("danger", "Chart export failed."); |
| } |
| }); |
| } |
| </script> |
| </head> |
| <body> |
| <form> |
| <center> |
| <div id="status"></div> |
| <table class="nowrap"> |
| <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="form-control"> |
| </select> |
| </td> |
| <td> |
| <select id="family" multiple size="10" style="min-width: 110px;" onMouseUp="getRows()" class="form-control"> |
| </select> |
| </td> |
| <td> |
| <select id="row" size="10" style="min-width: 100px;" class="form-control"> |
| </select> |
| </td> |
| <td> |
| <table> |
| <tr> |
| <td> |
| <label>Title</label> |
| </td> |
| <td> |
| <input type=text id="title" class="form-control" /> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <label>Y-axis Min</label> |
| </td> |
| <td> |
| <input type="text" id="ymin" class="form-control" /> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <label>Y-axis Max</label> |
| </td> |
| <td> |
| <input type="text" id="ymax" class="form-control" /> |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <label>Y-axis Unit</label> |
| </td> |
| <td> |
| <select id="yunit" class="form-control"> |
| <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 colspan="5"> |
| <input type=button name="action" value="Plot" class="btn btn-default" onClick="plot()"> |
| <input type=button name="action" value="Publish" class="btn btn-default" onClick="publishChart()"> |
| </td> |
| </tr> |
| </table> |
| </form> |
| <iframe id="graph" width="95%" height="400px" frameBorder="0" scrolling="no"></iframe> |
| </center> |
| </body> |
| </html> |
