Merge lp:~cprov/uci-engine/webui-create-ticket into lp:uci-engine

[Celso Providelo]

Implements a ticket creation form in the webui.

Implements a ticket creation form in the webui.

This form will be used during the ci-train transition (where the CLI is not part of the workflow).

It uses Y.form to build, render and validate the new form and implements a custom form submission function to submit data as JSON to the Ticket-System.

The form is not yet linked from the other pages, the current navbar/breadcrumb is not a good place for it (IMHO).

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:794
http://s-jenkins.ubuntu-ci:8080/job/uci-engine-ci/1433/
Executed test runs:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/uci-engine-ci/1433/rebuild

review: Approve (continuous-integration)

[Evan (ev)]

Comments inline. Are we going to handle form validation in a follow up MP?

review: Needs Fixing

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:795
http://s-jenkins.ubuntu-ci:8080/job/uci-engine-ci/1441/
Executed test runs:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/uci-engine-ci/1441/rebuild

review: Approve (continuous-integration)

[Celso Providelo (cprov)]

On Tue, Sep 23, 2014 at 8:14 AM, Evan Dandrea
<email address hidden> wrote:
> Review: Needs Fixing
>
> Comments inline. Are we going to handle form validation in a follow up MP?

Basic validation were already in place (required fields). I've added
an email-address validation for the current owner field for now, but
once authentication is in place that field will be removed/hidden.

> Title, description, and owner end up as clickable links that focus on the title input box. Series is plain text. This looks odd.

I've extended and fixed Y.SelectField() which was being stupid when
rendering the label.

