Repository: incubator-flink Updated Branches: refs/heads/master 923b508d1 -> 61bb30b80
Update LICENSE and add license headers to CSS and JS in flink clients Project: http://git-wip-us.apache.org/repos/asf/incubator-flink/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-flink/commit/61bb30b8 Tree: http://git-wip-us.apache.org/repos/asf/incubator-flink/tree/61bb30b8 Diff: http://git-wip-us.apache.org/repos/asf/incubator-flink/diff/61bb30b8 Branch: refs/heads/master Commit: 61bb30b804b274f4d051d47c46553036573ac715 Parents: 923b508 Author: Stephan Ewen <[email protected]> Authored: Tue Aug 19 12:07:03 2014 +0200 Committer: Stephan Ewen <[email protected]> Committed: Tue Aug 19 12:08:23 2014 +0200 ---------------------------------------------------------------------- LICENSE | 5 + flink-clients/resources/web-docs/css/graph.css | 20 +- .../resources/web-docs/css/nephelefrontend.css | 18 + .../resources/web-docs/css/overlay.css | 18 + .../resources/web-docs/css/pactgraphs.css | 18 + .../resources/web-docs/js/graphCreator.js | 714 ++++++++++--------- flink-clients/resources/web-docs/js/program.js | 54 +- flink-dist/src/main/flink-bin/LICENSE | 5 + .../web-docs-infoserver/css/timeline.css | 18 + 9 files changed, 503 insertions(+), 367 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/LICENSE ---------------------------------------------------------------------- diff --git a/LICENSE b/LICENSE index 15caf5a..3604605 100644 --- a/LICENSE +++ b/LICENSE @@ -268,6 +268,7 @@ under the The MIT License - Flot 0.8.1 (http://www.flotcharts.org) - Copyright (c) 2007-2013 IOLA and Ole Laursen - Bootstrap (http://getbootstrap.com) - Copyright (c) 2011-2014 Twitter, Inc - Font Awesome - Code (http://fortawesome.github.io/Font-Awesome/) - Copyright (c) 2014 Dave Gandy + - D3 dagre renderer (https://github.com/cpettitt/dagre-d3) - Copyright (c) 2012-2013 Chris Pettitt All rights reserved. @@ -310,6 +311,10 @@ under BSD-style licenses - Scala Compiler Reflect (BSD-like) - (http://www.scala-lang.org/) - Copyright (c) 2002-2014 EPFL, Copyright (c) 2011-2014 Typesafe, Inc. - ASM (BSD-like) - (http://asm.ow2.org/) - Copyright (c) 2000-2011 INRIA, France Telecom +(3-clause BSD license) + - D3 (http://d3js.org/) - Copyright (c) 2010-2014, Michael Bostock + + (Below is the 3-clause BSD license) All rights reserved. http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/flink-clients/resources/web-docs/css/graph.css ---------------------------------------------------------------------- diff --git a/flink-clients/resources/web-docs/css/graph.css b/flink-clients/resources/web-docs/css/graph.css index ca30650..085ade6 100644 --- a/flink-clients/resources/web-docs/css/graph.css +++ b/flink-clients/resources/web-docs/css/graph.css @@ -1,3 +1,21 @@ +/*! + * 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. + */ + g.type-TK > rect { fill: #00ffd0; } @@ -27,4 +45,4 @@ text { stroke: #333; stroke-width: 3px; fill: none; -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/flink-clients/resources/web-docs/css/nephelefrontend.css ---------------------------------------------------------------------- diff --git a/flink-clients/resources/web-docs/css/nephelefrontend.css b/flink-clients/resources/web-docs/css/nephelefrontend.css index 511ced1..afa4da0 100755 --- a/flink-clients/resources/web-docs/css/nephelefrontend.css +++ b/flink-clients/resources/web-docs/css/nephelefrontend.css @@ -1,3 +1,21 @@ +/*! + * 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. + */ + * { padding: 0px; http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/flink-clients/resources/web-docs/css/overlay.css ---------------------------------------------------------------------- diff --git a/flink-clients/resources/web-docs/css/overlay.css b/flink-clients/resources/web-docs/css/overlay.css index f7e5b42..b4e225e 100644 --- a/flink-clients/resources/web-docs/css/overlay.css +++ b/flink-clients/resources/web-docs/css/overlay.css @@ -1,3 +1,21 @@ +/*! + * 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. + */ + .simple_overlay { /* must be initially hidden */ http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/flink-clients/resources/web-docs/css/pactgraphs.css ---------------------------------------------------------------------- diff --git a/flink-clients/resources/web-docs/css/pactgraphs.css b/flink-clients/resources/web-docs/css/pactgraphs.css index a6b1a2c..1307873 100644 --- a/flink-clients/resources/web-docs/css/pactgraphs.css +++ b/flink-clients/resources/web-docs/css/pactgraphs.css @@ -1,3 +1,21 @@ +/*! + * 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. + */ + .draggable { position: absolute; http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/flink-clients/resources/web-docs/js/graphCreator.js ---------------------------------------------------------------------- diff --git a/flink-clients/resources/web-docs/js/graphCreator.js b/flink-clients/resources/web-docs/js/graphCreator.js index a5b0b2a..8ced97f 100644 --- a/flink-clients/resources/web-docs/js/graphCreator.js +++ b/flink-clients/resources/web-docs/js/graphCreator.js @@ -1,358 +1,376 @@ +/*! + * 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. + */ + /* * Document initialization. */ -$(document).ready(function () -{ - - -}); - -//The current JSON file -var JSONData; -//The informations for the iterations -var iterationIds = new Array(); -var iterationGraphs = new Array(); -var iterationWidths = new Array(); -var iterationHeights = new Array(); - -//Renders and draws the graph -function drawGraph(data, svgID){ - JSONData = data; - - //First step: precompute all iteration graphs - - //find all iterations - iterationNodes = searchForIterationNodes(); - - //add the graphs and the sizes + Ids to the arrays - if (iterationNodes != null) { - for (var i in iterationNodes) { - var itNode = iterationNodes[i]; - iterationIds.push(itNode.id); - var g0 = loadJsonToDagre(itNode); - iterationGraphs.push(g0); - var r = new dagreD3.Renderer(); - var l = dagreD3.layout() - .nodeSep(20) - .rankDir("LR"); - l = r.layout(l).run(g0, d3.select("#svg-main")); - - iterationWidths.push(l._value.width); - iterationHeights.push(l._value.height); - - //Clean svg - $("#svg-main g").empty(); - } - } - - //Continue normal - var g = loadJsonToDagre(data); - var selector = svgID + " g"; - var renderer = new dagreD3.Renderer(); - var layout = dagreD3.layout() - .nodeSep(20) - .rankDir("LR"); - - //new solution (with selection of id) - var svgElement = d3.select(selector); - layout = renderer.layout(layout).run(g, svgElement); - - var svg = d3.select("#svg-main") - .attr("width", $(document).width() - 15) - .attr("height", $(document).height() - 15 - 110) -// .attr("viewBox", "0 0 "+ ($(document).width() - 150) +" "+($(document).height() - 15 - 110)) - .call(d3.behavior.zoom("#svg-main").on("zoom", function() { - var ev = d3.event; - svg.select("#svg-main g") - .attr("transform", "translate(" + ev.translate + ") scale(" + ev.scale + ")"); - })); - - // This should now draw the precomputed graphs in the svgs... . - - for (var i in iterationIds) { - var workset = searchForNode(iterationIds[i]); - renderer = new dagreD3.Renderer(); - layout = dagreD3.layout() - .nodeSep(20) - .rankDir("LR"); - selector = "#svg-"+iterationIds[i]+" g"; - svgElement = d3.select(selector); - layout = renderer.layout(layout).run(iterationGraphs[i], svgElement); - } - - //enable Overlays and register function for overlay-infos - $("a[rel]").overlay({ - onBeforeLoad: function(){ - var id = this.getTrigger().attr("nodeID") - showProperties(id); - } - }); - - } - -//Creates the dagreD3 graph object -//Responsible for adding nodes and edges -function loadJsonToDagre(data){ - - //stores all nodes that are in right graph -> no edges out of iterations! - var existingNodes = new Array; - - var g = new dagreD3.Digraph(); - - if (data.nodes != null) { - console.log("Normal Json Data"); - for (var i in data.nodes) { - var el = data.nodes[i]; - g.addNode(el.id, { label: createLabelNode(el, ""), nodesWithoutEdges: ""} ); - existingNodes.push(el.id); - if (el.predecessors != null) { - for (var j in el.predecessors) { - if (existingNodes.indexOf(el.predecessors[j].id) != -1) { - g.addEdge(null, el.predecessors[j].id, el.id, { label: createLabelEdge(el.predecessors[j]) }); - } else { - console.log("Edge to node not in graph yet: " + el.predecessors[j].id); - var nWE = g.node(el.id).nodesWithoutEdges; - if (nWE != "") { - nWE += ", "+el.predecessors[j].id; - } else { - nWE = el.predecessors[j].id; - } - - g.node(el.id, { label: createLabelNode(el, nWE), nodesWithoutEdges: nWE}); - } - } - } - } - } else { - console.log("Iteration Json Data"); - for (var i in data.step_function) { - var el = data.step_function[i]; - g.addNode(el.id, { label: createLabelNode(el, ""), nodesWithoutEdges: ""} ); - existingNodes.push(el.id); - if (el.predecessors != null) { - for (var j in el.predecessors) { - if (existingNodes.indexOf(el.predecessors[j].id) != -1) { - g.addEdge(null, el.predecessors[j].id, el.id, { label: createLabelEdge(el.predecessors[j]) }); - } else { - console.log("Edge to node not in graph yet: " + el.predecessors[j].id); - var nWE = g.node(el.id).nodesWithoutEdges; - if (nWE != "") { - nWE += ", "+el.predecessors[j].id; - } else { - nWE = el.predecessors[j].id; - } - - g.node(el.id, { label: createLabelNode(el, nWE), nodesWithoutEdges: nWE}); - } - } - } - } - } - - return g; -} - -//create a label of an edge -function createLabelEdge(el) { - var labelValue = ""; - - if (el.ship_strategy != null || el.local_strategy != null) { - labelValue += "<div style=\"font-size: 100%; border:2px solid; padding:5px\">"; - if (el.ship_strategy != null) { - labelValue += el.ship_strategy; - } - if (el.local_strategy != undefined) { - labelValue += ",<br>" + el.local_strategy; - } - labelValue += "</div>"; - } - - return labelValue; -} - -//creates the label of a node, nWE are the NodesWithoutEdges -function createLabelNode(el, nWE) { - var labelValue = "<div style=\"margin-top: 0\">"; - //set color of panel - if (el.pact == "Data Source") { - labelValue += "<div style=\"border-color:#4ce199; border-width:4px; border-style:solid\">"; - } else if (el.pact == "Data Sink") { - labelValue += "<div style=\"border-color:#e6ec8b; border-width:4px; border-style:solid\">"; - } else { - labelValue += "<div style=\"border-color:#3fb6d8; border-width:4px; border-style:solid\">"; - } - //Nodename - //New Solution with overlay - labelValue += "<div><a nodeID=\""+el.id+"\" href=\"#\" rel=\"#propertyO\"><h3 style=\"text-align: center; font-size: 150%\">" + el.pact - + " (ID = "+el.id+")</h3></a>"; - if (el.contents == "") { - labelValue += "</div>"; - } else { - var stepName = el.contents; - //clean stepName - stepName = shortenString(stepName); - labelValue += "<h4 style=\"text-align: center; font-size: 130%\">" + stepName + "</h4></div>"; - } - - //If this node is a "iteration" we need a different panel-body - if (el.step_function != null) { - labelValue += extendLabelNodeForIteration(el.id); - return labelValue; - } - - if (el.parallelism != "") { - labelValue += "<h5 style=\"font-size:115%\">Parallelism: " + el.parallelism + "</h5>"; - } - - if (el.driver_strategy != undefined) { - labelValue += "<h5 style=\"font-size:115%\">Driver Strategy: " + el.driver_strategy + "</h5"; - } - - //Nodes without edges - if (nWE != "") { - labelValue += "<h5 style=\"font-size:115%\">Additional Edge to Node: <span class=\"badge\" style=\"font-size:120%\">"+nWE+"</span></h5>"; - } - - //close panel - labelValue += "</div></div>"; - return labelValue; -} - -//Extends the label of a node with an additional svg Element to present the workset iteration. -function extendLabelNodeForIteration(id) { - var svgID = "svg-" + id; - - //Find out the position of the iterationElement in the iterationGraphArray - var index = iterationIds.indexOf(id); - //Set the size and the width of the svg Element as precomputetd - var width = iterationWidths[index] + 70; - var height = iterationHeights[index] + 40; - - var labelValue = "<div id=\"attach\"><svg id=\""+svgID+"\" width="+width+" height="+height+"><g transform=\"translate(20, 20)\"/></svg></div>"; - return labelValue; -} - -//presents properties for a given nodeID in the propertyCanvas -function showProperties(nodeID) { - $("#propertyCanvas").empty(); - node = searchForNode(nodeID); - var phtml = "<div><h3>Properties of "+ shortenString(node.contents) + " - ID = " + nodeID + "</h3>"; - phtml += "<div class=\"row\">"; - - phtml += "<div class=\"col-md-4\"><h4>Pact Properties</h4>"; - phtml += "<table class=\"table\">"; - phtml += tableRow("Operator", (node.driver_strategy == undefined ? "None" : node.driver_strategy)); - phtml += tableRow("Parallelism", (node.parallelism == undefined ? "None" : node.parallelism)); - phtml += tableRow("Subtasks-per-instance", (node.subtasks_per_instance == undefined ? "None" : node.subtasks_per_instance)); - phtml += "</table></div>"; - - phtml += "<div class=\"col-md-4\"><h4>Global Data Properties</h4>"; - phtml += "<table class=\"table\">"; - if (node.global_properties != null) { +$(document).ready(function () +{ + + +}); + +//The current JSON file +var JSONData; +//The informations for the iterations +var iterationIds = new Array(); +var iterationGraphs = new Array(); +var iterationWidths = new Array(); +var iterationHeights = new Array(); + +//Renders and draws the graph +function drawGraph(data, svgID){ + JSONData = data; + + //First step: precompute all iteration graphs + + //find all iterations + iterationNodes = searchForIterationNodes(); + + //add the graphs and the sizes + Ids to the arrays + if (iterationNodes != null) { + for (var i in iterationNodes) { + var itNode = iterationNodes[i]; + iterationIds.push(itNode.id); + var g0 = loadJsonToDagre(itNode); + iterationGraphs.push(g0); + var r = new dagreD3.Renderer(); + var l = dagreD3.layout() + .nodeSep(20) + .rankDir("LR"); + l = r.layout(l).run(g0, d3.select("#svg-main")); + + iterationWidths.push(l._value.width); + iterationHeights.push(l._value.height); + + //Clean svg + $("#svg-main g").empty(); + } + } + + //Continue normal + var g = loadJsonToDagre(data); + var selector = svgID + " g"; + var renderer = new dagreD3.Renderer(); + var layout = dagreD3.layout() + .nodeSep(20) + .rankDir("LR"); + + //new solution (with selection of id) + var svgElement = d3.select(selector); + layout = renderer.layout(layout).run(g, svgElement); + + var svg = d3.select("#svg-main") + .attr("width", $(document).width() - 15) + .attr("height", $(document).height() - 15 - 110) +// .attr("viewBox", "0 0 "+ ($(document).width() - 150) +" "+($(document).height() - 15 - 110)) + .call(d3.behavior.zoom("#svg-main").on("zoom", function() { + var ev = d3.event; + svg.select("#svg-main g") + .attr("transform", "translate(" + ev.translate + ") scale(" + ev.scale + ")"); + })); + + // This should now draw the precomputed graphs in the svgs... . + + for (var i in iterationIds) { + var workset = searchForNode(iterationIds[i]); + renderer = new dagreD3.Renderer(); + layout = dagreD3.layout() + .nodeSep(20) + .rankDir("LR"); + selector = "#svg-"+iterationIds[i]+" g"; + svgElement = d3.select(selector); + layout = renderer.layout(layout).run(iterationGraphs[i], svgElement); + } + + //enable Overlays and register function for overlay-infos + $("a[rel]").overlay({ + onBeforeLoad: function(){ + var id = this.getTrigger().attr("nodeID") + showProperties(id); + } + }); + + } + +//Creates the dagreD3 graph object +//Responsible for adding nodes and edges +function loadJsonToDagre(data){ + + //stores all nodes that are in right graph -> no edges out of iterations! + var existingNodes = new Array; + + var g = new dagreD3.Digraph(); + + if (data.nodes != null) { + console.log("Normal Json Data"); + for (var i in data.nodes) { + var el = data.nodes[i]; + g.addNode(el.id, { label: createLabelNode(el, ""), nodesWithoutEdges: ""} ); + existingNodes.push(el.id); + if (el.predecessors != null) { + for (var j in el.predecessors) { + if (existingNodes.indexOf(el.predecessors[j].id) != -1) { + g.addEdge(null, el.predecessors[j].id, el.id, { label: createLabelEdge(el.predecessors[j]) }); + } else { + console.log("Edge to node not in graph yet: " + el.predecessors[j].id); + var nWE = g.node(el.id).nodesWithoutEdges; + if (nWE != "") { + nWE += ", "+el.predecessors[j].id; + } else { + nWE = el.predecessors[j].id; + } + + g.node(el.id, { label: createLabelNode(el, nWE), nodesWithoutEdges: nWE}); + } + } + } + } + } else { + console.log("Iteration Json Data"); + for (var i in data.step_function) { + var el = data.step_function[i]; + g.addNode(el.id, { label: createLabelNode(el, ""), nodesWithoutEdges: ""} ); + existingNodes.push(el.id); + if (el.predecessors != null) { + for (var j in el.predecessors) { + if (existingNodes.indexOf(el.predecessors[j].id) != -1) { + g.addEdge(null, el.predecessors[j].id, el.id, { label: createLabelEdge(el.predecessors[j]) }); + } else { + console.log("Edge to node not in graph yet: " + el.predecessors[j].id); + var nWE = g.node(el.id).nodesWithoutEdges; + if (nWE != "") { + nWE += ", "+el.predecessors[j].id; + } else { + nWE = el.predecessors[j].id; + } + + g.node(el.id, { label: createLabelNode(el, nWE), nodesWithoutEdges: nWE}); + } + } + } + } + } + + return g; +} + +//create a label of an edge +function createLabelEdge(el) { + var labelValue = ""; + + if (el.ship_strategy != null || el.local_strategy != null) { + labelValue += "<div style=\"font-size: 100%; border:2px solid; padding:5px\">"; + if (el.ship_strategy != null) { + labelValue += el.ship_strategy; + } + if (el.local_strategy != undefined) { + labelValue += ",<br>" + el.local_strategy; + } + labelValue += "</div>"; + } + + return labelValue; +} + +//creates the label of a node, nWE are the NodesWithoutEdges +function createLabelNode(el, nWE) { + var labelValue = "<div style=\"margin-top: 0\">"; + //set color of panel + if (el.pact == "Data Source") { + labelValue += "<div style=\"border-color:#4ce199; border-width:4px; border-style:solid\">"; + } else if (el.pact == "Data Sink") { + labelValue += "<div style=\"border-color:#e6ec8b; border-width:4px; border-style:solid\">"; + } else { + labelValue += "<div style=\"border-color:#3fb6d8; border-width:4px; border-style:solid\">"; + } + //Nodename + //New Solution with overlay + labelValue += "<div><a nodeID=\""+el.id+"\" href=\"#\" rel=\"#propertyO\"><h3 style=\"text-align: center; font-size: 150%\">" + el.pact + + " (ID = "+el.id+")</h3></a>"; + if (el.contents == "") { + labelValue += "</div>"; + } else { + var stepName = el.contents; + //clean stepName + stepName = shortenString(stepName); + labelValue += "<h4 style=\"text-align: center; font-size: 130%\">" + stepName + "</h4></div>"; + } + + //If this node is a "iteration" we need a different panel-body + if (el.step_function != null) { + labelValue += extendLabelNodeForIteration(el.id); + return labelValue; + } + + if (el.parallelism != "") { + labelValue += "<h5 style=\"font-size:115%\">Parallelism: " + el.parallelism + "</h5>"; + } + + if (el.driver_strategy != undefined) { + labelValue += "<h5 style=\"font-size:115%\">Driver Strategy: " + el.driver_strategy + "</h5"; + } + + //Nodes without edges + if (nWE != "") { + labelValue += "<h5 style=\"font-size:115%\">Additional Edge to Node: <span class=\"badge\" style=\"font-size:120%\">"+nWE+"</span></h5>"; + } + + //close panel + labelValue += "</div></div>"; + return labelValue; +} + +//Extends the label of a node with an additional svg Element to present the workset iteration. +function extendLabelNodeForIteration(id) { + var svgID = "svg-" + id; + + //Find out the position of the iterationElement in the iterationGraphArray + var index = iterationIds.indexOf(id); + //Set the size and the width of the svg Element as precomputetd + var width = iterationWidths[index] + 70; + var height = iterationHeights[index] + 40; + + var labelValue = "<div id=\"attach\"><svg id=\""+svgID+"\" width="+width+" height="+height+"><g transform=\"translate(20, 20)\"/></svg></div>"; + return labelValue; +} + +//presents properties for a given nodeID in the propertyCanvas +function showProperties(nodeID) { + $("#propertyCanvas").empty(); + node = searchForNode(nodeID); + var phtml = "<div><h3>Properties of "+ shortenString(node.contents) + " - ID = " + nodeID + "</h3>"; + phtml += "<div class=\"row\">"; + + phtml += "<div class=\"col-md-4\"><h4>Pact Properties</h4>"; + phtml += "<table class=\"table\">"; + phtml += tableRow("Operator", (node.driver_strategy == undefined ? "None" : node.driver_strategy)); + phtml += tableRow("Parallelism", (node.parallelism == undefined ? "None" : node.parallelism)); + phtml += tableRow("Subtasks-per-instance", (node.subtasks_per_instance == undefined ? "None" : node.subtasks_per_instance)); + phtml += "</table></div>"; + + phtml += "<div class=\"col-md-4\"><h4>Global Data Properties</h4>"; + phtml += "<table class=\"table\">"; + if (node.global_properties != null) { for (var i = 0; i < node.global_properties.length; i++) { var prop = node.global_properties[i]; phtml += tableRow((prop.name == undefined ? '(unknown)' : prop.name),(prop.value == undefined ? "(none)" : prop.value)); - } - } else { - phtml += tableRow("Global Properties", "None"); - } - phtml += "</table></div>"; - - phtml += "<div class=\"col-md-4\"><h4>Local Data Properties</h4>"; - phtml += "<table class=\"table\">"; - if (node.local_properties != null) { - for (var i = 0; i < node.local_properties.length; i++) { + } + } else { + phtml += tableRow("Global Properties", "None"); + } + phtml += "</table></div>"; + + phtml += "<div class=\"col-md-4\"><h4>Local Data Properties</h4>"; + phtml += "<table class=\"table\">"; + if (node.local_properties != null) { + for (var i = 0; i < node.local_properties.length; i++) { var prop = node.local_properties[i]; phtml += tableRow((prop.name == undefined ? '(unknown)' : prop.name),(prop.value == undefined ? "(none)" : prop.value)); - } - } else { - phtml += tableRow("Local Properties", "None"); - } - phtml += "</table></div></div>"; - - phtml += "<div class=\"row\">"; - phtml += "<div class=\"col-md-6\"><h4>Size Estimates</h4>"; - phtml += "<table class=\"table\">"; - if (node.estimates != null) { - for (var i = 0; i < node.estimates.length; i++) { + } + } else { + phtml += tableRow("Local Properties", "None"); + } + phtml += "</table></div></div>"; + + phtml += "<div class=\"row\">"; + phtml += "<div class=\"col-md-6\"><h4>Size Estimates</h4>"; + phtml += "<table class=\"table\">"; + if (node.estimates != null) { + for (var i = 0; i < node.estimates.length; i++) { var prop = node.estimates[i]; - phtml += tableRow((prop.name == undefined ? '(unknown)' : prop.name),(prop.value == undefined ? "(none)" : prop.value)); - } - } else { - phtml += tableRow("Size Estimates", "None"); - } - phtml += "</table></div>"; - - phtml += "<div class=\"col-md-6\"><h4>Cost Estimates</h4>"; - phtml += "<table class=\"table\">"; - if (node.costs != null) { + phtml += tableRow((prop.name == undefined ? '(unknown)' : prop.name),(prop.value == undefined ? "(none)" : prop.value)); + } + } else { + phtml += tableRow("Size Estimates", "None"); + } + phtml += "</table></div>"; + + phtml += "<div class=\"col-md-6\"><h4>Cost Estimates</h4>"; + phtml += "<table class=\"table\">"; + if (node.costs != null) { for (var i = 0; i < node.costs.length; i++) { - var prop = node.costs[i]; - phtml += tableRow((prop.name == undefined ? '(unknown)' : prop.name),(prop.value == undefined ? "(none)" : prop.value)); - } - } else { - phtml += tableRow("Cost Estimates", "None"); - } - phtml += "</table></div>"; - - phtml += "</div></div>"; - $("#propertyCanvas").append(phtml); - -} - -//searches in the global JSONData for the node with the given id -function searchForNode(nodeID) { - for (var i in JSONData.nodes) { - var el = JSONData.nodes[i]; - if (el.id == nodeID) { - return el; - } - //look for nodes that are in iterations - if (el.step_function != null) { - for (var j in el.step_function) { - if (el.step_function[j].id == nodeID) { - return el.step_function[j]; - } - } - } - } -} - -//searches for all nodes in the global JSONData, that are iterations -function searchForIterationNodes() { - var itN = new Array(); - for (var i in JSONData.nodes) { - var el = JSONData.nodes[i]; - if (el.step_function != null) { - itN.push(el); - } - } - return itN; -} - -//creates a row for a table with two collums -function tableRow(nameX, valueX) { - var htmlCode = ""; - htmlCode += "<tr><td align=\"left\">" + nameX + "</td><td align=\"right\">" + valueX + "</td></tr>"; - return htmlCode; -} - -//Shortens a string to be shorter than 30 letters. -//If the string is an URL it shortens it in a way that "looks nice" -function shortenString(s) { - var lastLength = s.length; - do { - lastLength = s.length; - s = s.substring(s.indexOf("/")+1, s.length); - } while (s.indexOf("/") != -1 && s.length > 30 && lastLength != s.length) - //make sure that name does not contain a < (because of html) - if (s.charAt(0) == "<") { - s = s.replace("<", "<"); - s = s.replace(">", ">"); - } - - if (s.length > 30) { - s = "..." + s.substring(s.length-30, s.length); - } - return s; -} \ No newline at end of file + var prop = node.costs[i]; + phtml += tableRow((prop.name == undefined ? '(unknown)' : prop.name),(prop.value == undefined ? "(none)" : prop.value)); + } + } else { + phtml += tableRow("Cost Estimates", "None"); + } + phtml += "</table></div>"; + + phtml += "</div></div>"; + $("#propertyCanvas").append(phtml); + +} + +//searches in the global JSONData for the node with the given id +function searchForNode(nodeID) { + for (var i in JSONData.nodes) { + var el = JSONData.nodes[i]; + if (el.id == nodeID) { + return el; + } + //look for nodes that are in iterations + if (el.step_function != null) { + for (var j in el.step_function) { + if (el.step_function[j].id == nodeID) { + return el.step_function[j]; + } + } + } + } +} + +//searches for all nodes in the global JSONData, that are iterations +function searchForIterationNodes() { + var itN = new Array(); + for (var i in JSONData.nodes) { + var el = JSONData.nodes[i]; + if (el.step_function != null) { + itN.push(el); + } + } + return itN; +} + +//creates a row for a table with two collums +function tableRow(nameX, valueX) { + var htmlCode = ""; + htmlCode += "<tr><td align=\"left\">" + nameX + "</td><td align=\"right\">" + valueX + "</td></tr>"; + return htmlCode; +} + +//Shortens a string to be shorter than 30 letters. +//If the string is an URL it shortens it in a way that "looks nice" +function shortenString(s) { + var lastLength = s.length; + do { + lastLength = s.length; + s = s.substring(s.indexOf("/")+1, s.length); + } while (s.indexOf("/") != -1 && s.length > 30 && lastLength != s.length) + //make sure that name does not contain a < (because of html) + if (s.charAt(0) == "<") { + s = s.replace("<", "<"); + s = s.replace(">", ">"); + } + + if (s.length > 30) { + s = "..." + s.substring(s.length-30, s.length); + } + return s; +} http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/flink-clients/resources/web-docs/js/program.js ---------------------------------------------------------------------- diff --git a/flink-clients/resources/web-docs/js/program.js b/flink-clients/resources/web-docs/js/program.js index b018d67..bbd9e7b 100644 --- a/flink-clients/resources/web-docs/js/program.js +++ b/flink-clients/resources/web-docs/js/program.js @@ -1,3 +1,21 @@ +/*! + * 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. + */ + var maxColumnWidth = 200; var minColumnWidth = 100; @@ -8,7 +26,7 @@ var pactPlanRequested = 0; * This function toggels the child checkbox on and of, depending on the parent's state */ function toggleShowPlanBox(box) -{ +{ console.log("toggleShowPlanBox"); var child = $('#suspendJobDuringPlanCheck'); @@ -24,7 +42,7 @@ function toggleShowPlanBox(box) * Shows an error message below the upload field. */ function showUploadError(message) -{ +{ console.log("showUploadError"); $('#upload_error_text').fadeOut("fast", function () { $('#upload_error_text')[0].innerHTML = "" + message; $('#upload_error_text').fadeIn("slow"); } ); @@ -34,7 +52,7 @@ function showUploadError(message) * Checks the selected file and triggers an upload, if all is correct. */ function processUpload() -{ +{ console.log("processUpload"); var filename = $('#upload_file_input').val(); @@ -56,7 +74,7 @@ function processUpload() * Upon deselection, it clears the pact plan. */ function toggleCheckboxes(box) -{ +{ console.log("toggleCheckboxes"); if (box.is(':checked')) { @@ -85,8 +103,8 @@ function toggleCheckboxes(box) * Function that takes the returned plan and draws it. */ function showPreviewPlan(data) -{ - console.log("showPreviewPlan"); +{ + console.log("showPreviewPlan"); //TODO check again the stuff below // // check whether this one is still selected // var active = $('.jobItemCheckbox:checked'); @@ -99,11 +117,11 @@ function showPreviewPlan(data) // // if(data.description != undefined) { // $('#planDescription').html(data.description); -// } - - $("#mainCanvas").empty(); - var svgElement = "<div id=\"attach\"><svg id=\"svg-main\" width=500 height=500><g transform=\"translate(20, 20)\"/></svg></div>"; - $("#mainCanvas").append(svgElement); +// } + + $("#mainCanvas").empty(); + var svgElement = "<div id=\"attach\"><svg id=\"svg-main\" width=500 height=500><g transform=\"translate(20, 20)\"/></svg></div>"; + $("#mainCanvas").append(svgElement); drawGraph(data.plan, "#svg-main"); pactPlanRequested = 0; // } @@ -113,7 +131,7 @@ function showPreviewPlan(data) * Asynchronously loads the jobs and creates a list of them. */ function loadJobList() -{ +{ console.log("loadJobList"); $.get("jobs", { action: "list" }, createJobList); } @@ -122,7 +140,7 @@ function loadJobList() * Triggers an AJAX request to delete a job. */ function deleteJob(id) -{ +{ console.log("deleteJob"); var name = id.substr(4); $.get("jobs", { action: "delete", filename: name }, loadJobList); @@ -132,7 +150,7 @@ function deleteJob(id) * Creates and lists the returned jobs. */ function createJobList(data) -{ +{ console.log("createJobList "); var markup = ""; @@ -185,7 +203,7 @@ function createJobList(data) * Function that checks and launches a pact job. */ function runJob () -{ +{ console.log("runJob"); var job = $('.jobItemCheckbox:checked'); if (job.length == 0) { @@ -208,8 +226,8 @@ function runJob () * Document initialization. */ $(document).ready(function () -{ - console.log("Document ready"); +{ + console.log("Document ready"); // hide the error text sections $('#upload_error_text').fadeOut("fast"); $('#run_error_text').fadeOut("fast"); @@ -226,4 +244,4 @@ $(document).ready(function () // start the ajax load of the jobs loadJobList(); -}); \ No newline at end of file +}); http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/flink-dist/src/main/flink-bin/LICENSE ---------------------------------------------------------------------- diff --git a/flink-dist/src/main/flink-bin/LICENSE b/flink-dist/src/main/flink-bin/LICENSE index 15caf5a..3604605 100644 --- a/flink-dist/src/main/flink-bin/LICENSE +++ b/flink-dist/src/main/flink-bin/LICENSE @@ -268,6 +268,7 @@ under the The MIT License - Flot 0.8.1 (http://www.flotcharts.org) - Copyright (c) 2007-2013 IOLA and Ole Laursen - Bootstrap (http://getbootstrap.com) - Copyright (c) 2011-2014 Twitter, Inc - Font Awesome - Code (http://fortawesome.github.io/Font-Awesome/) - Copyright (c) 2014 Dave Gandy + - D3 dagre renderer (https://github.com/cpettitt/dagre-d3) - Copyright (c) 2012-2013 Chris Pettitt All rights reserved. @@ -310,6 +311,10 @@ under BSD-style licenses - Scala Compiler Reflect (BSD-like) - (http://www.scala-lang.org/) - Copyright (c) 2002-2014 EPFL, Copyright (c) 2011-2014 Typesafe, Inc. - ASM (BSD-like) - (http://asm.ow2.org/) - Copyright (c) 2000-2011 INRIA, France Telecom +(3-clause BSD license) + - D3 (http://d3js.org/) - Copyright (c) 2010-2014, Michael Bostock + + (Below is the 3-clause BSD license) All rights reserved. http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/61bb30b8/flink-runtime/resources/web-docs-infoserver/css/timeline.css ---------------------------------------------------------------------- diff --git a/flink-runtime/resources/web-docs-infoserver/css/timeline.css b/flink-runtime/resources/web-docs-infoserver/css/timeline.css index fd29491..e2ae53f 100644 --- a/flink-runtime/resources/web-docs-infoserver/css/timeline.css +++ b/flink-runtime/resources/web-docs-infoserver/css/timeline.css @@ -1,3 +1,21 @@ +/*! + * 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. + */ + div.timeline-frame { border: 1px solid #BEBEBE; overflow: hidden;
