You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@edgent.apache.org by ho...@apache.org on 2016/03/18 22:55:24 UTC
incubator-quarks git commit: QUARKS-20 tuple count view shows tags,
fixed bugs with stream tags
Repository: incubator-quarks
Updated Branches:
refs/heads/master 72fb8a6f3 -> bcbce8a4b
QUARKS-20 tuple count view shows tags, fixed bugs with stream tags
Project: http://git-wip-us.apache.org/repos/asf/incubator-quarks/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-quarks/commit/bcbce8a4
Tree: http://git-wip-us.apache.org/repos/asf/incubator-quarks/tree/bcbce8a4
Diff: http://git-wip-us.apache.org/repos/asf/incubator-quarks/diff/bcbce8a4
Branch: refs/heads/master
Commit: bcbce8a4b4658a8a144c5445eeb9b067633da985
Parents: 72fb8a6
Author: Susan L. Cline <ho...@apache.org>
Authored: Fri Mar 18 13:53:19 2016 -0700
Committer: Susan L. Cline <ho...@apache.org>
Committed: Fri Mar 18 13:54:28 2016 -0700
----------------------------------------------------------------------
.../servlets/webapp_content/js/ext/d3.legend.js | 10 ++--
console/servlets/webapp_content/js/graph.js | 18 +++---
console/servlets/webapp_content/js/index.js | 61 ++++++++------------
console/servlets/webapp_content/js/metrics.js | 22 +++++++
.../servlets/webapp_content/js/streamtags.js | 40 ++++++++-----
5 files changed, 87 insertions(+), 64 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-quarks/blob/bcbce8a4/console/servlets/webapp_content/js/ext/d3.legend.js
----------------------------------------------------------------------
diff --git a/console/servlets/webapp_content/js/ext/d3.legend.js b/console/servlets/webapp_content/js/ext/d3.legend.js
index aa7be9b..c2a9362 100755
--- a/console/servlets/webapp_content/js/ext/d3.legend.js
+++ b/console/servlets/webapp_content/js/ext/d3.legend.js
@@ -51,7 +51,6 @@ d3.legend = function(g, chartSvg, pItems, legendTitle) {
}
});
else {
-
items = d3.entries(items).sort(
function(a,b) {
if (a.key < b.key) {
@@ -71,7 +70,7 @@ d3.legend = function(g, chartSvg, pItems, legendTitle) {
.call(function(d) { d.enter().append("text")})
.call(function(d) { d.exit().remove()})
.attr("y",function(d,i) { return i+"em"})
- .attr("x","1em")
+ .attr("x","1.5em")
.text(function(d) {
return d.key;
})
@@ -87,15 +86,14 @@ d3.legend = function(g, chartSvg, pItems, legendTitle) {
.call(function(d) { d.exit().remove()})
.attr("y", function(d,i) {
return i-0.75+ "em"})
- .attr("width", 8)
+ .attr("width", 10)
.attr("height", 8)
.style("fill",function(d) {
return d.value.color
})
.style("stroke", "none")
.style("fill-opacity", legendOpacity);
- } else if (legendTitle && legendTitle === "Oplet kind"){
-
+ } else if (legendTitle && legendTitle === "Oplet kind" || legendTitle === "Tuple count"){
liG.selectAll("g")
.data(items, function(d) {
return d.key;
@@ -115,7 +113,7 @@ d3.legend = function(g, chartSvg, pItems, legendTitle) {
.attr("y", function(d,i) {
count++;
return i-0.75+ "em"})
- .attr("width", 8)
+ .attr("width", legendTitle === "Oplet kind" ? 8 : 10)
.attr("height", 8)
.style("fill",function(d) {
return d.value.color
http://git-wip-us.apache.org/repos/asf/incubator-quarks/blob/bcbce8a4/console/servlets/webapp_content/js/graph.js
----------------------------------------------------------------------
diff --git a/console/servlets/webapp_content/js/graph.js b/console/servlets/webapp_content/js/graph.js
index 97679eb..c88265b 100644
--- a/console/servlets/webapp_content/js/graph.js
+++ b/console/servlets/webapp_content/js/graph.js
@@ -41,15 +41,20 @@ addValuesToEdges = function(graph, counterMetrics) {
return graph;
};
-getVertexFillColor = function(layer, data) {
+getVertexFillColor = function(layer, data, cMetrics) {
if (layer === "opletColor" || layer === "static") {
return opletColor[data.invocation.kind];
} else if (layer === "flow") {
- // return a muted color if it is a counter op
+ var tupleValue = parseInt(data.value, 10);
+ var derived = data.derived ? true : false;
+ var isZero = data.realValue === 0 && d.value === 0.45 ? true : false;
+ var tupleBucketsIdx = getTupleCountBucketsIndex(cMetrics, tupleValue, derived, isZero);
+
+ var myScale = d3.scale.linear().domain([0,tupleBucketsIdx.buckets.length -1]).range(tupleColorRange);
if (data.invocation.kind.toUpperCase().endsWith("COUNTEROP")) {
return "#c7c7c7";
} else {
- return d3.rgb("rgb(31, 119, 180)");
+ return myScale(tupleBucketsIdx.bucketIdx);
}
} else {
return colorMap[data.id.toString()];
@@ -120,13 +125,10 @@ parseOpletKind = function(kind) {
return returnName;
};
-getLegendColor = function(layer, d) {
- return getVertexFillColor(layer, d);
+getLegendColor = function(layer, d, cMetrics) {
+ return getVertexFillColor(layer, d, cMetrics);
};
-getEdgeColor = function(layer) {
-
-};
setVertexColorByFlowRate = function() {
http://git-wip-us.apache.org/repos/asf/incubator-quarks/blob/bcbce8a4/console/servlets/webapp_content/js/index.js
----------------------------------------------------------------------
diff --git a/console/servlets/webapp_content/js/index.js b/console/servlets/webapp_content/js/index.js
index 482249e..f7f8f2f 100644
--- a/console/servlets/webapp_content/js/index.js
+++ b/console/servlets/webapp_content/js/index.js
@@ -31,11 +31,6 @@ d3.select("#jobs")
resetAll(true);
});
-d3.select("#tags")
-.on("change", function(){
- resetAll(false);
-});
-
d3.select("#layers")
.on("change", function() {
layerVal = this.value;
@@ -469,7 +464,6 @@ var renderGraph = function(jobId, counterMetrics, bIsNewJob) {
.layout(32);
refreshedRowValues = sankey.nodes();
- var tupleMaxBucketsIdx = null;
var link = svg.append("g").selectAll(".link")
.data(graph.edges)
@@ -478,7 +472,7 @@ var renderGraph = function(jobId, counterMetrics, bIsNewJob) {
.style("stroke", function(d){
var matchedTags = [];
- if (d.tags && selectedTags.length > 0 && layer !== "flow") {
+ if (d.tags && selectedTags.length > 0) {
var tags = d.tags;
/*
* if this stream has multiple tags on it
@@ -506,30 +500,16 @@ var renderGraph = function(jobId, counterMetrics, bIsNewJob) {
} else {
return d.color = "#d3d3d3";
}
- } else if (layer ==="flow" && (counterMetrics && counterMetrics.length > 0)) {
- var tupleValue = parseInt(d.value, 10);
- var derived = d.derived ? true : false;
- var isZero = d.realValue === 0 && d.value === 0.45 ? true : false;
- tupleBucketsIdx = getTupleCountBucketsIndex(counterMetrics, tupleValue, derived, isZero);
- if (tupleMaxBucketsIdx === null) {
- tupleMaxBucketsIdx = tupleBucketsIdx;
- } else if (tupleBucketsIdx.buckets.length >= tupleMaxBucketsIdx.buckets.length) {
- tupleMaxBucketsIdx = tupleBucketsIdx;
- }
-
- var myScale = d3.scale.linear().domain([0,tupleBucketsIdx.buckets.length -1]).range(tupleColorRange);
- return d.color = myScale(tupleBucketsIdx.bucketIdx);
} else {
// layer is not flow, but no stream tags available
return d.color = "#d3d3d3";
}
-
})
.style("stroke-opacity", function(d){
if (d.tags && selectedTags.length > 0) {
// if the link has this color it is not the selected tag, make it more transparent
if (d.color === "#d3d3d3") {
- return 0.2;
+ return 0.6;
}
}
})
@@ -596,13 +576,15 @@ var renderGraph = function(jobId, counterMetrics, bIsNewJob) {
if (!opletColor[d.invocation.kind]) {
opletColor[d.invocation.kind] = color20(d.invocation.kind);
}
- return getVertexFillColor(layer, d);
+
+ return getVertexFillColor(layer, d, counterMetrics);
+
})
.attr("data-legend", function(d) {
return getLegendText(layer, d);
})
.style("stroke", function(d) {
- return getLegendColor(layer, d);
+ return getLegendColor(layer, d, counterMetrics);
});
@@ -620,13 +602,13 @@ var renderGraph = function(jobId, counterMetrics, bIsNewJob) {
if (!opletColor[d.invocation.kind]) {
opletColor[d.invocation.kind] = color20(d.invocation.kind);
}
- return getVertexFillColor(layer, d);
+ return getVertexFillColor(layer, d, counterMetrics);
})
.attr("data-legend", function(d) {
return getLegendText(layer, d);
})
.style("stroke", function(d) {
- return getLegendColor(layer, d);
+ return getLegendColor(layer, d, counterMetrics);
});
@@ -722,11 +704,23 @@ var renderGraph = function(jobId, counterMetrics, bIsNewJob) {
.attr("transform","translate(10,10)")
.style("font-size","11px")
.call(d3.legend, svg, null, "Oplet kind");
- }
+ }
+
+ if (layer === "flow" && counterMetrics.length > 0) {
+ var maxBucketIdx = getTupleMaxBucketIdx();
+ var bucketScale = d3.scale.linear().domain([0,maxBucketIdx.buckets.length - 1]).range(tupleColorRange);
+ var flowItems = getFormattedTupleLegend(maxBucketIdx, bucketScale);
+ legend = svgLegend
+ .append("g")
+ .attr("class","legend")
+ .attr("transform","translate(10,10)")
+ .style("font-size","11px")
+ .call(d3.legend, svg, flowItems, "Tuple count");
+ }
var showTagsChecked = $("#showTags").prop("checked");
// add a second legend for tags, even if opletColor has been chosen
- if (tagsArray.length > 0 && layer !== "flow" && showTagsChecked) {
+ if (tagsArray.length > 0 && showTagsChecked) {
var tItems = getFormattedTagLegend(tagsArray);
if (!svgLegend.select("g").empty()) {
// get the dimensions of the other legend and append this one after it
@@ -746,16 +740,9 @@ var renderGraph = function(jobId, counterMetrics, bIsNewJob) {
.style("font-size","11px")
.call(d3.legend, svg, tItems, "Stream tags");
}
- } else if (layer === "flow" && counterMetrics.length > 0) {
- var bucketScale = d3.scale.linear().domain([0,tupleMaxBucketsIdx.buckets.length - 1]).range(tupleColorRange);
- var flowItems = getFormattedTupleLegend(tupleMaxBucketsIdx, bucketScale);
- legend = svgLegend
- .append("g")
- .attr("class","legend")
- .attr("transform","translate(10,10)")
- .style("font-size","11px")
- .call(d3.legend, svg, flowItems, "Tuple count");
}
+
+
if (bIsNewJob !== undefined) {
fetchAvailableMetricsForJob(bIsNewJob);
} else {
http://git-wip-us.apache.org/repos/asf/incubator-quarks/blob/bcbce8a4/console/servlets/webapp_content/js/metrics.js
----------------------------------------------------------------------
diff --git a/console/servlets/webapp_content/js/metrics.js b/console/servlets/webapp_content/js/metrics.js
index c8ba6bc..69a5086 100644
--- a/console/servlets/webapp_content/js/metrics.js
+++ b/console/servlets/webapp_content/js/metrics.js
@@ -4,6 +4,7 @@ var metricCWideWidth = 1160 - margin.left - margin.right;
var svgCounterPadding = 40;
var metricCHeight = 380 - margin.top - margin.bottom - svgCounterPadding;
var runLineChart = null;
+var max_bucket_idx = null;
stopLineChart = function() {
if (runLineChart) {
@@ -42,6 +43,9 @@ getCounterMetricsForJob = function(callback, jobId, bIsNewJob) {
data.push(obj);
});
metricData = data;
+ if (bIsNewJob) {
+ clearTupleMaxBucketIdx();
+ }
}
callback(jobId, metricData, bIsNewJob);
}
@@ -177,10 +181,28 @@ getTupleCountBucketsIndex = function(counterMetrics, aValue, bIsDerivedValue, is
}
returnObj.bucketIdx = whichBucket;
returnObj.buckets = buckets;
+
+ if (max_bucket_idx === null) {
+ setTupleMaxBucketIdx(returnObj);
+ } else if (returnObj.buckets.length >= max_bucket_idx.buckets.length) {
+ setTupleMaxBucketIdx(returnObj);
+ }
return returnObj;
};
+setTupleMaxBucketIdx = function(nVal) {
+ max_bucket_idx = nVal;
+}
+
+getTupleMaxBucketIdx = function() {
+ return max_bucket_idx;
+};
+
+clearTupleMaxBucketIdx = function() {
+ max_bucket_idx = null;
+};
+
metricFunction = function(selectedJobId, metricSelected, bUseWideWidth) {
stopLineChart();
http://git-wip-us.apache.org/repos/asf/incubator-quarks/blob/bcbce8a4/console/servlets/webapp_content/js/streamtags.js
----------------------------------------------------------------------
diff --git a/console/servlets/webapp_content/js/streamtags.js b/console/servlets/webapp_content/js/streamtags.js
index 23d29f3..39e65be 100644
--- a/console/servlets/webapp_content/js/streamtags.js
+++ b/console/servlets/webapp_content/js/streamtags.js
@@ -14,11 +14,18 @@ $( "#dialog" ).dialog({
autoOpen: false,
dialogClass: "no-close-dialog",
modal: true,
- buttons: [ { text: "Done", click: function(){
- $( this ).dialog( "close" );
- // rerender the graph with the selected tags
- }}
- ],
+ buttons: [ { text: "Done",
+ click: function(){
+ $( this ).dialog( "close" );
+ clearInterval(run);
+ clearTableGraphs();
+
+ d3.select("#graphLoading").style("display", "none");
+ var selectedJob = d3.select("#jobs").node().value;
+ getCounterMetricsForJob(renderGraph, selectedJob);
+ startGraph(refreshInt);
+ }
+ }],
})
.css("font-size", "0.8em");
@@ -37,14 +44,19 @@ d3.select("#showTags")
showAllTags.property("disabled", true);
selectTagButton.property("disabled", true);
}
- resetAll();
+ clearInterval(run);
+ clearTableGraphs();
+
+ d3.select("#graphLoading").style("display", "none");
+ var selectedJob = d3.select("#jobs").node().value;
+ getCounterMetricsForJob(renderGraph, selectedJob);
+ startGraph(refreshInt);
});
showAllTags.on("change", function() {
if (this.checked === true) {
selectTagButton.property("disabled", true);
// render the graph with all the tags shown
- resetAll();
} else {
// enable it
selectTagButton.property("disabled", false);
@@ -57,8 +69,14 @@ showAllTags.on("change", function() {
var selectedValue = firstOpt.prop("value");
$("#tags").val([selectedValue]);
}
- resetAll();
}
+ clearInterval(run);
+ clearTableGraphs();
+
+ d3.select("#graphLoading").style("display", "none");
+ var selectedJob = d3.select("#jobs").node().value;
+ getCounterMetricsForJob(renderGraph, selectedJob);
+ startGraph(refreshInt);
});
selectTagButton.on("click", function() {
@@ -105,11 +123,7 @@ showTagDiv = function(bNewJob) {
// check which layer is selected, if type is not tuple count, display tag info
var layer = d3.select("#layers").property("value");
var tagsDiv = d3.select("#tagsDiv");
- if (layer === "flow") {
- tagsDiv.style("visibility", "hidden");
- return;
- }
-
+
if (!tagsArray || tagsArray.length === 0) {
tagsDiv.style("visibility", "hidden");
return;