diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/QPI/compute.yaml | 1 | ||||
| -rw-r--r-- | resources/ansible_roles/qtip/tasks/aggregate.yml | 7 | ||||
| -rw-r--r-- | resources/template/qpi.html.j2 | 323 |
3 files changed, 329 insertions, 2 deletions
diff --git a/resources/QPI/compute.yaml b/resources/QPI/compute.yaml index bc4e8ab2..d27d769b 100644 --- a/resources/QPI/compute.yaml +++ b/resources/QPI/compute.yaml @@ -18,7 +18,6 @@ sections: # split based on different application formual: geometric mean workloads: - name: rsa_sign_512 - description: RSA signature 512 bits baseline: 14982.3 - name: rsa_verify_512 baseline: 180619.2 diff --git a/resources/ansible_roles/qtip/tasks/aggregate.yml b/resources/ansible_roles/qtip/tasks/aggregate.yml index 9ecdc700..904fc5d6 100644 --- a/resources/ansible_roles/qtip/tasks/aggregate.yml +++ b/resources/ansible_roles/qtip/tasks/aggregate.yml @@ -14,5 +14,10 @@ group: compute basepath: "{{ qtip_results }}/current" src: "compute.json" - dest: "{{ pod_name }}-qpi.json" + dest: "qpi.json" register: pod_result + +- name: generating HTML report + template: + src: "{{ qtip_resources }}/template/qpi.html.j2" + dest: "{{ qtip_results }}/current/index.html" diff --git a/resources/template/qpi.html.j2 b/resources/template/qpi.html.j2 new file mode 100644 index 00000000..3515676a --- /dev/null +++ b/resources/template/qpi.html.j2 @@ -0,0 +1,323 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + + circle, + path { + cursor: pointer; + } + + circle { + fill: none; + pointer-events: all; + } + + #tooltip { + background-color: white; + padding: 3px 5px; + border: 1px solid black; + text-align: center; + } + + html { + font-family: sans-serif; + + } +</style> +<body> +<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> +<script> + + var margin = {top: 350, right: 480, bottom: 350, left: 480}, + radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 10; + + function filter_min_arc_size_text(d, i) { + return (d.dx * d.depth * radius / 3) > 14 + }; + + var hue = d3.scale.category10(); + + var luminance = d3.scale.sqrt() + .domain([0, 1e6]) + .clamp(true) + .range([90, 20]); + + var svg = d3.select("body").append("svg") + .attr("width", margin.left + margin.right) + .attr("height", margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + var partition = d3.layout.partition() + .sort(function (a, b) { + return d3.ascending(a.name, b.name); + }) + .size([2 * Math.PI, radius]); + + var arc = d3.svg.arc() + .startAngle(function (d) { + return d.x; + }) + .endAngle(function (d) { + return d.x + d.dx - .01 / (d.depth + .5); + }) + .innerRadius(function (d) { + return radius / 3 * d.depth; + }) + .outerRadius(function (d) { + return radius / 3 * (d.depth + 1) - 1; + }); + + //Tooltip description + var tooltip = d3.select("body") + .append("div") + .attr("id", "tooltip") + .style("position", "absolute") + .style("z-index", "10") + .style("opacity", 0); + + function format_number(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } + + + function format_description(d) { + var description = d.description; + return '<b>' + d.name + '</b></br>' + d.description + '<br> (' + format_number(d.value) + ')'; + } + + function computeTextRotation(d) { + var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90 + + return angle; + } + + function mouseOverArc(d) { + d3.select(this).attr("stroke", "black") + + tooltip.html(format_description(d)); + return tooltip.transition() + .duration(50) + .style("opacity", 0.9); + } + + function mouseOutArc() { + d3.select(this).attr("stroke", "") + return tooltip.style("opacity", 0); + } + + function mouseMoveArc(d) { + return tooltip + .style("top", (d3.event.pageY - 10) + "px") + .style("left", (d3.event.pageX + 10) + "px"); + } + + var root_ = null; + d3.json("qpi.json", function (error, root) { + if (error) return console.warn(error); + // Compute the initial layout on the entire tree to sum sizes. + // Also compute the full name and fill color for each node, + // and stash the children so they can be restored as we descend. + + partition + .value(function (d) { + return d.score; + }) + .nodes(root) + .forEach(function (d) { + d._children = d.children; + d.sum = d.value; + d.key = key(d); + d.fill = fill(d); + }); + + // Now redefine the value function to use the previously-computed sum. + partition + .children(function (d, depth) { + return depth < 2 ? d._children : null; + }) + .value(function (d) { + return d.sum; + }); + + var center = svg.append("circle") + .attr("r", radius / 3) + .on("click", zoomOut); + + center.append("title") + .text("zoom out"); + + var partitioned_data = partition.nodes(root).slice(1) + + var path = svg.selectAll("path") + .data(partitioned_data) + .enter().append("path") + .attr("d", arc) + .style("fill", function (d) { + return d.fill; + }) + .each(function (d) { + this._current = updateArc(d); + }) + .on("click", zoomIn) + .on("mouseover", mouseOverArc) + .on("mousemove", mouseMoveArc) + .on("mouseout", mouseOutArc); + + + var texts = svg.selectAll("text") + .data(partitioned_data) + .enter().append("text") + .filter(filter_min_arc_size_text) + .attr("transform", function (d) { + return "rotate(" + computeTextRotation(d) + ")"; + }) + .attr("x", function (d) { + return radius / 3 * d.depth; + }) + .attr("dx", "6") // margin + .attr("dy", ".35em") // vertical-align + .text(function (d, i) { + return d.name + }) + + function zoomIn(p) { + if (p.depth > 1) p = p.parent; + if (!p.children) return; + zoom(p, p); + } + + function zoomOut(p) { + if (!p.parent) return; + zoom(p.parent, p); + } + + // Zoom to the specified new root. + function zoom(root, p) { + if (document.documentElement.__transition__) return; + + // Rescale outside angles to match the new layout. + var enterArc, + exitArc, + outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]); + + function insideArc(d) { + return p.key > d.key + ? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key + ? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0} + : {depth: 0, x: 0, dx: 2 * Math.PI}; + } + + function outsideArc(d) { + return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)}; + } + + center.datum(root); + + // When zooming in, arcs enter from the outside and exit to the inside. + // Entering outside arcs start from the old layout. + if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]); + + var new_data = partition.nodes(root).slice(1) + + path = path.data(new_data, function (d) { + return d.key; + }); + + // When zooming out, arcs enter from the inside and exit to the outside. + // Exiting outside arcs transition to the new layout. + if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]); + + d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function () { + path.exit().transition() + .style("fill-opacity", function (d) { + return d.depth === 1 + (root === p) ? 1 : 0; + }) + .attrTween("d", function (d) { + return arcTween.call(this, exitArc(d)); + }) + .remove(); + + path.enter().append("path") + .style("fill-opacity", function (d) { + return d.depth === 2 - (root === p) ? 1 : 0; + }) + .style("fill", function (d) { + return d.fill; + }) + .on("click", zoomIn) + .on("mouseover", mouseOverArc) + .on("mousemove", mouseMoveArc) + .on("mouseout", mouseOutArc) + .each(function (d) { + this._current = enterArc(d); + }); + + + path.transition() + .style("fill-opacity", 1) + .attrTween("d", function (d) { + return arcTween.call(this, updateArc(d)); + }); + + + }); + + + texts = texts.data(new_data, function (d) { + return d.key; + }) + + texts.exit() + .remove() + texts.enter() + .append("text") + + texts.style("opacity", 0) + .attr("transform", function (d) { + return "rotate(" + computeTextRotation(d) + ")"; + }) + .attr("x", function (d) { + return radius / 3 * d.depth; + }) + .attr("dx", "6") // margin + .attr("dy", ".35em") // vertical-align + .filter(filter_min_arc_size_text) + .text(function (d, i) { + return d.name + }) + .transition().delay(750).style("opacity", 1) + + + } + }); + + function key(d) { + var k = [], p = d; + while (p.depth) k.push(p.name), p = p.parent; + return k.reverse().join("."); + } + + function fill(d) { + var p = d; + while (p.depth > 1) p = p.parent; + var c = d3.lab(hue(p.name)); + c.l = luminance(d.sum); + return c; + } + + function arcTween(b) { + var i = d3.interpolate(this._current, b); + this._current = i(0); + return function (t) { + return arc(i(t)); + }; + } + + function updateArc(d) { + return {depth: d.depth, x: d.x, dx: d.dx}; + } + + d3.select(self.frameElement).style("height", margin.top + margin.bottom + "px"); + +</script>
\ No newline at end of file |