>> + {name: 'title', required: true, label: 'Title'},
>> + {name: 'description', label: 'Description',
>> + type: 'TextareaField'},
>> + {name: 'owner', required: true, label: 'Owner'},
>> + {name : 'series', required: true, label : 'Series',
>> + type : 'SelectField',
>> + choices : [
>> + {label : 'Utopic', value : 'utopic'},
>> + {label : 'Trusty', value : 'trusty'},
>> + {label : 'Precise', value : 'precise'},
>
> Must we hardcode this? If so, I think we should follow up with an MP to put this in a separate js file that can be pulled in from any code that needs it.

I've split the 'webuiform' module as an experiment, overall loading
performance is faster. 'webuiforms' also host 'seriesChoices', so it's
easier to maintain the hardcoded bits until there is a better
solution.

>> + ]},
>> + {name: 'create-button', type: 'SubmitButton',
>> + value: 'Create!'}
>> + ]
>> + });
>> + f.render();
>> +
>> + // Hijack the default (www-urlencoded) form submission and
>> + // submit its content as JSON.
>> + f.getField('create-button').on('click', function(e) {
>> + e.halt();
>> + if (!f._runValidation()) {
>> + return 1;
>> + }
>> +
>> + // XXX cprov 20140922: extend the form data with appropriate
>> + // 'status' and 'current_workflow_step'.
>> + var form_data = f.toJSON();
>> +
>> + Y.io(f.get('action'), {
>> + method: f.get('method'),
>> + sync: true,
>> + data: Y.JSON.stringify(form_data),
>> + headers: {
>> + 'Content-Type': 'application/json;',
>> + },
>> + on: {
>> + success: function(tx, r) {
>> + var location = r.getResponseHeader('Location');
>> + Y.log('SUCCESS: ' + location);
>
> Leftover from debugging?

Yes, removed.

>> + Y.config.win.location.href = location.replace(
>> + '/api/v1', '');
>> + },
>> + failure: function (tx, r) {
>> + Y.log('FA...

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:796
http://s-jenkins.ubuntu-ci:8080/job/uci-engine-ci/1442/
Executed test runs:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/uci-engine-ci/1442/rebuild

review: Approve (continuous-integration)

[Joe Talbott (joetalbott)]

On Tue, Sep 23, 2014 at 02:46:22AM -0000, Celso Providelo wrote:
> Celso Providelo has proposed merging lp:~cprov/uci-engine/webui-create-ticket into lp:uci-engine.
>
> Commit message:
> Implements a ticket creation form in the webui.
>
> Requested reviews:
> Joe Talbott (joetalbott)
> Canonical CI Engineering (canonical-ci-engineering)
>
> For more details, see:
> https://code.launchpad.net/~cprov/uci-engine/webui-create-ticket/+merge/235554
>
> Implements a ticket creation form in the webui.
>
> This form will be used during the ci-train transition (where the CLI is not part of the workflow).
>
> It uses Y.form to build, render and validate the new form and implements a custom form submission function to submit data as JSON to the Ticket-System.
>
> The form is not yet linked from the other pages, the current navbar/breadcrumb is not a good place for it (IMHO).

I thought we were going to have the TS generate the form?

[Celso Providelo (cprov)]

Joe,

I've experimented with this idea and realize that the form generation
is not part of the API provider, it already offer us REST primitives
and it is good at it.

The forms are related to the way the UI is layed and users want to use
it, a single form will probably involve data from many models and will
be executed via multiple REST posts.

Long story short, building forms on TS would be going in the wrong
direction by artificially coupling UI to Models (not APIs), to not
mention the additional django view + forms which would tie us even
more to django for a simple REST wsgi app.

The way it's is done, the form is built and validated client-side in
terms of the information users want to provide and submitted according
to what our API allows us to do.

Do you see it differently ?

[]

On Tue, Sep 23, 2014 at 12:15 PM, Joe Talbott <email address hidden> wrote:
> On Tue, Sep 23, 2014 at 02:46:22AM -0000, Celso Providelo wrote:
>> Celso Providelo has proposed merging lp:~cprov/uci-engine/webui-create-ticket into lp:uci-engine.
>>
>> Commit message:
>> Implements a ticket creation form in the webui.
>>
>> Requested reviews:
>> Joe Talbott (joetalbott)
>> Canonical CI Engineering (canonical-ci-engineering)
>>
>> For more details, see:
>> https://code.launchpad.net/~cprov/uci-engine/webui-create-ticket/+merge/235554
>>
>> Implements a ticket creation form in the webui.
>>
>> This form will be used during the ci-train transition (where the CLI is not part of the workflow).
>>
>> It uses Y.form to build, render and validate the new form and implements a custom form submission function to submit data as JSON to the Ticket-System.
>>
>> The form is not yet linked from the other pages, the current navbar/breadcrumb is not a good place for it (IMHO).
>
>
> I thought we were going to have the TS generate the form?
>
>
> --
> https://code.launchpad.net/~cprov/uci-engine/webui-create-ticket/+merge/235554
> You are the owner of lp:~cprov/uci-engine/webui-create-ticket.

--
Celso Providelo
<email address hidden>

[Evan (ev)]

Looks good. Thanks for the updates.

review: Approve

[Joe Talbott (joetalbott)]

On Tue, Sep 23, 2014 at 03:30:48PM -0000, Celso Providelo wrote:
> Joe,
>
> I've experimented with this idea and realize that the form generation
> is not part of the API provider, it already offer us REST primitives
> and it is good at it.
>
> The forms are related to the way the UI is layed and users want to use
> it, a single form will probably involve data from many models and will
> be executed via multiple REST posts.
>
> Long story short, building forms on TS would be going in the wrong
> direction by artificially coupling UI to Models (not APIs), to not
> mention the additional django view + forms which would tie us even
> more to django for a simple REST wsgi app.
>
> The way it's is done, the form is built and validated client-side in
> terms of the information users want to provide and submitted according
> to what our API allows us to do.
>
> Do you see it differently ?

If having the TS generate the forms is not optimal then I'm fine with
that. Are we able to utilize the API schema on the client-side so that
the TS can communicate its data requirements?

[Celso Providelo (cprov)]

Joe,

Tastypie allows shallow schema introspection via <API>/schema (e.g /api/v1/ticket/schema/) but it doesn't look very appealing atm (lack of documentation on the model/field level and not precise information for validation since we have many CharFields).

I can try to investigate some good way for using it, but the benefits get quickly consumed when we have to compose forms for multiple models.

[Joe Talbott (joetalbott)]

On Tue, Sep 23, 2014 at 06:38:08PM -0000, Celso Providelo wrote:
> Joe,
>
> Tastypie allows shallow schema introspection via <API>/schema (e.g /api/v1/ticket/schema/) but it doesn't look very appealing atm (lack of documentation on the model/field level and not precise information for validation since we have many CharFields).
>
> I can try to investigate some good way for using it, but the benefits get quickly consumed when we have to compose forms for multiple models.

No worries. We can sort it out later on. I'm okay with your approach
here.

[Ubuntu CI Bot (uci-bot)]

Attempt to merge into lp:uci-engine failed due to conflicts:

text conflict in webui/common/static/common/webui.css

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:797
http://s-jenkins.ubuntu-ci:8080/job/uci-engine-ci/1460/
Executed test runs:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/uci-engine-ci/1460/rebuild

review: Approve (continuous-integration)

[lp:~cprov/uci-engine/webui-create-ticket]

801. By Celso Providelo on 2014-09-24

[r=PS Jenkins bot, Evan Dandrea] Implements a ticket creation form in the webui.

=== modified file 'webui/common/static/common/webui.css'
--- webui/common/static/common/webui.css	2014-09-22 17:32:23 +0000
+++ webui/common/static/common/webui.css	2014-09-24 20:14:57 +0000
@@ -209,3 +209,39 @@
   height: 1em;
   vertical-align: middle;
 }
+
+div.form-error {
+  display: block;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
+  box-shadow: 0 2px 2px 0 #C2C2C2;
+  padding: 10px 0px 10px 0px;
+  margin: 10px;
+  background-color: #DD4040;
+  color: white;
+  text-align: left;
+  text-indent: 10px;
+  font-weight: bold;
+}
+
+form .error {
+  color: #FF0000;
+  font-weight: bold;
+  float: right;
+}
+
+.yui3-form {
+  width: 60%;
+  padding-left: 10px;
+}
+
+.field {
+  width: 100%;
+}
+
+input[type="submit"] {
+  margin-top: 1em !important;
+  width: auto;
+}

=== modified file 'webui/tickets/static/tickets/webui.js'
--- webui/tickets/static/tickets/webui.js	2014-09-22 17:32:23 +0000
+++ webui/tickets/static/tickets/webui.js	2014-09-24 20:14:57 +0000
@@ -748,7 +748,7 @@
          * 'type' can be one of 'open', 'complete', 'failed', otherwise
          * all tickets will be listed.
          *
-         * @method update_ticket
+         * @method setup_ticket_datatable
          */
         setup_ticket_datatable: function (container, type) {
             var itemsPerPage = 10;

=== added file 'webui/tickets/static/tickets/webui_create_ticket.js'
--- webui/tickets/static/tickets/webui_create_ticket.js	1970-01-01 00:00:00 +0000
+++ webui/tickets/static/tickets/webui_create_ticket.js	2014-09-24 20:14:57 +0000
@@ -0,0 +1,5 @@
+YUI().use('webuiforms', function(Y) {
+
+  Y.webuiforms.setupCreateForm('#form-content');
+
+});

=== added file 'webui/tickets/static/tickets/webuiforms.js'
--- webui/tickets/static/tickets/webuiforms.js	1970-01-01 00:00:00 +0000
+++ webui/tickets/static/tickets/webuiforms.js	2014-09-24 20:14:57 +0000
@@ -0,0 +1,105 @@
+"use strict";
+
+// Make jslint happy
+var YUI;
+
+YUI.add('webuiforms', function (Y) {
+
+    /**
+     * Overriding Y.SelectField to properly rendering '<label>'s.
+     */
+    Y.WebUISelectField = Y.Base.create(
+        'select-field', Y.SelectField, [Y.WidgetParent, Y.WidgetChild], {
+
+        _renderLabelNode : function () {
+            var contentBox = this.get('contentBox'),
+                titleNode = Y.Node.create('<label></label>');
+            titleNode.set('innerHTML', this.get('label'));
+            contentBox.appendChild(titleNode);
+            this._labelNode = titleNode;
+        }
+    });
+
+    Y.webuiforms = {
+
+        /**
+         * Hardcoded array of series choices, must be kept in sync with
+         * the supported options in Ticket-System.
+         */
+        seriesChoices: [
+            {label : 'Utopic - 14.10', value : 'utopic'},
+            {label : 'Trusty - 14.04', value : 'trusty'},
+            {label : 'Precise - 12.04', value : 'precise'}
+        ],
+
+        /**
+         * Setup a form for creating a new ticket.
+         *
+         * Uses Y.Form() to build and render the form dynamically and
+         * re-implements its submission to POST JSON data (instead of
+         * 'urlencoded'). Opens the just-created ticket on success.
+         *
+         * @method setupCreateForm
+         */
+        setupCreateForm: function (container) {
+            var form_message = Y.Node.create('<div>');
+            Y.one(container).appendChild(form_message);
+
+            // Build and render a form for creating a new Ticket.
+            var f = new Y.Form({
+                boundingBox: container,
+                action : '/api/v1/ticket/',
+                method : 'post',
+                children : [
+                    {name: 'title', required: true, label: 'Title:'},
+                    {name: 'description', label: 'Description:',
+                     type: 'TextareaField'},
+                    {name: 'owner', required: true, label: 'Owner:',
+                     validator: Y.FormField.VALIDATE_EMAIL_ADDRESS},
+                    {name: 'series', required: true, label: 'Series:',
+                     type: 'WebUISelectField', useDefaultOption: false,
+                     choices: this.seriesChoices},
+                    {name: 'create-button', type: 'SubmitButton',
+                     value: 'Create!'}
+                ]
+            });
+            f.render();
+
+            // Hijack the default (www-urlencoded) form submission and
+            // submit its content as JSON.
+            f.getField('create-button').on('click', function(e) {
+                e.halt();
+                if (!f._runValidation()) {
+                    return 1;
+                }
+
+                // XXX cprov 20140922: extend the form data with appropriate
+                // 'status' and 'current_workflow_step'.
+                var form_data = f.toJSON();
+
+                Y.io(f.get('action'), {
+                    method: f.get('method'),
+                    sync: true,
+                    data: Y.JSON.stringify(form_data),
+                    headers: {
+                        'Content-Type': 'application/json;',
+                    },
+                    on: {
+                        success: function(tx, r) {
+                            var location = r.getResponseHeader('Location');
+                            Y.config.win.location.href = location.replace(
+                                '/api/v1', '');
+                        },
+                        failure: function (tx, r) {
+                            Y.log('FAILURE: ' + r.responseText);
+                            form_message.addClass('form-error')
+                            form_message.set(
+                                'text', 'Ticket creation failed!')
+                        }
+                    }
+                });
+            });
+        }
+    };
+}, '0.0.1', {requires: ['io', 'node', 'json-parse', 'json-stringify',
+                        'gallery-form']});

=== added file 'webui/tickets/templates/tickets/create.html'
--- webui/tickets/templates/tickets/create.html	1970-01-01 00:00:00 +0000
+++ webui/tickets/templates/tickets/create.html	2014-09-24 20:14:57 +0000
@@ -0,0 +1,23 @@
+{% extends "common/base.html" %}
+{% load staticfiles %}
+
+{% block extra_headers %}
+  <script type="text/javascript" src="{% static 'tickets/webuiforms.js' %}"></script>
+  <script type="text/javascript" src="{% static 'tickets/webui_create_ticket.js' %}"></script>
+{% endblock extra_headers %}
+
+{% block second_nav %}
+<nav role="navigation" class="nav-secondary clearfix">
+  <ul class="breadcrumb">
+    <li><a href="/">Open tickets</a></li>
+    <li><a href="/complete/">Completed tickets</a></li>
+    <li><a href="/failed/">Failed tickets</a></li>
+  </ul>
+</nav>
+{% endblock second_nav %}
+
+{% block content %}
+
+  <div id="form-content" class="yui3-skin-sam"></div>
+
+{% endblock content %}

=== modified file 'webui/tickets/urls.py'
--- webui/tickets/urls.py	2014-08-27 21:04:07 +0000
+++ webui/tickets/urls.py	2014-09-24 20:14:57 +0000
@@ -14,4 +14,5 @@
         'tickets.views.review', name='ticket_review'),
     url(r'^complete/$', 'tickets.views.complete', name='ticket_complete'),
     url(r'^failed/$', 'tickets.views.failed', name='ticket_failed'),
+    url(r'^create$', 'tickets.views.create', name='create'),
 )

=== modified file 'webui/tickets/views.py'
--- webui/tickets/views.py	2014-06-30 12:07:54 +0000
+++ webui/tickets/views.py	2014-09-24 20:14:57 +0000
@@ -34,3 +34,7 @@
 
 def status(request):
     return render_to_response('tickets/status.html', base_data)
+
+
+def create(request):
+    return render_to_response('tickets/create.html', base_data)