<!--
 ! 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.
 !-->

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="/webui/static/js/smoothie.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var feedSeries = new TimeSeries();
      	var state = "ACTIVE";
        var dataverse = "%s";
        var dataset = "%s";
        var feed = "%s";
        var ingestLocations = "%s";
        var computeLocations = "%s";
        var storageLocations = "%s";
        var ingestionPolicy = "%s";
        var activeSince = "%s";
        var targetUrl = "/feed/data?dataverse=" + dataverse + "&dataset=" + dataset + "&feed=" + feed;


        var ingestionNodes = ingestLocations.split(",");
        var numIngestionNodes = ingestionNodes.length;
        var seriesOptions = { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 };
        var ingestionTimeSeries = new Array();
        var graphNames = new Array();

        $.ajaxSetup({ cache: false });
        setInterval(fetchFeedReport, 5000);
        function fetchFeedReport() {
          $.ajax({
            url: '/feed/data?dataverse=' + dataverse + '&dataset=' + dataset + '&feed=' + feed,
            method: 'GET',
            dataType: 'json',
            success: onFeedReportReceived
            });
         }

         
        function onFeedReportReceived(data) {
            var status = data["status"];
            if(status == ("ended")){
              ingestLocations = " ";
              computeLocations = " ";
              storageLocations = " ";
              ingestionPolicy = " ";
              state = "INACTIVE";
              document.location.reload(true);
            } else {
            	var type = data["type"];
            	if (type == ("reload")) {
              		ingestLocations  = data["ingestLocations"];
              		computeLocations = data["computeLocations"];
              		storageLocations = data["storageLocations"];
              		document.location.reload(true);
           		 } else {
            		var report = data["value"];
            		var tputArray = report.split("|");
            		var covered = 0;
            		var totalTput = 0;
            		for( var i = 0; i < tputArray.length-1; i ++){
               			ingestionTimeSeries[i].append(data["time"], tputArray[i]);
               			covered++;
               			totalTput += parseInt(tputArray[i]);
            		}          
            		for( var j = covered; j < numIngestionNodes; j++){
                		ingestionTimeSeries[j].append(data["time"], 0);
            		}          
            		ingestionTimeSeries[numIngestionNodes].append(data["time"], totalTput);
            	}
            }
        }

        function myYRangeFunction(range) {
           var min = 0;
           var max = 5000;
           return {min: min, max: max};
        }

        function initTimeline(ingestLocations) {

          document.write("<i>" + "Feed Ingestion" + " "  + "<i>");
          document.write("<br />" + "Ingestion Locations: " + ingestLocations.replace(",",", "));
          document.write("<br />" + "Compute Locations: " + computeLocations.replace(",",", "));
          document.write("<br />" + "Storage Locations: " + storageLocations.replace(",",", "));
          document.write("<br />" + "Ingestion Policy: " + ingestionPolicy);
          document.write("<br />" + "Status: " + state);
          document.write("<br />");
          document.write("<br />");
    
          for( var i = 0; i < numIngestionNodes; i++){
              graphNames[i] = "Partition " + i;
          }          

          if(numIngestionNodes > 1){
             graphNames[numIngestionNodes] = "IngestionThroughput";
             drawCanvas(graphNames[numIngestionNodes]);
             ingestionTimeSeries[numIngestionNodes] = new TimeSeries();
             drawChart(graphNames[numIngestionNodes], ingestionTimeSeries[numIngestionNodes]);
          }

          for( var j = 0; j < numIngestionNodes; j++){
             drawCanvas(graphNames[j]);
             ingestionTimeSeries[j] = new TimeSeries();
             drawChart(graphNames[j], ingestionTimeSeries[j]);
          }
        }

        function drawCanvas(chartName) {
          document.write("<br />");
          document.write("<br />");
          document.write("<i>" + chartName + "</i>");
          document.write("<br />");
          document.write("<canvas id="+ "\"" + chartName + "\"" + " " + "width=\"500\" height=\"250\"></canvas>");
        }   

        function drawChart(chartName, ingestionTimeSeries) {
             var ingestionChart = new SmoothieChart({ timestampFormatter:SmoothieChart.timeFormatter, interpolation:'linear', minValue:0, millisPerPixel: 20, grid: { strokeStyle: '#555555', lineWidth: 1, millisPerLine: 1000, verticalSections: 10 }});
             ingestionChart.addTimeSeries(ingestionTimeSeries, seriesOptions);
             ingestionChart.streamTo(document.getElementById(chartName, 500));
        }

        initTimeline(ingestLocations);
     });   
    </script>
  </head>
  <body></body>
</html>