Bugzilla, YUI, and other things.

Wednesday, July 08, 2009

Bugzilla JSON-RPC Webservice with JQuery

I already posted how you can use YUI to use the Bugzilla web services available on the head. But lots of people don't like using YUI and prefer using JQuery. I haven't used JQuery much, but this experiment seems to have gotten the job done and should supply a basis for how to do more complex stuff with JQuery and the JSON-RPC interface.

Please note the JSON serialization capability isn't part of JQuery so I used a plug-in. The plugin doesn't seem to be as powerful as YUI's JSON serialization, but maybe it is and I haven't explored it enough. Anyway, here goes!

First you'll need JQuery and the JSON serialization parser. I added it under YUI but you should be able to add it before or after the YUI in the header.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"></script>

Next comes the actual code which is very similar to the previous post.

First you create the JSON-RPC object:

var myObject = { "method": "Bug.add_comment",
"params": [ { "id": 1,
"comment":"I am using bugzilla's webservices with jQuery! YAY"
} ],
"id": 1 };


Then we encode it into a string:
var enc = $.toJSON(myObject);


Lastly we send it on its way using the JQuery ajax method:

$.ajax({"contentType":"application/json",
"data": enc,
"dataType": "json",
"url": "jsonrpc.cgi",
"type": "post",
success: function(d, ts){
console.log('w00t',d);
console.dir(d);
}
});


Just like in YUI we need to make sure we set the contentType to application/json and use a post (get is still disabled due to cross site scripting concerns). I set the dataType to JSON so Jquery would deserialize the response for me.

And now we've got a basic JSON-RPC message being sent. Now we'll still need to handle errors etc, but for now this is enough to get any eager JavaScript developer going.

Another example is getting bug info which might be equally helpful is available below. This method gets information about 2 bugs. I'm not going to explain it as much but it follows the same pattern.

var myObject = {
"method": "Bug.get",
"params": [{ "ids": [1,2]}],
"id": 1
};
var enc = $.toJSON(myObject);
jQuery.ajax({"contentType":"application/json",
"data":enc,
"dataType":"json",
"url":"jsonrpc.cgi",
"type":"post",
success:function(d, ts){
console.log('w00t', d);
console.dir(d)
}
});

The hope is eventually to release some JavaScript plugins for YUI (2 and 3) and JQuery that will make this sort of stuff much easier, like handle the serialization, and errors. But for now these examples will have to do.

For more info about what Bugzilla web services are available check out:
http://www.bugzilla.org/docs/3.4/en/html/api/index.html

Next experiment... Jetpack! Any ideas on a cool bugzilla jetpack app?

Monday, July 06, 2009

Using YUI with Bugzilla 3.6

So today someone filed Bug 502504 and I immediately became nervous because I had never even tried using the new JSON-RPC api and I was worried it would be too hard to use for anyone.

Well after a few hickups I got it to work on my local machine as well as landfill and I thought I'd post the code and attempt to explain it.

First off you'll need to get a few YUI libraries, specifically the Connect Manager and the JSON library. For ease of my own use I just grabbed utilities.js, but that might be too much for some of you.

You'll need to set the Conent-Type properly:
YAHOO.util.Connect.setDefaultPostHeader( 'application/json', true );


You'll need to pick the Web Service you want to use by looking at the API here. Then you'll need to create the JSON to send over.

According to the JSON-RPC spec you send over an Object/Hash with 3 value pairs:
  • method : the method you want to use, for this example we'll use Bug.add_comment
  • params : the params the webservice docs say you need to send. The spec for JSON-RPC say it needs to be an array of objects, for Bug.add_comment is it just a hash of id and the comment and a few other optional things
  • id : an integer, the id of the call so you can match it up later on, YUI should make it so we don't need to worry about this one, but you might care.
Here is the Object definition for the example...

var myObject = {
"method": "Bug.add_comment",
"params": [
{
"id": 1,
"comment":"I am using bugzilla's webservices! YAY"
}],
"id": 1
};

and then we'll stringify it using YAHOO.lang.JSON.stringify.
var jsonObject = YAHOO.lang.JSON.stringify(myObject);

Now hopefully you know how to use the callback in YUI. If not there are plenty examples.

Finally you call it!
YAHOO.util.Connect.asyncRequest('POST', 'jsonrpc.cgi', callback, jsonObject );

So in this example I added a comment to bug 1, and that comment is "I am using bugzilla's webservices! YAY"

That's it! The full code that I used is below. I was using firebug so you should change the console commands to whatever you want to do with the response:

YAHOO.util.Connect.setDefaultPostHeader( 'application/json', true );
var callback = {
success:function(o){
console.log('it worked');
console.dir(o.response);
},
failure:function(o){
console.log('it failed');
console.dir(o);
}};
var myObject = {
"method": "Bug.add_comment",
"params": [
{
"id": 1,
"comment":"I am using bugzilla's webservices! YAY"
}
],
"id": 1
};
var jsonObject = YAHOO.lang.JSON.stringify(myObject);
YAHOO.util.Connect.asyncRequest('POST', 'jsonrpc.cgi', callback, jsonObject );


Another example for those who would like one...

YAHOO.util.Connect.setDefaultPostHeader( 'application/json' );
var obj = {
"method": "Bug.get",
"params": [
{ "ids": [
1,
2
]
}
],
"id": 1
};
var jsonObj = YAHOO.lang.JSON.stringify(obj);
YAHOO.util.Connect.asyncRequest('POST', 'jsonrpc.cgi',
{ success:function(o){
console.log('it worked');
console.log(YAHOO.lang.JSON.parse(o.responseText));
},
failure:function(o){
console.log('it failed');
console.dir(o);
}
}, jsonObj);