From 2c492af32f73df4503018d0ca5cdd48f1f073c5c Mon Sep 17 00:00:00 2001
From: Nikolay Mahotkin <nmakhotkin@mirantis.com>
Date: Wed, 9 Oct 2013 17:46:33 +0400
Subject: [PATCH] Add job parameters and arguments configuration

 * Appearance config, params and/or args sections
 depending on job type:
   MR   - only configs
   Pig  - configs, params, args
   Hive - configs, params

Fixes Bug #1228138

Change-Id: Ida66111bc9148adf7cb4a6667e214b12dc40aced
---
 savannadashboard/jobs/views.py                |  12 +
 savannadashboard/jobs/workflows/launch.py     |  18 +-
 .../templates/jobs/config_template.html       | 215 +++++++++++-------
 3 files changed, 165 insertions(+), 80 deletions(-)

diff --git a/savannadashboard/jobs/views.py b/savannadashboard/jobs/views.py
index 0e5efc87..8ff72570 100644
--- a/savannadashboard/jobs/views.py
+++ b/savannadashboard/jobs/views.py
@@ -14,7 +14,9 @@
 # implied.
 # See the License for the specific language governing permissions and
 # limitations under the License.
+import json
 
+from django.http import HttpResponse
 import logging
 
 from horizon import tables
@@ -66,6 +68,16 @@ class LaunchJobView(workflows.WorkflowView):
     classes = ("ajax-modal")
     template_name = "jobs/launch.html"
 
+    def get(self, request, *args, **kwargs):
+        if request.is_ajax():
+            if request.REQUEST.get("json", None):
+                job_id = request.REQUEST.get("job_id")
+                savanna = savannaclient(request)
+                job_type = savanna.jobs.get(job_id).type
+                return HttpResponse(json.dumps({"job_type": job_type}),
+                                    mimetype='application/json')
+        return super(LaunchJobView, self).get(request, args, kwargs)
+
     def get_context_data(self, **kwargs):
         context = super(LaunchJobView, self).get_context_data(**kwargs)
         return context
diff --git a/savannadashboard/jobs/workflows/launch.py b/savannadashboard/jobs/workflows/launch.py
index fd398fca..5628f2bd 100644
--- a/savannadashboard/jobs/workflows/launch.py
+++ b/savannadashboard/jobs/workflows/launch.py
@@ -104,7 +104,15 @@ class JobConfigAction(workflows.Action):
         required=False,
     )
 
