flink-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From rmetz...@apache.org
Subject [02/15] New Webclient
Date Wed, 18 Jun 2014 12:00:22 GMT
http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/e57b1069/stratosphere-clients/resources/web-docs/launch.html
----------------------------------------------------------------------
diff --git a/stratosphere-clients/resources/web-docs/launch.html b/stratosphere-clients/resources/web-docs/launch.html
index da568fa..d393a78 100755
--- a/stratosphere-clients/resources/web-docs/launch.html
+++ b/stratosphere-clients/resources/web-docs/launch.html
@@ -7,236 +7,26 @@
 
   <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/js-graph-it.css">
-  <link rel="stylesheet" type="text/css" href="css/pactgraphs_small.css">
-
-  <script type="text/javascript" src="js/jquery.js"></script>
-  <script type="text/javascript" src="js/js-graph-it.js"></script>
-  <script type="text/javascript" src="js/pactgraph.js"></script>
-
-  <script type="text/javascript">
-    <!--
-      var maxColumnWidth = 200;
-      var minColumnWidth = 100;
-
-      // global variable for the currently requested plan
-      var pactPlanRequested = 0;
+  <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>
   
-      /*
-       * 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').attr('value');
-        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('.jobListItem').parent().attr('id').substr(4);
-
-          $('#mainCanvas').html('');
-          $('#planDescription').html('');
-          pactPlanRequested = id;
-
-          $.ajax({
-              type: "GET",
-              url: "pactPlan",
-              data: { job: id },
-              success: function(response) { showPreviewPlan(response); }
-          });
-        }
-        else {
-          $('#mainCanvas').html('');
-          $('#planplanDescription').html('');
-        }
-      }
-      
-      /*
-       * Function that takes the returned plan and draws it.
-       */
-      function showPreviewPlan(data)
-      {
-        // check whether this one is still selected
-        var active = $('.jobItemCheckbox:checked');
-        var id = active.parentsUntil('.jobListItem').parent().attr('id').substr(4);
-        
-        if (pactPlanRequested == id) {
-          if (data == undefined || data.jobname == undefined || data.jobname != pactPlanRequested
|| data.plan == undefined) {
-            pactPlanRequested = 0;
-          }
-
-		  if(data.description != undefined) {
-		  	$('#planDescription').html(data.description);
-		  }
-          drawPactPlan(data.plan, false, "arr2.gif");
-          pactPlanRequested = 0;
-        }
-      }
-
-      /*
-       * 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 name = null;
-          var date = null;
-          var tabIx = lines[i].indexOf("\t");
-
-          if (tabIx > 0) {
-            name = lines[i].substr(0, tabIx);
-            if (tabIx < lines[i].length - 1) {
-              date = lines[i].substr(tabIx + 1);
-            }
-            else {
-              date = "unknown date";
-            }
-          }
-          else {
-            name = lines[i];
-            date = "unknown date";
-          }
-          
-          
-          markup += '<div id="job_' + name + '" class="jobListItem"><table class="layoutTable"
width="100%"><tr>';
-          markup += '<td width="30px;"><input class="jobItemCheckbox" type="checkbox"></td>';
-          markup += '<td><p class="jobListItemName">' + name + '</p></td>';
-          markup += '<td><p class="jobListItemDate">' + date + '</p></td>';
-          markup += '<td width="30px"><img class="jobItemDeleteIcon" src="img/delete-icon.png"
width="24" height="24" /></td>';
-          markup += '</tr></table></div>';
-        }
-        
-        // add the contents
-        $('#jobsContents').attr('innerHTML', markup);
-        
-        // register the event handler that triggers the delete when the delete icon is clicked
-        $('.jobItemDeleteIcon').click(function () { deleteJob($(this).parentsUntil('.jobListItem').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('.jobListItem').parent().attr('id').substr(4);
-         var showPlan = $('#showPlanCheck').is(':checked');
-         var suspendPlan = $('#suspendJobDuringPlanCheck').is(':checked');
-         var args = $('#commandLineArgsField').attr('value');
-         
-         var url = "runJob?" + $.param({ action: "submit", job: jobName, 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').attr('value',
$(this).attr('value')) } );
-        
-        // 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();
-      });
-      
-    //-->
-  </script>
 </head>
 
 <body>
     <div class="mainHeading" style="min-width: 1225px;">
-      <h1><img src="img/StratosphereLogo.png" width="326" height="100" alt="Stratosphere
Logo" />Stratosphere Query Interface</h1>
+      <h1 style="margin-top:0"><img src="img/StratosphereLogo.png" width="326" height="100"
alt="Stratosphere Logo" />Stratosphere Query Interface</h1>
     </div>
 
     <!-- the main panel with the jobs list and the preview pane -->
@@ -278,14 +68,20 @@
              <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>
-          <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>
         </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>
+    </div>
+    
+    <!-- the overlay -->
+    <div class="simple_overlay" id="propertyO">
+	  <div id="propertyCanvas" class="propertyCanvas">
+	  </div>
+	</div>
 </body>
 </html>

http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/e57b1069/stratosphere-clients/src/main/java/eu/stratosphere/client/web/GUIServletStub.java
----------------------------------------------------------------------
diff --git a/stratosphere-clients/src/main/java/eu/stratosphere/client/web/GUIServletStub.java
b/stratosphere-clients/src/main/java/eu/stratosphere/client/web/GUIServletStub.java
index 24e5d80..07e2d97 100644
--- a/stratosphere-clients/src/main/java/eu/stratosphere/client/web/GUIServletStub.java
+++ b/stratosphere-clients/src/main/java/eu/stratosphere/client/web/GUIServletStub.java
@@ -118,7 +118,6 @@ public abstract class GUIServletStub extends HttpServlet {
 		}
 
 		// print all the included javascript files
-		writer.println("  <script type=\"text/javascript\" src=\"js/jquery.js\"></script>");
 
 		for (int i = 0; i < jsFiles.size(); i++) {
 			writer.print("  <script type=\"text/javascript\" src=\"");
@@ -132,7 +131,7 @@ public abstract class GUIServletStub extends HttpServlet {
 		writer.println("<body>");
 		writer.println("  <div class=\"mainHeading\">");
 		writer
-			.println("    <h1><img src=\"img/StratosphereLogo.png\" width=\"326\" height=\"100\"
alt=\"Stratosphere Logo\" align=\"middle\"/>Stratosphere Query Interface</h1>");
+			.println("    <h1 style=\"margin-top:0\"><img src=\"img/StratosphereLogo.png\"
width=\"326\" height=\"100\" alt=\"Stratosphere Logo\" align=\"middle\"/>Stratosphere Query
Interface</h1>");
 		writer.println("  </div>");
 
 		@SuppressWarnings("unchecked")

http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/e57b1069/stratosphere-clients/src/main/java/eu/stratosphere/client/web/PlanDisplayServlet.java
----------------------------------------------------------------------
diff --git a/stratosphere-clients/src/main/java/eu/stratosphere/client/web/PlanDisplayServlet.java
b/stratosphere-clients/src/main/java/eu/stratosphere/client/web/PlanDisplayServlet.java
index ce56940..6108958 100644
--- a/stratosphere-clients/src/main/java/eu/stratosphere/client/web/PlanDisplayServlet.java
+++ b/stratosphere-clients/src/main/java/eu/stratosphere/client/web/PlanDisplayServlet.java
@@ -41,12 +41,19 @@ public class PlanDisplayServlet extends GUIServletStub {
 		
 		this.runtimeVisualizationPort = runtimePort;
 
-		addStyleSheet("css/js-graph-it.css");
-		addStyleSheet("css/pactgraphs.css");
+		addStyleSheet("css/nephelefrontend.css");
+		addStyleSheet("css/pactgraphs.css");
+		addStyleSheet("css/graph.css");
+		addStyleSheet("css/overlay.css");
+		addStyleSheet("css/bootstrap.css");
+
+		addJavascriptFile("js/jquery-2.1.0.js");
+		addJavascriptFile("js/graphCreator.js");
+		addJavascriptFile("js/d3.js");
+		addJavascriptFile("js/dagre-d3.js");
+		addJavascriptFile("js/bootstrap.min.js");
+		addJavascriptFile("js/jquery.tools.min.js");
 
-		addJavascriptFile("js/js-graph-it.js");
-		addJavascriptFile("js/progressbar.js");
-		addJavascriptFile("js/pactgraph.js");
 	}
 
 	@Override
@@ -80,9 +87,10 @@ public class PlanDisplayServlet extends GUIServletStub {
 
 		// write the canvas for the graph area
 		writer.println("    <div style=\"position: relative;\">\n"
-					+ "      <div id=\"mainCanvas\" class=\"canvas boxed\" style=\"height: 500px;\">\n"
-					+ "        <div align=\"center\" id=\"progressContainer\" style=\"margin: auto; margin-top:
200px;\"></div>\n"
-					+ "      </div>\n" + "      <div style=\"position: absolute; right: 20px; bottom:
20px;\">\n"
+					+ "      <div id=\"mainCanvas\" class=\"canvas boxed\">\n"
+					+ "      <div id=\"attach\"><svg id=\"svg-main\" width=500 height=500><g
transform=\"translate(20, 20)\"/></svg></div>"
+					+ "      </div>\n"
+					+ "      <div style=\"position: absolute; right: 20px; bottom: 20px;\">\n"
 					+ "        <input id=\"back_button\" type=\"button\" value=\"&lt; Back\"/>");
 		if (suspended) {
 			writer.println("        <input id=\"run_button\" type=\"button\" value=\"Continue &gt;\"/>");
@@ -90,8 +98,9 @@ public class PlanDisplayServlet extends GUIServletStub {
 		writer.println("      </div>\n" + "    </div>");
 
 		// write the canvas for the properties area
-		writer.println("    <div id=\"propertyCanvas\" class=\"propertyCanvas\">\n"
-			+ "      <p class=\"fadedPropertiesText\">Click a node to show the properties...</p>\n"
+ "    </div>");
+		writer.println("    <div class=\"simple_overlay\" id=\"propertyO\">"
+				+ "<div id=\"propertyCanvas\" class=\"propertyCanvas\"></div>\n"
+				+ "    </div>");
 
 		// write the page initialization code
 		writer.println("    <script type=\"text/javascript\">\n" + "    <!--\n" + "  
   var maxColumnWidth = 350;\n"
@@ -120,9 +129,11 @@ public class PlanDisplayServlet extends GUIServletStub {
 		// "          alert(str);\n" +
 		// "        });\n");
 
-		writer.println("        // use jquery to asynchronously load the pact plan description\n"
+		writer.println("        //change height of mainCanvas to maximum"
+				+ "        $(\"#mainCanvas\").css(\"height\", $(document).height() - 15 - 105);\n"
+				+ "        // use jquery to asynchronously load the pact plan description\n"
 			+ "        $.getJSON(\"ajax-plans/" + uid
-			+ ".json\", function(data) { drawPactPlan(data, true, \"arr.gif\"); });" + "      });\n"
+ "    //-->\n"
+			+ ".json\", function(data) { drawGraph(data, \"#svg-main\"); });" + "      });\n" + "
   //-->\n"
 			+ "    </script>");
 	}
 }

http://git-wip-us.apache.org/repos/asf/incubator-flink/blob/e57b1069/stratosphere-dist/src/main/stratosphere-bin/tools/planVisualizer.html
----------------------------------------------------------------------
diff --git a/stratosphere-dist/src/main/stratosphere-bin/tools/planVisualizer.html b/stratosphere-dist/src/main/stratosphere-bin/tools/planVisualizer.html
index 19eff74..0081235 100644
--- a/stratosphere-dist/src/main/stratosphere-bin/tools/planVisualizer.html
+++ b/stratosphere-dist/src/main/stratosphere-bin/tools/planVisualizer.html
@@ -17,42 +17,51 @@
   <title>Stratosphere Plan Visualizer</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/nephelefrontend.css"
/>
-  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/js-graph-it.css"
/>
   <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/pactgraphs.css"
/>
-  <script type="text/javascript" src="../resources/web-docs/js/jquery.js"></script>
-  <script type="text/javascript" src="../resources/web-docs/js/js-graph-it.js"></script>
-  <script type="text/javascript" src="../resources/web-docs/js/pactgraph.js"></script>
+  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/graph.css" />
+  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/overlay.css"
/>
+  <link rel="stylesheet" type="text/css" href="../resources/web-docs/css/bootstrap.css"
/> <!-- Changed stuff -->
+  <script type="text/javascript" src="../resources/web-docs/js/jquery-2.1.0.js"></script>
+  <script type="text/javascript" src="../resources/web-docs/js/graphCreator.js"></script>
+  <script type="text/javascript" src="../resources/web-docs/js/d3.js" charset="utf-8"></script>
+  <script type="text/javascript" src="../resources/web-docs/js/dagre-d3.js"></script>
+  <script type="text/javascript" src="../resources/web-docs/js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="../resources/web-docs/js/jquery.tools.min.js"></script>
+
 <body>
   <div class="mainHeading">
-    <h1><img src="../resources/web-docs/img/StratosphereLogo.png" width="326" height="100"
alt="Stratosphere Logo" align="middle"/>Stratosphere Plan Visualizer</h1>
+    <h1 style="margin-top:0"><img src="../resources/web-docs/img/StratosphereLogo.png"
width="326" height="100" alt="Stratosphere Logo" align="middle"/>Stratosphere Plan Visualizer</h1>
   </div>
     <div>
-      <div id="mainCanvas" class="canvas boxed" style="height: 500px;">
+      <div id="mainCanvas" class="canvas boxed">
         <div><h3>Paste the plan data here</h3></div>
         <div align="center"><textarea id="plantext" style="width: 600px; height:
400px;"></textarea></div>
         <div align="center"; style="float: bottom;"> 
           <input id="draw_button" type="button" value="Draw"/> 
-        </div> 
+        </div>
       </div>
     </div>
-    <div id="propertyCanvas" class="propertyCanvas">
-      <p class="fadedPropertiesText">Click a node to show the properties...</p>
-    </div>
+    <div class="simple_overlay" id="propertyO">
+	  <div id="propertyCanvas" class="propertyCanvas">
+	  </div>
+	</div>
     <script type="text/javascript">
-    <!--
-      var maxColumnWidth = 350;
-      var minColumnWidth = 150;
 
       $(document).ready(function() {
+		
+	  	//change height of mainCanvas to maximum
+	  	$("#mainCanvas").css("height", $(document).height() - 15 - 105);
 
         $('#draw_button').click(function () {
           var planData = $("textarea#plantext").val();
+          $("#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);
           var asObject = eval('(' + planData + ')');
-          drawPactPlan(asObject, true, "../../../resources/web-docs/img/arrows/arr.gif");
+          drawGraph(asObject, "#svg-main");
         });
 
       });
-    //-->
     </script>
 </body>
 </html>


Mime
View raw message