提交 7a5dde76 编写于 作者: S Stephan Ewen

[hotfix] Remove remaining unused files from the old standalone web client

上级 5e769b38
......@@ -181,7 +181,7 @@ under the License.
</goals>
</pluginExecutionFilter>
<action>
<ignore></ignore>
<ignore/>
</action>
</pluginExecution>
<pluginExecution>
......
/*!
* 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;
}
svg {
border: 0px solid #999;
overflow: hidden;
}
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #999;
stroke-width: 0px;
fill: #fff;
}
.edgeLabel rect {
fill: #fff;
}
.edgePath path {
stroke: #333;
stroke-width: 3px;
fill: none;
}
/*!
* 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;
margin: 0px;
}
html, body
{
height: 100%;
position: relative;
overflow: auto;
}
h1
{
font-family: verdana;
font-size: 36px;
font-weight: normal;
font-decoration: none;
font-style: normal;
font-variant: small-caps;
}
h1 img {
vertical-align: middle;
margin-right: 50px;
}
h3
{
font-family: verdana;
font-size: 20px;
font-weight: normal;
font-decoration: none;
font-style: italic;
font-variant: normal;
text-align: center;
color: #666666;
margin: 10px 10px 20px 10px;
}
h4
{
font-family: Verdana;
font-size: 16px;
font-weight: normal;
font-decoration: none;
font-style: italic;
font-variant: normal;
text-align: left;
color: #000000;
margin: 5px 5px 10px 5px;
padding: 2px 2px 5px 2px;
border-bottom: 1px dashed #444444;
}
input
{
font-family: verdana, Sans-Serif;
font-size: 13px;
border: solid 1.5px #333333;
background-color: #eeeeee;
color: #333333;
padding: 5px;
margin: 5px;
}
.fadedPropertiesText
{
font-family: verdana;
font-size: 18px;
color: #AAAAAA;
font-style: italic;
}
.mainHeading
{
border: 1px solid #262A37;
margin: 5px;
text-align: left;
background-color: white;
background-repeat: no-repeat;
background-position: right;
height: 100px;
overflow: hidden;
}
.boxed
{
border: 1px solid #262A37;
margin: 5px;
}
.spaced
{
margin: 5px;
}
.footer
{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
}
.error_text
{
font-family: verdana;
font-size: 14px;
font-weight: normal;
font-decoration: none;
font-style: italic;
font-variant: normal;
text-align: center;
color: #DF0101;
}
.translucent
{
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
}
.formLabel
{
font-family: verdana;
font-size: 14px;
font-weight: normal;
font-decoration: none;
font-style: normal;
font-variant: normal;
text-align: right;
color: #000000;
}
.jobListItem
{
border: 1px dashed #262A37;
height: 30px;
word-wrap: break-word;
font-family: verdana;
font-size: 14px;
font-variant: normal;
font-decoration: none;
margin: 10px;
padding: 10px;
}
.jobListItemName
{
text-align: left;
font-weight: bold;
font-style: normal;
}
.jobListItemDate
{
text-align: right;
font-weight: normal;
font-style: italic;
margin-right: 10px;
}
.layoutTable
{
border: none;
margin: 0px;
padding: 0px;
}
/*!
* 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 */
display:none;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:750px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(../img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
/*!
* 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;
}
.connector_feedback
{
background-color: #336699;
padding: 3px;
}
.connector
{
background-color: #FF9900;
padding: 1.5px;
}
.iteration-box
{
border: 3px dashed #262A37;
margin: 5px;
height: 350px;
overflow: visible;
}
.iteration-name-label
{
margin-top: -25px;
margin-left: 10px;
padding: 3px;
float: left;
border: 1px solid #262A37;
background-color: #FFFFFF;
font-family: verdana;
font-weight: normal;
font-style: italic;
font-size: 20px;
color: #000000;
}
.iteration-set-box
{
background-color: #DDDDDD;
border: 2px solid #000000;
position: absolute;
width: 50px;
height: 50px;
font-family: Arial;
font-weight: bold;
font-size: 16px;
color: #333333;
text-align: center;
line-height: 50px;
}
.iteration-set-box-left
{
left: -25px;
}
.iteration-set-box-right
{
right: -25px;
}
.middle-label {
background-color: #E0E8FF;
border: 1px solid #9DA3B3;
font-family: verdana;
font-size: 13px;
text-align: center;
padding: 5px;
border-radius: 5px;
margin-left: -50px;
width: 100px;
z-index: 2;
}
.source-label
{
background-color: #E0E8FF;
border: 1px solid #9DA3B3;
font-family: verdana;
font-size: 13px;
text-align: center;
padding: 5px;
border-radius: 5px;
margin-top: -10px;
margin-left: 5px;
z-index: 2;
}
div.canvas
{
background-color: white;
background-repeat: no-repeat;
background-position: top right;
padding: 0px;
margin-bottom: 10px;
}
div.propertyCanvas
{
background-color: white;
background-repeat: no-repeat;
background-position: top right;
border-top: 1px solid #262A37;
border-right: 1px solid #262A37;
margin: 5px;
padding: 10px;
min-height: 250px;
overflow: auto;
}
span.shippingStrategy
{
font-weight: normal;
font-style: normal;
}
span.localStrategy
{
font-weight: normal;
font-style: italic;
}
span.cacheStrategy
{
font-weight: bold;
font-style: normal;
}
.datasource, .datasink, .pact
{
border: 1px solid #9DA3B3;
padding: 3px;
margin: 0px;
}
.datasource, .datasink
{
background-color: #F7BE81;
width: 80px;
height: 60px;
border-radius: 20px;
}
.sourceSinkContents
{
font-family: verdana;
font-size: 14px;
word-wrap: break-word;
text-align: center;
margin-top: 18px;
margin-bottom: 23px;
margin-left: 5px;
margin-right: 5px;
}
.pact
{
width: 120px;
height: 90px;
background-color: #A9F5A9;
border-radius: 5px;
}
.pactTypeBox
{
background-color: #E0E8FF;
border: 1px solid #9DA3B3;
padding: 2px;
color: #33333F;
font-family: verdana;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.pactContents
{
font-family: verdana;
font-size: 16px;
text-align:center;
vertical-align: middle;
padding: 3px;
margin-top: 5px;
margin-bottom: 15px;
word-wrap: break-word;
}
.propertiesTable
{
border: none;
margin: 2px;
padding: 2px;
width: 100%;
background-color: #E0E8FF;
font-family: verdana;
font-size: 16px;
font-weight: normal;
}
.propertiesNameCell
{
margin: 5px;
padding: 3px;
background-color: #FFFFFF;
font-style: normal;
text-align: right;
}
.propertiesValueCell
{
margin: 5px;
padding: 3px;
background-color: #FFFFFF;
font-style: italic;
text-align: left;
}
p.propItem
{
font-family: Arial;
font-size: 16px;
font-style: normal;
margin: 3px;
padding: 3px 10px 3px 5px;
border: none;
border-bottom: 1px solid #444444;
}
span.propLabel
{
font-weight: bold;
font-style: normal;
}
span.propValue
{
font-weight: normal;
font-style: italic;
word-wrap: break-word;
}
div.propertyCanvasSection
{
float: left;
min-width: 280px;
max-width: 350px;
min-height: 180px;
border-left: 1px solid #444444;
border-top: 1px solid #444444;
padding: 5px;
margin: 0px;
}
<!--
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>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta HTTP-EQUIV="REFRESH" content="0; url=launch.html">
</head>
<body>
<p>You are being redirected...</p>
<p>Click <a href="launch.html">here</a> if nothing happens.</p>
</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.
*/
/*
* Document initialization.
*/
$(document).ready(function ()
{
zoom = d3.behavior.zoom("#svg-main").on("zoom", function() {
var ev = d3.event;
d3.select("#svg-main g")
.attr("transform", "translate(" + ev.translate + ") scale(" + ev.scale + ")");
});
zoom.scaleExtent([0.3, 3])
});
//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();
//The zoom element
var zoom;
//informations about the enviroment
var svgWidth;
var svgHeight;
//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 of iterations and their sizes + Ids to 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");
var svgElement = d3.select(selector);
layout = renderer.layout(layout).run(g, svgElement);
svgHeight = layout._value.height;
svgWidth = layout._value.width;
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(zoom);
// 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 current graph -> no edges to nodes which are outside of current iterations!
var existingNodes = new Array;
var g = new dagreD3.Digraph();
//Find out whether we are in an iteration or in the normal json
//Bulk variables
var partialSolution;
var nextPartialSolution;
//Workset variables
var workset;
var nextWorkset;
var solutionSet;
var solutionDelta;
if (data.nodes != null) {
//This is the normal json data
var toIterate = data.nodes;
} else {
//This is an iteration, we now store special iteration nodes if possible
var toIterate = data.step_function;
partialSolution = data.partial_solution;
nextPartialSolution = data.next_partial_solution;
workset = data.workset;
nextWorkset = data.next_workset;
solutionSet = data.solution_set;
solutionDelta = data.solution_delta;
}
for (var i in toIterate) {
var el = toIterate[i];
//create node, send additional informations about the node if it is a special one
if (el.id == partialSolution) {
g.addNode(el.id, { label: createLabelNode(el, "partialSolution"), nodesWithoutEdges: ""} );
} else if (el.id == nextPartialSolution) {
g.addNode(el.id, { label: createLabelNode(el, "nextPartialSolution"), nodesWithoutEdges: ""} );
} else if (el.id == workset) {
g.addNode(el.id, { label: createLabelNode(el, "workset"), nodesWithoutEdges: ""} );
} else if (el.id == nextWorkset) {
g.addNode(el.id, { label: createLabelNode(el, "nextWorkset"), nodesWithoutEdges: ""} );
} else if (el.id == solutionSet) {
g.addNode(el.id, { label: createLabelNode(el, "solutionSet"), nodesWithoutEdges: ""} );
} else if (el.id == solutionDelta) {
g.addNode(el.id, { label: createLabelNode(el, "solutionDelta"), nodesWithoutEdges: ""} );
} else {
g.addNode(el.id, { label: createLabelNode(el, ""), nodesWithoutEdges: ""} );
}
existingNodes.push(el.id);
//create edgdes from predecessors to current node
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 {
var missingNode = searchForNode(el.predecessors[j].id);
if (missingNode.alreadyAdded != true) {
missingNode.alreadyAdded = true;
g.addNode(missingNode.id, {label: createLabelNode(missingNode, "mirror")});
g.addEdge(null, missingNode.id, el.id, { label: createLabelEdge(missingNode) });
}
}
}
}
}
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.temp_mode != undefined) {
labelValue += " (" + el.temp_mode + ")";
}
if (el.local_strategy != undefined) {
labelValue += ",<br>" + el.local_strategy;
}
labelValue += "</div>";
}
return labelValue;
}
//creates the label of a node, in info is stored, whether it is a special node (like a mirror in an iteration)
function createLabelNode(el, info) {
// if (info != "") {
// console.log("The node " + el.id + " is a " + info);
// }
//true, if the node is a special node from an iteration
var specialIterationNode = (info == "partialSolution" || info == "nextPartialSolution" || info == "workset" || info == "nextWorkset" || info == "solutionSet" || info == "solutionDelta" );
var labelValue = "<div style=\"margin-top: 0\">";
//set color of panel
if (info == "mirror") {
labelValue += "<div style=\"border-color:#a8a8a8; border-width:4px; border-style:solid\">";
} else if (specialIterationNode) {
labelValue += "<div style=\"border-color:#CD3333; border-width:4px; border-style:solid\">";
} else {
//there is no info value, set normal color
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
if (info == "mirror") {
labelValue += "<div><a nodeID=\""+el.id+"\" href=\"#\" rel=\"#propertyO\"><h3 style=\"text-align: center; "
+ "font-size: 150%\">Mirror of " + el.pact + " (ID = "+el.id+")</h3></a>";
} else {
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 an "iteration" we need a different panel-body
if (el.step_function != null) {
labelValue += extendLabelNodeForIteration(el.id);
} else {
//Otherwise add infos
if (specialIterationNode) {
labelValue += "<h5 style=\"font-size:115%; text-align: center; color:#CD3333\">" + info + " Node</h5>";
}
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";
}
}
//close divs
labelValue += "</div></div>";
return labelValue;
}
//Extends the label of a node with an additional svg Element to present the 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 overlay
function showProperties(nodeID) {
$("#propertyCanvas").empty();
node = searchForNode(nodeID);
var phtml = "<div style='overflow-y: scroll; max-height:490px; overflow-x:hidden'><h3>Properties of "+ shortenString(node.contents) + " - ID = " + nodeID + "</h3>";
phtml += "<div class=\"row\">";
phtml += "<div class=\"col-sm-12\"><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-sm-12\"><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-sm-12\"><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-sm-12\"><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-sm-12\"><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;
}
//Split a string into multiple lines so that each line has less than 30 letters.
function shortenString(s) {
//make sure that name does not contain a < (because of html)
if (s.charAt(0) == "<") {
s = s.replace("<", "&lt;");
s = s.replace(">", "&gt;");
}
sbr = ""
while (s.length > 30) {
sbr = sbr + s.substring(0, 30) + "<br>"
s = s.substring(30, s.length)
}
sbr = sbr + s
return sbr;
}
//activates the zoom buttons
function activateZoomButtons() {
$("#zoomIn").click(function() {
console.log("Clicked zoom in");
if (zoom.scale() < 2.99) {
var svg = d3.select("#svg-main");
//Calculate and store new values in zoom object
var translate = zoom.translate();
var v1 = translate[0] * (zoom.scale() + 0.1 / (zoom.scale()));
var v2 = translate[1] * (zoom.scale() + 0.1 / (zoom.scale()));
zoom.scale(zoom.scale() + 0.1);
zoom.translate([v1, v2]);
//Transform svg
svg.select("#svg-main g")
.attr("transform", "translate(" + v1 + ","+ v2 + ") scale(" + zoom.scale() + ")");
}
});
$("#zoomOut").click(function() {
if (zoom.scale() > 0.31) {
var svg = d3.select("#svg-main");
//Calculate and store new values in zoom object
zoom.scale(zoom.scale() - 0.1);
var translate = zoom.translate();
var v1 = translate[0] * (zoom.scale() - 0.1 / (zoom.scale()));
var v2 = translate[1] * (zoom.scale() - 0.1 / (zoom.scale()));
zoom.translate([v1, v2]);
//Transform svg
svg.select("#svg-main g")
.attr("transform", "translate(" + v1 + ","+ v2 + ") scale(" + zoom.scale() + ")");
}
});
}
/*!
* 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;
// global variable for the currently requested plan
var pactPlanRequested = 0;
/*
* This function toggels the child checkbox on and of, depending on the parent's state
*/
function toggleShowPlanBox(box)
{
var child = $('#suspendJobDuringPlanCheck');
if (box.is(':checked')) {
child.attr('disabled', false);
}
else {
child.attr('disabled', true);
}
}
/*
* Shows an error message below the upload field.
*/
function showUploadError(message)
{
$('#upload_error_text').fadeOut("fast", function () { $('#upload_error_text')[0].innerHTML = "" + message;
$('#upload_error_text').fadeIn("slow"); } );
}
/*
* Checks the selected file and triggers an upload, if all is correct.
*/
function processUpload()
{
var filename = $('#upload_file_input').val();
var len = filename.length;
if (len == 0) {
showUploadError("Please select a file.");
}
else if (len > 4 && filename.substr(len - 4, len) == ".jar") {
$('#upload_form')[0].submit();
}
else {
showUploadError("Please select a .jar file.");
}
}
/*
* This function makes sure only one checkbox is selected.
* Upon selection it initializes the drawing of the pact plan.
* Upon deselection, it clears the pact plan.
*/
function toggleCheckboxes(box)
{
if (box.is(':checked')) {
$('.jobItemCheckbox').attr('checked', false);
box.attr('checked', true);
var id = box.parentsUntil('.JobListItems').parent().attr('id').substr(4);
var assemblerClass = box.attr('id');
$('#mainCanvas').html('');
pactPlanRequested = id;
$.ajax({
type: "GET",
url: "pactPlan",
data: { job: id, assemblerClass: assemblerClass},
success: function(response) { showPreviewPlan(response); }
});
}
else {
$('#mainCanvas').html('');
}
}
/*
* Function that takes the returned plan and draws it.
*/
function showPreviewPlan(data)
{
$("#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;
//activate zoom buttons
activateZoomButtons();
// }
}
/*
* Asynchronously loads the jobs and creates a list of them.
*/
function loadJobList()
{
$.get("jobs", { action: "list" }, createJobList);
}
/*
* Triggers an AJAX request to delete a job.
*/
function deleteJob(id)
{
var name = id.substr(4);
$.get("jobs", { action: "delete", filename: name }, loadJobList);
}
/*
* Creates and lists the returned jobs.
*/
function createJobList(data)
{
var markup = "";
var lines = data.split("\n");
for (var i = 0; i < lines.length; i++)
{
if (lines[i] == null || lines[i].length == 0) {
continue;
}
var date = "unknown date";
var assemblerClass = "<em>no entry class specified</em>";
var tokens = lines[i].split("\t");
var name = tokens[0];
if (tokens.length > 1) {
date = tokens[1];
if (tokens.length > 2) {
assemblerClass = tokens[2];
}
}
var entries = assemblerClass.split("#");
var classes = entries[0].split(",");
markup += '<div id="job_' + name + '" class="JobListItems"><table class="table"><tr>';
markup += '<td colspan="2"><p class="JobListItemsName">' + name + '</p></td>';
markup += '<td><p class="JobListItemsDate">' + date + '</p></td>';
markup += '<td width="30px"><img class="jobItemDeleteIcon" src="img/delete-icon.png" width="24" height="24" /></td></tr>';
var j = 0;
for (var idx in classes) {
markup += '<tr><td width="30px;"><input id="' + classes[idx] + '" class="jobItemCheckbox" type="checkbox"></td>';
markup += '<td colspan="3"><p class="JobListItemsDate" title="' + entries[++j] + '">' + classes[idx] + '</p></td></tr>';
}
markup += '</table></div>';
}
// add the contents
$('#jobsContents').html(markup);
// register the event handler that triggers the delete when the delete icon is clicked
$('.jobItemDeleteIcon').click(function () { deleteJob($(this).parentsUntil('.JobListItems').parent().attr('id')); } );
// register the event handler, that ensures only one checkbox is active
$('.jobItemCheckbox').change(function () { toggleCheckboxes($(this)) });
}
/*
* Function that checks and launches a pact job.
*/
function runJob ()
{
var job = $('.jobItemCheckbox:checked');
if (job.length == 0) {
$('#run_error_text').fadeOut("fast", function () { $('#run_error_text')[0].innerHTML = "Select a job to run.";
$('#run_error_text').fadeIn("slow"); } );
return;
}
var jobName = job.parentsUntil('.JobListItems').parent().attr('id').substr(4);
var assemblerClass = job.attr('id');
var showPlan = $('#showPlanCheck').is(':checked');
var suspendPlan = $('#suspendJobDuringPlanCheck').is(':checked');
var options = $('#commandLineOptionsField').attr('value'); //TODO? Replace with .val() ?
var args = $('#commandLineArgsField').attr('value'); //TODO? Replace with .val() ?
var url;
if (assemblerClass == "<em>no entry class specified</em>") {
url = "runJob?" + $.param({ action: "submit", options: options, job: jobName, arguments: args, show_plan: showPlan, suspend: suspendPlan});
} else {
url = "runJob?" + $.param({ action: "submit", options: options, job: jobName, assemblerClass: assemblerClass, arguments: args, show_plan: showPlan, suspend: suspendPlan});
}
window.location = url;
}
/*
* Document initialization.
*/
$(document).ready(function ()
{
// hide the error text sections
$('#upload_error_text').fadeOut("fast");
$('#run_error_text').fadeOut("fast");
// register the event listener that keeps the hidden file form and the text fied in sync
$('#upload_file_input').change(function () { $('#upload_file_name_text').val($(this).val()) } );
// register the event handler for the upload button
$('#upload_submit_button').click(processUpload);
$('#run_button').click(runJob);
// register the event handler that (in)activates the plan display checkbox
$('#showPlanCheck').change(function () { toggleShowPlanBox ($(this)); });
// start the ajax load of the jobs
loadJobList();
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
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>
<title>Flink Query Interface</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/nephelefrontend.css" />
<link rel="stylesheet" type="text/css" href="css/pactgraphs.css" />
<link rel="stylesheet" type="text/css" href="css/graph.css" />
<link rel="stylesheet" type="text/css" href="css/overlay.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <!-- Changed Stuff -->
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/graphCreator.js"></script>
<script type="text/javascript" src="js/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="js/dagre-d3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/program.js"></script>
</head>
<body>
<div class="mainHeading" style="min-width: 1225px;">
<h1 style="margin-top:0"><img src="img/flink-logo.png" width="100" height="100" alt="Flink Logo" />Flink Web Submission Client
<div style="position:absolute; top:40px; right:110px;">
<button id="zoomIn" type="button" class="btn btn-default">Zoom In</button>
<button id="zoomOut" type="button" class="btn btn-default">Zoom Out</button>
</div>
</h1>
</div>
<!-- the main panel with the jobs list and the preview pane -->
<div style="position: absolute; top: 110px; bottom: 210px; left: 0px; right: 0px; min-width: 1225px;">
<div id="jobsContents" class="boxed" style="position: absolute; top: 0px; bottom: 0px; left: 0px; width: 450px; overflow: auto;"></div>
<div class="boxed" style="position: absolute; top: 0px; bottom: 0px; left: 460px; right: 0px; overflow: auto;">
<div id="mainCanvas" class="canvas" style="position: relative; height: 100%"></div>
</div>
</div>
<!-- the footer containing the box with the run properties and the box with the upload field -->
<div class="footer" style="min-width: 1225px;">
<div class="boxed" style="float: left; width: 700px; height: 200px; position: relative;">
<h3>Select program...</h3>
<div style="margin-top: 30px;">
<div style="text-align: right;">
<span class="formLabel">Flink Options:</span>
<input id="commandLineOptionsField" type="text" name="commandLineOptions" style="width: 520px;"/>
</div>
<div style="text-align: right; margin-top: 5px;">
<span class="formLabel">Program Arguments:</span>
<input id="commandLineArgsField" type="text" name="commandLineArguments" style="width: 520px;"/>
</div>
<div class="spaced" style="margin-left: 20px;">
<input type="checkbox" id="showPlanCheck" checked="checked"><span class="formLabel">Show optimizer plan</span>
<div id="suspendOption"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><input type="checkbox" id="suspendJobDuringPlanCheck" checked="checked"><span class="formLabel">Suspend execution while showing plan</span></div>
</div>
</div>
<div class="footer" style="text-align: right;">
<span id="run_error_text" class="error_text"></span>
<input id="run_button" type="button" value="Run Job" style="width: 75px; margin-left: 100px;"/>
</div>
</div>
<div class="boxed" style="float: left; width: 500px; height: 150px; position: relative;">
<h3>Select a new program to upload...</h3>
<form id="upload_form" action="jobs" enctype="multipart/form-data" method="POST">
<div style="position: relative; margin-top: 30px;">
<input id="upload_file_name_text" type="text" name="file_name" disabled="disabled" style="position: absolute; top: 0px; right: 85px; width: 380px; z-index: 3;"/>
<input type="button" value="Browse" style="width: 75px; position: absolute; right: 0px; top: 0px; z-index: 1;" />
<input id="upload_file_input" class="translucent" type="file" name="upload_jar_file" style="position: absolute; right: 0px; top: 0px; height: 30px; width=75px; z-index: 2;" />
</div>
</form>
<div class="footer" style="text-align: right;">
<span id="upload_error_text" class="error_text"></span>
<input id="upload_submit_button" type="button" value="Upload" style="width: 75px; margin-left: 100px;"/>
</div>
</div>
</div>
<!-- the overlay -->
<div class="simple_overlay" id="propertyO">
<div id="propertyCanvas" class="propertyCanvas">
</div>
</div>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册