-    conf_props = forms.CharField(
+    job_configs = forms.CharField(
+        required=False,
+        widget=forms.HiddenInput())
+
+    job_params = forms.CharField(
+        required=False,
+        widget=forms.HiddenInput())
+
+    job_args = forms.CharField(
         required=False,
         widget=forms.HiddenInput())
 
@@ -141,8 +149,12 @@ class JobConfig(workflows.Step):
     template_name = 'jobs/config_template.html'
 
     def contribute(self, data, context):
-        job_config = json.loads(data.get("conf_props", '{}'))
-        context["job_config"] = {"configs": job_config}
+        job_config = json.loads(data.get("job_configs", '{}'))
+        job_params = json.loads(data.get("job_params", '{}'))
+        job_args = json.loads(data.get("job_args", '{}'))
+        context["job_config"] = {"configs": job_config,
+                                 "params": job_params,
+                                 "args": job_args}
         return context
 
 
diff --git a/savannadashboard/templates/jobs/config_template.html b/savannadashboard/templates/jobs/config_template.html
index c38371c4..0f20acce 100644
--- a/savannadashboard/templates/jobs/config_template.html
+++ b/savannadashboard/templates/jobs/config_template.html
@@ -1,80 +1,28 @@
-<script>
-    var template = '<tr id_attr="$id">' +
-            '<div class="input control-group">' +
-            '<td>' +
-            '<input style="display: inline" field="key" list="properties" placeholder="Select property name" onkeyup="trySetValue(this)" onchange="trySetValue(this)" onclick="trySetValue(this)"/></td>' +
-            '<td>' +
-            '<input style="display: inline; margin-left:10px; margin-right:10px" field="value" class="input-medium" onkeyup="set_props()" onchange="set_props()" onclick="set_props()" /></td>' +
-            '<td>' +
-            '<input style="display: inline; margin-top:-10px" type="button" class="btn btn-danger" id="delete_btn_$id" data-toggle="dropdown" onclick="delete_prop(this)" value="Remove"/></td></div>' +
-            '</tr>';
-
-    function get_next_id() {
-        var max = -1;
-        $("#props tbody tr").each(function () {
-            max = Math.max(max, parseInt($(this).attr("id_attr")));
-        });
-        return max + 1;
-    }
-
-    function set_props() {
-        var props = {};
-        var i = 0;
-        $("#props tbody tr").each(function () {
-            var key = $(this).find("td input[field=key]").val();
-            props[key] = $(this).find("td input[field=value]").val();
-        });
-        $("#conf_props").val(JSON.stringify(props));
-    }
-
-    function add_prop(id) {
-        $("#props table").show();
-        var tmp = template.
-                replace(/\$id/g, id);
-        $("#props tbody").append(tmp);
-        set_props();
-    }
-    function delete_prop(el) {
-        var tr = $(el).parents("tr")[0];
-        tr.parentNode.removeChild(tr);
-        var id = get_next_id();
-        if (id == 0) {
-            $("#props table").hide();
-        }
-        set_props();
-    }
-
-    function trySetValue(el) {
-        var prop_id = $(el).parent().parent().attr("id_attr");
-        if (properties[$(el).val()] != "undefined") {
-            $("#props").find("tbody tr[id_attr='" + prop_id + "']")
-                    .find("td input[field=value]").val(properties[$(el).val()])
-        }
-        set_props();
-    }
-
-    properties = {};
-    $("label[for=id_property_name]").hide()
-    $("#id_property_name").hide().find("option")
-            .each(function () {
-                properties[$(this).text()] = $(this).val()
-            });
-    $.each(properties, function (key, value) {
-        $("#properties")
-                .append($("<option></option>")
-                        .attr("value", key)
-                        .text(value))
-    });
-    $("#props table").hide();
+<script id="configs_template" type="text/template">
+    <tr id_attr="$id">
+        <div class="input control-group">
+            <td><input style="display: inline" field="key" list="properties" placeholder="Select property name"
+                       onkeyup="trySetValue(this)" onchange="trySetValue(this)" onclick="trySetValue(this)"/></td>
+            <td><input style="display: inline; margin-left:10px; margin-right:10px" field="value" class="input-medium"
+                       onkeyup="set_props()" onchange="set_props()" onclick="set_props()"/></td>
+            <td><input style="display: inline; margin-top:-10px" type="button" class="btn btn-danger"
+                       onclick="delete_prop(this)" value="Remove"/></td>
+        </div>
+    </tr>
 </script>
-
-{% include "horizon/common/_form_fields.html" %}
-
-<input type="hidden" value="{}" name="conf_props" id="conf_props">
-
-<datalist id="properties"></datalist>
-
-<div id="props">
+<script id="args_template" type="text/template">
+    <tr id_attr="$id">
+        <div class="input control-group">
+            <td><input style="display: inline" field="key"
+                       onkeyup="set_props()" onchange="set_props()" onclick="set_props()"/></td>
+            <td><input style="display: inline; margin-left:10px; margin-right:10px" field="value" class="input-medium"
+                       onkeyup="set_props()" onchange="set_props()" onclick="set_props()"/></td>
+            <td><input style="display: inline; margin-top:-10px" type="button" class="btn btn-danger"
+                       onclick="delete_prop(this)" value="Remove"/></td>
+        </div>
+    </tr>
+</script>
+<script id="table_template" type="text/template">
     <table>
         <thead>
         <tr>
@@ -86,6 +34,119 @@
         </tbody>
     </table>
     <div class="input">
-        <a id="add_prop_btn" class="btn btn-inline" onclick="add_prop(get_next_id());">Add</a>
+        <a class="btn btn-inline" onclick="add_prop('$target');">Add</a>
+    </div>
+</script>
+<script>
+    function get_next_id(target) {
+        var max = -1;
+        $("#" + target + " tbody tr").each(function () {
+            max = Math.max(max, parseInt($(this).attr("id_attr")));
+        });
+        return max + 1;
+    }
+
+    function set_props() {
+        $(targets).each(function (index, target) {
+            var configs = {};
+            $("#" + target + " tbody tr").each(function () {
+                var key = $(this).find("td input[field=key]").val();
+                configs[key] = $(this).find("td input[field=value]").val();
+            });
+            $("#job_" + target).val(JSON.stringify(configs));
+        });
+    }
+
+    function add_prop(target) {
+        $("#" + target + " table").show();
+        var id = get_next_id(target);
+        var tmpl_from = target == "params" ? "args" : target;
+        var template = $("#" + tmpl_from + "_template").text()
+                .replace(/\$id/g, id);
+        $("#" + target + " tbody").append(template);
+        set_props();
+    }
+    function delete_prop(el) {
+        var tr = $(el).parents("tr")[0];
+        var target = $(tr).parent().parent().parent().attr("id");
+        tr.parentNode.removeChild(tr);
+        var id = get_next_id(target);
+        if (id == 0) {
+            $("#" + target + " table").hide();
+        }
+        set_props();
+    }
+
+    function trySetValue(el) {
+        var prop_id = $(el).parent().parent().attr("id_attr");
+        if (properties[$(el).val()] != "undefined") {
+            $("#configs").find("tbody tr[id_attr='" + prop_id + "']")
+                    .find("td input[field=value]").val(properties[$(el).val()])
+        }
+        set_props();
+    }
+
+    function get_targets(job_type) {
+        var res = ["configs"];
+        if ($.inArray(job_type, ["Hive", "Pig"]) != -1) {
+            res.push("params");
+            if (job_type == "Pig") {
+                res.push("args");
+            }
+        }
+        return res;
+    }
+
+    properties = {};
+    $("label[for=id_property_name]").hide();
+    $("#id_property_name").hide().find("option")
+            .each(function () {
+                properties[$(this).text()] = $(this).val()
+            });
+    $.each(properties, function (key, value) {
+        $("#properties")
+                .append($("<option></option>")
+                        .attr("value", key)
+                        .text(value))
+    });
+    $("#job_cfg").children().hide();
+
+    var targets;
+
+    $.ajax({
+        url: "launch-job",
+        data: {"job_id": $("#id_job").val(),
+            "json": true },
+        success: function (data, textStatus, jqXHR) {
+            var job_type = data["job_type"];
+            targets = get_targets(job_type);
+        },
+        complete: function (jqXHR, textStatus) {
+            $(targets).each(function (index, target) {
+                $("#" + target).show().append($("#table_template").text()
+                        .replace(/\$target/g, target));
+            });
+            $("#job_cfg table").hide();
+        }
+    });
+</script>
+
+{% include "horizon/common/_form_fields.html" %}
+
+<input type="hidden" value="{}" name="job_configs" id="job_configs">
+<input type="hidden" value="{}" name="job_args" id="job_args">
+<input type="hidden" value="{}" name="job_params" id="job_params">
+
+<datalist id="properties"></datalist>
+
+<div id="job_cfg">
+    <div id="configs">
+        <label>Configuration</label>
+    </div>
+    <div id="params">
+        <label>Parameters</label>
+    </div>
+    <div id="args">
+        <label>Arguments</label>
     </div>
 </div>