src/third_party/mozjs-45/python/mozbuild/mozbuild/resources/html-build-viewer/index.html - cobalt - Git at Google

 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 <html>
   <head>
     <title>Build System Resource Usage</title>

     <meta charset='utf-8'>
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <style>

 svg {
   overflow: visible;
 }

 .axis path,
 .axis line {
   fill: none;
   stroke: #000;
   shape-rendering: crispEdges;
 }

 .area {
   fill: steelblue;
 }

 .graphs {
   text-anchor: end;
 }

 .timeline {
   fill: steelblue;
   stroke: gray;
   stroke-width: 3;
 }

 .short {
   fill: gray;
   stroke: gray;
   stroke-width: 3;
 }

 #tooltip {
   z-index: 10;
   position: fixed;
   background: #efefef;
 }
     </style>
   </head>
   <body>
     <script>
 var currentResources;

 /**
  * Interface for a build resources JSON file.
  */
 function BuildResources(data) {
   if (data.version != 1) {
     throw new Error("Only version 1 of the JSON format is supported.");
   }

   this.resources = [];

   var cpu_fields = data.cpu_times_fields;
   var io_fields = data.io_fields;
   var virt_fields = data.virt_fields;
   var swap_fields = data.swap_fields;

   function convert(dest, source, key, fields) {
     var i = 0;
     fields.forEach(function (field) {
       dest[key][field] = source[key][i];
       i++;
     });
   }

   var offset = data.start;
   var cpu_times_totals = {};

   cpu_fields.forEach(function (field) {
     cpu_times_totals[field] = 0;
   });

   this.ioTotal = {};
   var i = 0;
   io_fields.forEach(function (field) {
     this.ioTotal[field] = data.io[i];
     i++;
   }.bind(this));

   data.resources.forEach(function (sample) {
     var entry = {
       start: sample.start - offset,
       end: sample.end - offset,
       duration: sample.duration,
       cpu_percent: sample.cpu_percent,
       cpu_times: {},
       cpu_times_percents: {},
       io: {},
       virt: {},
       swap: {},
     };

     convert(entry, sample, "cpu_times", cpu_fields);
     convert(entry, sample, "io", io_fields);
     convert(entry, sample, "virt", virt_fields);
     convert(entry, sample, "swap", swap_fields);

     var total = 0;
     for (var k in entry.cpu_times) {
       cpu_times_totals[k] += entry.cpu_times[k];
       total += entry.cpu_times[k];
     }

     for (var k in entry.cpu_times) {
       if (total == 0) {
         if (k == "idle") {
           entry.cpu_times_percents[k] = 100;
         } else {
           entry.cpu_times_percents[k] = 0;
         }
       } else {
         entry.cpu_times_percents[k] = entry.cpu_times[k] / total * 100;
       }
     }

     this.resources.push(entry);
   }.bind(this));

   this.cpu_times_fields = [];

   // Filter out CPU fields that have no values.
   for (var k in cpu_times_totals) {
     var v = cpu_times_totals[k];
     if (v) {
       this.cpu_times_fields.push(k);
       continue;
     }

     this.resources.forEach(function (entry) {
       delete entry.cpu_times[k];
       delete entry.cpu_times_percents[k];
     });
   }

   this.offset = offset;
   this.data = data;
 }

 BuildResources.prototype = Object.freeze({
   get start() {
     return this.data.start;
   },

   get startDate() {
     return new Date(this.start * 1000);
   },

   get end() {
     return this.data.end;
   },

   get endDate() {
     return new Date(this.end * 1000);
   },

   get duration() {
     return this.data.duration;
   },

   get sample_times() {
     var times = [];
     this.resources.forEach(function (sample) {
       times.push(sample.start);
     });

     return times;
   },

   get cpuPercent() {
     return this.data.cpu_percent;
   },

   get tiers() {
     var t = [];

     this.data.tiers.forEach(function (e) {
       t.push(e.name);
     });

     return t;
   },

   getTier: function (tier) {
     for (var i = 0; i < this.data.tiers.length; i++) {
       var t = this.data.tiers[i];

       if (t.name == tier) {
         return t;
       }
     }
   },
 });

 function updateResourcesGraph() {
   //var selected = document.getElementById("resourceType");
   //var what = selected[selected.selectedIndex].value;
   var what = "cpu";

   renderResources("resource_graph", currentResources, what);
   document.getElementById("wall_time").innerHTML = Math.round(currentResources.duration * 100) / 100;
   document.getElementById("start_date").innerHTML = currentResources.startDate.toISOString();
   document.getElementById("end_date").innerHTML = currentResources.endDate.toISOString();
   document.getElementById("cpu_percent").innerHTML = Math.round(currentResources.cpuPercent * 100) / 100;
   document.getElementById("write_bytes").innerHTML = currentResources.ioTotal["write_bytes"];
   document.getElementById("read_bytes").innerHTML = currentResources.ioTotal["read_bytes"];
   document.getElementById("write_time").innerHTML = currentResources.ioTotal["write_time"];
   document.getElementById("read_time").innerHTML = currentResources.ioTotal["read_time"];
 }

 function renderKey(key) {
   d3.json("/resources/" + key, function onResource(error, response) {
     if (error) {
       alert("Data not available. Is the server still running?");
       return;
     }

     currentResources = new BuildResources(response);
     updateResourcesGraph();
   });
 }

 function renderResources(id, resources, what) {
   document.getElementById(id).innerHTML = "";

   var margin = {top: 20, right: 20, bottom: 20, left: 50};
   var width = window.innerWidth - 50 - margin.left - margin.right;
   var height = 400 - margin.top - margin.bottom;

   var x = d3.scale.linear()
     .range([0, width])
     .domain(d3.extent(resources.resources, function (d) { return d.start; }))
     ;
   var y = d3.scale.linear()
     .range([height, 0])
     .domain([0, 1])
     ;

   var xAxis = d3.svg.axis()
     .scale(x)
     .orient("bottom")
     ;
   var yAxis = d3.svg.axis()
     .scale(y)
     .orient("left")
     .tickFormat(d3.format(".0%"))
     ;

   var area = d3.svg.area()
     .x(function (d) { return x(d.start); })
     .y0(function(d) { return y(d.y0); })
     .y1(function(d) { return y(d.y0 + d.y); })
     ;

   var stack = d3.layout.stack()
     .values(function (d) { return d.values; })
     ;

   // Manually control the layer order because we want it consistent and want
   // to inject some sanity.
   var layers = [
     ["nice", "#0d9fff"],
     ["irq", "#ff0d9f"],
     ["softirq", "#ff0d9f"],
     ["steal", "#000000"],
     ["guest", "#000000"],
     ["guest_nice", "#000000"],
     ["system", "#f69a5c"],
     ["iowait", "#ff0d25"],
     ["user", "#5cb9f6"],
     ["idle", "#e1e1e1"],
   ].filter(function (l) {
     return resources.cpu_times_fields.indexOf(l[0]) != -1;
   });

   // Draw a legend.
   var legend = d3.select("#" + id)
     .append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", 15)
       .append("g")
         .attr("class", "legend")
     ;

   legend.selectAll("g")
     .data(layers)
     .enter()
       .append("g")
         .each(function (d, i) {
           var g = d3.select(this);
           g.append("rect")
             .attr("x", i * 100 + 20)
             .attr("y", 0)
             .attr("width", 10)
             .attr("height", 10)
             .style("fill", d[1])
             ;
           g.append("text")
             .attr("x", i * 100 + 40)
             .attr("y", 10)
             .attr("height", 10)
             .attr("width", 70)
             .text(d[0])
             ;
           })
     ;

   var svg = d3.select("#" + id).append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
     ;

   var data = stack(layers.map(function (layer) {
     return {
       name: layer[0],
       color: layer[1],
       values: resources.resources.map(function (d) {
         return {
           start: d.start,
           y: d.cpu_times_percents[layer[0]] / 100,
         };
       }),
     };
   }));

   var graphs = svg.selectAll(".graphs")
     .data(data)
     .enter().append("g")
       .attr("class", "graphs")
     ;

   graphs.append("path")
     .attr("class", "area")
     .attr("d", function (d) { return area(d.values); })
     .style("fill", function (d) { return d.color; })
     ;

   svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis)
     ;

   svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
     ;

   // Now we render a timeline of sorts of the tiers
   // There is a row of rectangles that visualize divisions between the
   // different items. We use the same x scale as the resource graph so times
   // line up properly.
   svg = d3.select("#" + id).append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", 100 + margin.top + margin.bottom)
     .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
     ;

   var y = d3.scale.linear().range([10, 0]).domain([0, 1]);

   resources.tiers.forEach(function (t, i) {
     var tier = resources.getTier(t);

     var x_start = x(tier.start - resources.offset);
     var x_end = x(tier.end - resources.offset);

     svg.append("rect")
       .attr("x", x_start)
       .attr("y", 20)
       .attr("height", 30)
       .attr("width", x_end - x_start)
       .attr("class", "timeline tier")
       .attr("tier", t)
       ;
   });

   function getEntry(element) {
     var tier = element.getAttribute("tier");

     var entry = resources.getTier(tier);
     entry.tier = tier;

     return entry;
   }

   d3.selectAll(".timeline")
   .on("mouseenter", function () {
       var entry = getEntry(this);

       d3.select("#tt_tier").html(entry.tier);
       d3.select("#tt_duration").html(entry.duration || "n/a");
       d3.select("#tt_cpu_percent").html(entry.cpu_percent || "n/a");

       d3.select("#tooltip").style("display", "");
     })
     .on("mouseleave", function () {
       var tooltip = d3.select("#tooltip");
       tooltip.style("display", "none");
     })
     .on("mousemove", function () {
       var e = d3.event;
       x_offset = 10;

       if (e.pageX > window.innerWidth / 2) {
         x_offset = -150;
       }

       d3.select("#tooltip")
         .style("left", (e.pageX + x_offset) + "px")
         .style("top", (e.pageY + 10) + "px")
         ;
     })
     ;
 }

 document.addEventListener("DOMContentLoaded", function() {
   d3.json("list", function onList(error, response) {
     if (!response || !("files" in response)) {
       return;
     }

     renderKey(response.files[0]);
   });
 }, false);

     </script>
     <h3>Build Resource Usage Report</h3>

     <div id="tooltip" style="display: none;">
       <table border="0">
         <tr><td>Tier</td><td id="tt_tier"></td></tr>
         <tr><td>Duration</td><td id="tt_duration"></td></tr>
         <tr><td>CPU %</td><td id="tt_cpu_percent"></td></tr>
       </table>
     </div>

     <!--
     <select id="resourceType" onchange="updateResourcesGraph();">
       <option value="cpu">CPU</option>
       <option value="io_count">Disk I/O Count</option>
       <option value="io_bytes">Disk I/O Bytes</option>
       <option value="io_time">Disk I/O Time</option>
       <option value="virt">Memory</option>
     </select>
     -->

     <div id="resource_graph"></div>
     <div id="summary" style="padding-top: 20px">
       <table border="0">
         <tr><td>Wall Time (s)</td><td id="wall_time"></td></tr>
         <tr><td>Start Date</td><td id="start_date"></td></tr>
         <tr><td>End Date</td><td id="end_date"></td></tr>
         <tr><td>CPU %</td><td id="cpu_percent"></td></tr>
         <tr><td>Write Bytes</td><td id="write_bytes"></td></tr>
         <tr><td>Read Bytes</td><td id="read_bytes"></td></tr>
         <tr><td>Write Time</td><td id="write_time"></td></tr>
         <tr><td>Read Time</td><td id="read_time"></td></tr>
       </table>
     </div>
   </body>
 </html>
	<!-- This Source Code Form is subject to the terms of the Mozilla Public
	- License, v. 2.0. If a copy of the MPL was not distributed with this
	- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Build System Resource Usage</title>

	<meta charset='utf-8'>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>

	svg {
	overflow: visible;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.area {
	fill: steelblue;
	}

	.graphs {
	text-anchor: end;
	}

	.timeline {
	fill: steelblue;
	stroke: gray;
	stroke-width: 3;
	}

	.short {
	fill: gray;
	stroke: gray;
	stroke-width: 3;
	}

	#tooltip {
	z-index: 10;
	position: fixed;
	background: #efefef;
	}
	</style>
	</head>
	<body>
	<script>
	var currentResources;

	/**
	* Interface for a build resources JSON file.
	*/
	function BuildResources(data) {
	if (data.version != 1) {
	throw new Error("Only version 1 of the JSON format is supported.");
	}

	this.resources = [];

	var cpu_fields = data.cpu_times_fields;
	var io_fields = data.io_fields;
	var virt_fields = data.virt_fields;
	var swap_fields = data.swap_fields;

	function convert(dest, source, key, fields) {
	var i = 0;
	fields.forEach(function (field) {
	dest[key][field] = source[key][i];
	i++;
	});
	}

	var offset = data.start;
	var cpu_times_totals = {};

	cpu_fields.forEach(function (field) {
	cpu_times_totals[field] = 0;
	});

	this.ioTotal = {};
	var i = 0;
	io_fields.forEach(function (field) {
	this.ioTotal[field] = data.io[i];
	i++;
	}.bind(this));

	data.resources.forEach(function (sample) {
	var entry = {
	start: sample.start - offset,
	end: sample.end - offset,
	duration: sample.duration,
	cpu_percent: sample.cpu_percent,
	cpu_times: {},
	cpu_times_percents: {},
	io: {},
	virt: {},
	swap: {},
	};

	convert(entry, sample, "cpu_times", cpu_fields);
	convert(entry, sample, "io", io_fields);
	convert(entry, sample, "virt", virt_fields);
	convert(entry, sample, "swap", swap_fields);

	var total = 0;
	for (var k in entry.cpu_times) {
	cpu_times_totals[k] += entry.cpu_times[k];
	total += entry.cpu_times[k];
	}

	for (var k in entry.cpu_times) {
	if (total == 0) {
	if (k == "idle") {
	entry.cpu_times_percents[k] = 100;
	} else {
	entry.cpu_times_percents[k] = 0;
	}
	} else {
	entry.cpu_times_percents[k] = entry.cpu_times[k] / total * 100;
	}
	}

	this.resources.push(entry);
	}.bind(this));

	this.cpu_times_fields = [];

	// Filter out CPU fields that have no values.
	for (var k in cpu_times_totals) {
	var v = cpu_times_totals[k];
	if (v) {
	this.cpu_times_fields.push(k);
	continue;
	}

	this.resources.forEach(function (entry) {
	delete entry.cpu_times[k];
	delete entry.cpu_times_percents[k];
	});
	}

	this.offset = offset;
	this.data = data;
	}

	BuildResources.prototype = Object.freeze({
	get start() {
	return this.data.start;
	},

	get startDate() {
	return new Date(this.start * 1000);
	},

	get end() {
	return this.data.end;
	},

	get endDate() {
	return new Date(this.end * 1000);
	},

	get duration() {
	return this.data.duration;
	},

	get sample_times() {
	var times = [];
	this.resources.forEach(function (sample) {
	times.push(sample.start);
	});

	return times;
	},

	get cpuPercent() {
	return this.data.cpu_percent;
	},

	get tiers() {
	var t = [];

	this.data.tiers.forEach(function (e) {
	t.push(e.name);
	});

	return t;
	},

	getTier: function (tier) {
	for (var i = 0; i < this.data.tiers.length; i++) {
	var t = this.data.tiers[i];

	if (t.name == tier) {
	return t;
	}
	}
	},
	});

	function updateResourcesGraph() {
	//var selected = document.getElementById("resourceType");
	//var what = selected[selected.selectedIndex].value;
	var what = "cpu";

	renderResources("resource_graph", currentResources, what);
	document.getElementById("wall_time").innerHTML = Math.round(currentResources.duration * 100) / 100;
	document.getElementById("start_date").innerHTML = currentResources.startDate.toISOString();
	document.getElementById("end_date").innerHTML = currentResources.endDate.toISOString();
	document.getElementById("cpu_percent").innerHTML = Math.round(currentResources.cpuPercent * 100) / 100;
	document.getElementById("write_bytes").innerHTML = currentResources.ioTotal["write_bytes"];
	document.getElementById("read_bytes").innerHTML = currentResources.ioTotal["read_bytes"];
	document.getElementById("write_time").innerHTML = currentResources.ioTotal["write_time"];
	document.getElementById("read_time").innerHTML = currentResources.ioTotal["read_time"];
	}

	function renderKey(key) {
	d3.json("/resources/" + key, function onResource(error, response) {
	if (error) {
	alert("Data not available. Is the server still running?");
	return;
	}

	currentResources = new BuildResources(response);
	updateResourcesGraph();
	});
	}

	function renderResources(id, resources, what) {
	document.getElementById(id).innerHTML = "";

	var margin = {top: 20, right: 20, bottom: 20, left: 50};
	var width = window.innerWidth - 50 - margin.left - margin.right;
	var height = 400 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.range([0, width])
	.domain(d3.extent(resources.resources, function (d) { return d.start; }))
	;
	var y = d3.scale.linear()
	.range([height, 0])
	.domain([0, 1])
	;

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	;
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(d3.format(".0%"))
	;

	var area = d3.svg.area()
	.x(function (d) { return x(d.start); })
	.y0(function(d) { return y(d.y0); })
	.y1(function(d) { return y(d.y0 + d.y); })
	;

	var stack = d3.layout.stack()
	.values(function (d) { return d.values; })
	;

	// Manually control the layer order because we want it consistent and want
	// to inject some sanity.
	var layers = [
	["nice", "#0d9fff"],
	["irq", "#ff0d9f"],
	["softirq", "#ff0d9f"],
	["steal", "#000000"],
	["guest", "#000000"],
	["guest_nice", "#000000"],
	["system", "#f69a5c"],
	["iowait", "#ff0d25"],
	["user", "#5cb9f6"],
	["idle", "#e1e1e1"],
	].filter(function (l) {
	return resources.cpu_times_fields.indexOf(l[0]) != -1;
	});

	// Draw a legend.
	var legend = d3.select("#" + id)
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", 15)
	.append("g")
	.attr("class", "legend")
	;

	legend.selectAll("g")
	.data(layers)
	.enter()
	.append("g")
	.each(function (d, i) {
	var g = d3.select(this);
	g.append("rect")
	.attr("x", i * 100 + 20)
	.attr("y", 0)
	.attr("width", 10)
	.attr("height", 10)
	.style("fill", d[1])
	;
	g.append("text")
	.attr("x", i * 100 + 40)
	.attr("y", 10)
	.attr("height", 10)
	.attr("width", 70)
	.text(d[0])
	;
	})
	;

	var svg = d3.select("#" + id).append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	;

	var data = stack(layers.map(function (layer) {
	return {
	name: layer[0],
	color: layer[1],
	values: resources.resources.map(function (d) {
	return {
	start: d.start,
	y: d.cpu_times_percents[layer[0]] / 100,
	};
	}),
	};
	}));

	var graphs = svg.selectAll(".graphs")
	.data(data)
	.enter().append("g")
	.attr("class", "graphs")
	;

	graphs.append("path")
	.attr("class", "area")
	.attr("d", function (d) { return area(d.values); })
	.style("fill", function (d) { return d.color; })
	;

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	;

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	;

	// Now we render a timeline of sorts of the tiers
	// There is a row of rectangles that visualize divisions between the
	// different items. We use the same x scale as the resource graph so times
	// line up properly.
	svg = d3.select("#" + id).append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", 100 + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	;

	var y = d3.scale.linear().range([10, 0]).domain([0, 1]);

	resources.tiers.forEach(function (t, i) {
	var tier = resources.getTier(t);

	var x_start = x(tier.start - resources.offset);
	var x_end = x(tier.end - resources.offset);

	svg.append("rect")
	.attr("x", x_start)
	.attr("y", 20)
	.attr("height", 30)
	.attr("width", x_end - x_start)
	.attr("class", "timeline tier")
	.attr("tier", t)
	;
	});

	function getEntry(element) {
	var tier = element.getAttribute("tier");

	var entry = resources.getTier(tier);
	entry.tier = tier;

	return entry;
	}

	d3.selectAll(".timeline")
	.on("mouseenter", function () {
	var entry = getEntry(this);

	d3.select("#tt_tier").html(entry.tier);
	d3.select("#tt_duration").html(entry.duration \|\| "n/a");
	d3.select("#tt_cpu_percent").html(entry.cpu_percent \|\| "n/a");

	d3.select("#tooltip").style("display", "");
	})
	.on("mouseleave", function () {
	var tooltip = d3.select("#tooltip");
	tooltip.style("display", "none");
	})
	.on("mousemove", function () {
	var e = d3.event;
	x_offset = 10;

	if (e.pageX > window.innerWidth / 2) {
	x_offset = -150;
	}

	d3.select("#tooltip")
	.style("left", (e.pageX + x_offset) + "px")
	.style("top", (e.pageY + 10) + "px")
	;
	})
	;
	}

	document.addEventListener("DOMContentLoaded", function() {
	d3.json("list", function onList(error, response) {
	if (!response \|\| !("files" in response)) {
	return;
	}

	renderKey(response.files[0]);
	});
	}, false);

	</script>
	<h3>Build Resource Usage Report</h3>

	<div id="tooltip" style="display: none;">
	<table border="0">
	<tr><td>Tier</td><td id="tt_tier"></td></tr>
	<tr><td>Duration</td><td id="tt_duration"></td></tr>
	<tr><td>CPU %</td><td id="tt_cpu_percent"></td></tr>
	</table>
	</div>

	<!--
	<select id="resourceType" onchange="updateResourcesGraph();">
	<option value="cpu">CPU</option>
	<option value="io_count">Disk I/O Count</option>
	<option value="io_bytes">Disk I/O Bytes</option>
	<option value="io_time">Disk I/O Time</option>
	<option value="virt">Memory</option>
	</select>
	-->

	<div id="resource_graph"></div>
	<div id="summary" style="padding-top: 20px">
	<table border="0">
	<tr><td>Wall Time (s)</td><td id="wall_time"></td></tr>
	<tr><td>Start Date</td><td id="start_date"></td></tr>
	<tr><td>End Date</td><td id="end_date"></td></tr>
	<tr><td>CPU %</td><td id="cpu_percent"></td></tr>
	<tr><td>Write Bytes</td><td id="write_bytes"></td></tr>
	<tr><td>Read Bytes</td><td id="read_bytes"></td></tr>
	<tr><td>Write Time</td><td id="write_time"></td></tr>
	<tr><td>Read Time</td><td id="read_time"></td></tr>
	</table>
	</div>
	</body>
	</html>