| <!-- |
| |
| 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" /> |
| <link href="css/select2.min.css" rel="stylesheet" /> |
| <script src="../js/jquery.js" type="text/javascript"></script> |
| <script src="../js/bootstrap.min.js" type="text/javascript"></script> |
| <script src="js/select2.min.js"></script> |
| <style> |
| .nowrap td { |
| white-space: nowrap; |
| padding: 5px; |
| } |
| |
| body { |
| margin: 5px; |
| } |
| |
| #graph { |
| min-height: 400px; |
| } |
| </style> |
| </head> |
| <body> |
| <form> |
| <div id="status"></div> |
| <div class="row"> |
| <div class="col-md-4 col-lg-4"> |
| <label>Metric Group</label> <select class="groups form-control" multiple="multiple"></select> |
| <label>Metrics</label> <select class="metrics form-control" multiple="multiple"></select> |
| <label>Sources</label> <select class="sources form-control" multiple="multiple"></select> |
| <label>Title</label> <input type=text id="title" class="form-control" /> |
| <label>Y-axis Min</label> <input type="text" id="ymin" class="form-control" /> |
| <label>Y-axis Max</label> <input type="text" id="ymax" class="form-control" /> |
| <label>Y-axis Unit</label> |
| <select id="yunit" class="form-control"> |
| <option>generic</option> |
| <option>bytes</option> |
| <option>bytes-decimal</option> |
| <option value="ops">op/s</option> |
| <option value="percent">%</option> |
| </select> |
| <div id="chartType"></div> |
| <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()"> |
| </div> |
| <div class="col-md-8 col-lg-8"> |
| <iframe id="graph" width="100%" height="700px" frameBorder="0" scrolling="no"></iframe> |
| </div> |
| </form> |
| <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>'); |
| } |
| |
| var getGroups = function() { |
| $.ajax({ |
| url: "/hicc/v1/metrics/schema", |
| dataType: "json", |
| success: function(data) { |
| var array = $.map(data, function(val, i) { |
| return { |
| id : i, |
| text: val |
| }; |
| }); |
| $('.groups').select2({ |
| data: array, |
| tags: true, |
| theme: 'classic' |
| }); |
| } |
| }); |
| }; |
| |
| var getMetrics = function (group) { |
| $.ajax({ |
| url: "/hicc/v1/metrics/schema/" + group, |
| dataType: "json", |
| success: function(data) { |
| var array = $.map(data, function(val, i) { |
| return { |
| id: i, |
| text: val |
| }; |
| }); |
| $('.metrics').select2({ |
| data: array, |
| tags: true, |
| theme: 'classic' |
| }); |
| } |
| }); |
| }; |
| |
| var getSources = function(group) { |
| $.ajax({ |
| url: "/hicc/v1/metrics/source/" + group, |
| dataType: "json", |
| success: function(data) { |
| var array = $.map(data, function(val, i) { |
| return { |
| id: i, |
| text: val |
| }; |
| }); |
| $('.sources').select2({ |
| data: array, |
| tags: true, |
| theme: 'classic' |
| }); |
| } |
| }); |
| } |
| |
| $(function() { |
| var groupData = getGroups(); |
| var $eventSelect = $(".groups"); |
| $eventSelect.on("select2:select", function(e) { |
| $('.groups :selected').each(function(i, selected) { |
| var group = $(selected).text(); |
| getMetrics(group); |
| getSources(group); |
| }); |
| }); |
| $eventSelect.on("select2:unselect", function (e) { |
| $('.metrics').not('.select2-container').empty(); |
| $('.sources').not('.select2-container').empty(); |
| }); |
| var $metricsEventSelect = $(".metrics"); |
| $metricsEventSelect.on("select2:select", function(e) { |
| $('#chartType').html(""); |
| $('.metrics :selected').each(function(i, selected) { |
| var metric = $(selected).text(); |
| 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); |
| }); |
| }); |
| $metricsEventSelect.on("select2:unselect", function(e) { |
| $('#chartType').html(""); |
| }); |
| }); |
| |
| |
| function buildChart() { |
| var test = $('.sources').val(); |
| if(test == null) { |
| $('.sources option:eq(0)').attr('selected',true); |
| } |
| var url = []; |
| var idx = 0; |
| $('.metrics :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 }; |
| } |
| $('.sources :selected').each(function(j, rowSelected) { |
| var s = { 'label' : $(selected).text() + "/" + $(rowSelected).text(), 'url' : encodeURI("/hicc/v1/metrics/series/" + $(selected).text() + "/" + $(rowSelected).text())}; |
| 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> |
| </body> |
| </html> |
