submit.html 2.61 KB
Newer Older
1 2 3 4
{% extends "base_user.html" %}
{% block title %}Submit Spark application{% endblock %}
{% block content %}
    <h2>Submit Spark application</h2>
5 6
    <p>Use the form below to submit a Spark application.<br>
    The application should be packaged in a zip archive containing all the files needed by the application.</p>
7 8
    <form enctype="multipart/form-data" id="app_upload">
        <label for="exec_name">Execution name:</label>
9
        <input type="text" autofocus autocomplete="on" required pattern="[a-z0-9_\-]+" name="exec_name" id="exec_name" placeholder="myapp-run-25"><br/>
10 11

        <label for="cmd_line">Command line:</label>
12
        <input type="text" autocomplete="on" required name="cmd_line" id="cmd_line" size="150" placeholder="wordcount.py hdfs://192.168.45.157/datasets/gutenberg_big_2x.txt hdfs://192.168.45.157/tmp/cntwdc1"><br/>
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

        <label for="spark_options">Spark options:</label>
        <input type="text" autocomplete="on" name="spark_options" id="spark_options" size="100"><br/>

        <label for="upload">Spark application package:</label>
        <input type="file" name="file" id="upload" accept="application/zip"><br/>

        <input type="button" value="Submit" id="submit">
    </form>
    <progress style="display: none" id="progress"></progress>

    <script type="application/javascript">
    function progressHandlingFunction(e){
        if(e.lengthComputable){
            $('progress').attr({value:e.loaded,max:e.total});
        }
    }

    function completeHandler(e) {
        $("#progress").hide();
    }

    function errorHandler(e) {
        $("#progress").hide();
    }

    $('#submit').on('click', function(){
        var formData = new FormData($('#app_upload')[0]);
        $("#progress").show();
        $.ajax({
            url: '/api/{{ user }}/spark-submit',  //Server script to process data
            type: 'POST',
            xhr: function() {  // Custom XMLHttpRequest
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // Check if upload property exists
                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
                }
                return myXhr;
            },
            //Ajax events
            //beforeSend: beforeSendHandler,
            success: completeHandler,
            error: errorHandler,
            // Form data
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
        });
    });
    </script>

{% endblock %}