Repository: flink-web Updated Branches: refs/heads/asf-site 16a92b0c1 -> 9ec0a879f
http://git-wip-us.apache.org/repos/asf/flink-web/blob/9ec0a879/content/visualizer/js/program.js ---------------------------------------------------------------------- diff --git a/content/visualizer/js/program.js b/content/visualizer/js/program.js new file mode 100755 index 0000000..683185d --- /dev/null +++ b/content/visualizer/js/program.js @@ -0,0 +1,233 @@ +/*! + * 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(); +});