| <!-- |
| |
| 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" /> |
| <link href="css/bootstrap-iconpicker.min.css"/> |
| <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" /> |
| <ul id="view" class="nav nav-pills"> |
| <li role="presentation" class="active"><a data-toggle="pill" href="#time">Time Series</a></li> |
| <li role="presentation"><a data-toggle="pill" href="#tile">Tile</a></li> |
| <li role="presentation"><a data-toggle="pill" href="#pie">Pie Chart</a></li> |
| <li role="presentation"><a data-toggle="pill" href="#ring">Ring Chart</a></li> |
| </ul> |
| |
| <div class="tab-content"> |
| <div role="tabpanel" class="tab-pane active" id="time"> |
| <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> |
| </div> |
| <div role="tabpanel" class="tab-pane" id="tile"> |
| <label>Banner Icon</label><button name="icon" class="btn btn-default form-control" role="iconpicker"></button> |
| <label>Banner Text</label><input type="text" id="banner" class="form-control" /> |
| <label>Suffix Label</label><input type="text" id="suffix" class="form-control" /> |
| </div> |
| <div role="tabpanel" class="tab-pane" id="pie"> |
| <div class="checkbox"> |
| <label><input type="checkbox" id="donut"/>Donut</label> |
| </div> |
| </div> |
| <div role="tabpanel" class="tab-pane" id="ring"> |
| <label>Threshold</label> |
| <select id="threshold" class="form-control"> |
| <option value="up">Upper bound</option> |
| <option value="down">Lower bound</option> |
| </select> |
| <label>Suffix Label</label><input type="text" id="ringSuffix" class="form-control" /> |
| </div> |
| </div> |
| |
| <input type=button name="action" value="Plot" class="btn btn-default" onClick="preview()"> |
| <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 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> |
| <script src="js/iconset/iconset-glyphicon.min.js"></script> |
| <script src="js/bootstrap-iconpicker.min.js"></script> |
| <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 = []; |
| $('.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.push(s); |
| }); |
| }); |
| var title = $('#title').val(); |
| var icon = $('input[name="icon"]').val(); |
| var ymin = $('#ymin').val() ; |
| var ymax = $('#ymax').val(); |
| var yunit = $('#yunit').val(); |
| var threshold = $('#threshold').val(); |
| var banner = $('#banner').val(); |
| var suffix = $('#suffix').val(); |
| var view = $("ul#view li.active"); |
| if(view.text()=="Ring Chart") { |
| suffix = $('#ringSuffix').val(); |
| } |
| |
| var data = { |
| 'title' : title, |
| 'icon' : icon, |
| 'bannerText' : banner, |
| 'suffixText' : suffix, |
| 'yUnitType' : yunit, |
| 'threshold' : threshold, |
| 'width' : 300, |
| 'height' : 200, |
| 'series' : url |
| }; |
| if(ymin!='') { |
| data['min']=ymin; |
| } |
| if(ymax!='') { |
| data['max']=ymax; |
| } |
| |
| if( document.getElementById('donut').checked) { |
| data['type']="DONUT"; |
| } |
| |
| return data; |
| } |
| |
| function preview() { |
| var view = $("ul#view li.active"); |
| if(view.text()=="Time Series") { |
| plotTimeSeries(); |
| } else if(view.text()=="Tile") { |
| plotTile(); |
| } else if(view.text()=="Pie Chart") { |
| plotPie(); |
| } else if(view.text()=="Ring Chart") { |
| plotCircle(); |
| } |
| } |
| |
| function plotTimeSeries() { |
| var data = buildChart(); |
| $.ajax({ |
| url: '/hicc/v1/chart/preview', |
| type: 'PUT', |
| contentType: 'application/json', |
| data: JSON.stringify(data), |
| success: function(result) { |
| $('#graph')[0].src="/hicc/loading.html"; |
| setTimeout(function() { |
| $('#graph')[0].contentWindow.document.open(); |
| $('#graph')[0].contentWindow.document.write(result); |
| $('#graph')[0].contentWindow.document.close(); |
| }, 500); |
| } |
| }); |
| } |
| |
| function plotTile() { |
| var data = buildChart(); |
| $.ajax({ |
| url: '/hicc/v1/tile/preview', |
| type: 'PUT', |
| contentType: 'application/json', |
| data: JSON.stringify(data), |
| success: function(result) { |
| $('#graph')[0].src="/hicc/loading.html"; |
| setTimeout(function() { |
| $('#graph')[0].contentWindow.document.open(); |
| $('#graph')[0].contentWindow.document.write(result); |
| $('#graph')[0].contentWindow.document.close(); |
| }, 500); |
| } |
| }); |
| } |
| |
| function plotPie() { |
| var data = buildChart(); |
| $.ajax({ |
| url: '/hicc/v1/piechart/preview', |
| type: 'PUT', |
| contentType: 'application/json', |
| data: JSON.stringify(data), |
| success: function(result) { |
| $('#graph')[0].src="/hicc/loading.html"; |
| setTimeout(function() { |
| $('#graph')[0].contentWindow.document.open(); |
| $('#graph')[0].contentWindow.document.write(result); |
| $('#graph')[0].contentWindow.document.close(); |
| }, 500); |
| } |
| }); |
| } |
| |
| function plotCircle() { |
| var data = buildChart(); |
| $.ajax({ |
| url: '/hicc/v1/circles/preview', |
| type: 'PUT', |
| contentType: 'application/json', |
| data: JSON.stringify(data), |
| success: function(result) { |
| console.log(result); |
| $('#graph')[0].src="/hicc/loading.html"; |
| setTimeout(function() { |
| $('#graph')[0].contentWindow.document.open(); |
| $('#graph')[0].contentWindow.document.write(result); |
| $('#graph')[0].contentWindow.document.close(); |
| }, 500); |
| } |
| }); |
| } |
| |
| 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) { |
| var view = $("ul#view li.active"); |
| if(view.text()=="Time Series") { |
| type="chart"; |
| } else if(view.text()=="Tile") { |
| type="tile"; |
| } else if(view.text()=="Pie Chart") { |
| type="piechart"; |
| } else if(view.text()=="Ring Chart") { |
| type="circles"; |
| } |
| var target = '/hicc/v1/'+type+'/draw/'+data |
| buildWidget(json.title, target); |
| }, |
| error: function(data) { |
| alert("failed"); |
| status("danger", "Chart export failed."); |
| } |
| }); |
| } |
| </script> |
| </body> |
| </html> |