<!--

 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">&times;</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>