asterix-app/src/main/resources/feed/dashboard.html - asterixdb - Gitiles

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