Debugging / Creating GUI Components for pfSense

Guest

Hi everyone,

i recognized that it would be useful to have some neat gui Component that let us users:
->~~edit~~ display a pfSense generated mpd_[interface].conf
->and do some preselection of the country settings.
I wanted to train some jquery,ajax and english skills anyway, so ill write some progress notes herein to ease the learning curve for pfSense entry level customization folks like us. When everythings done i like to reformat this thread into a wiki article about how to do that kind of modifications or bug fixes. (any votes against.. ? For sure i appreciate any comments.)

So, for a First step,)
we have to setup some prototyping environment which does the job of giving us the ability to test jQuery functions live in the browser.
searching around in the net gave me the hint to use Firebug for Linux or Mac version.
Okay, this said - it is just as easy as (search for 'firebug swarm') [install Firebug], open it in a new window and [click Console-> Editor].
After that, we should have 2 windows. on the right is our editor, on the left is our console window.
[pfsense-firebug-console-editor.png]
We want to get all console messages, so we [click on the nifty all button] :)

-> Dont forget to look at github.com/pfsense for more recent versions of files that you plan to modify.
Ready ? Then we go for

STEP 2)

…a simple ajax test by fetching the countries list:


jQuery.ajax("getserviceproviders.php",{
        success: function(responseText) {
                console.log (responseText.split("\n"));
       }
    }
);

… which goes straight into the editor.
[Click run] -> Our console fills up with the gathered information.

Third Step tbd …

pfsense-firebug-console-editor.png_thumb

Guest

Part 3: Debugging

so, first, we need a problem for this :( luckily, we have at least a question: on ppp_edit.js:
As noted recently in another post, the Dialup country fields were not automatically preselected as configured.
This could be somewhat irritating when we have to troubleshoot some network problems.
For example when, like recently, a providers CHAP implementation has problems and we have to skip the advertisement and accept only PAP.
Said this - after solving the negotiation issue pretty quickly, we may have some time to start up firebug on the ppp page.
after deciding to do so, we see that firebug points us to:


responseTextArr[i].split is not a function
country = responseTextArr[i].split(":"); ppps_edit.js (line 190)

[pfsense_firebug_bug_hunting.png]

mmh - this error may be the cause ?   - lets look at this ppps_edit.js [pfsense_firebug_bug_hunting2.png] in the script view, even...
...when its just to play around a bit in a save environment like our Console-Edit Window_:p 
[code]

function country_list() {
    jQuery('#country option').remove();
    jQuery('#provider option').remove();
    jQuery('#providerplan option').remove();
    jQuery.ajax("getserviceproviders.php",{
       success: function(responseText,status) { // <--see jQuery.ajax() Documentation
          var responseTextArr = responseText.split("\n");
	  responseTextArr.sort();
          console.log ("checkpoint_A ", responseTextArr) // Data till here ?
          for(i in responseTextArr) {
          console.log ("checkpoint_B ", i, responseTextArr[i]); // or even here ?
	 // country = responseTextArr[i].split(":"); 
         // console.log ("checkpoint_C ",country[0],country[1]); // common method to log (eg malformatted) Data
            jQuery('#country').append(newOption(country[0],country[1]));
          }

       }      
    });
     jQuery('#trcountry').css("display","table-row");
}
country_list();

We add some common logging functions to see a bit more whats going on.

Now, when executing with the run button, we should see a data flow in the console window.
There are two datasets divided by a delimiter ":". and we see that the split function is using this delimiter in [.split(":");] 
[pfsense_firebug_bug_hunting_3.png]

I tried at least an hour getting to the following message here:
-------------
I hit a point where im stuck. I know that this is just a cast issue,which i wanted to show and should have lead to the point of implementing a simple addition to do the preselection. But i hit unexpected of problems with this simple example where the for loop simply stops at the jQuery Call in Firebug, the function ends and no error msg is written.
----------
Next Day Edit: 
Now, i can say: All i sometimes need is some sleep.
I used nano to edit the message and there was a page break at the jQuery call - exactly in the command: class [new'PageBreak'Option] ....
Funny-  the jScript interpreter did exactly a i said -> 'newOption(x,y)' is a function declaration which is perfectly valid.
Maybe it was a bit unintuitive for me at first view when switching from other languages to jScript.
But this is whats normal, when adapting yourself to something different. 
Typos like this could reduce motivation when switching languages, so be prepared :(
---------

Okay, back in the ring ?
We see that all checkpoints were passed, the function ends and the list is filled. 
And the error ? gone with the Wind too ! 
Its just a missing cast, moreof a warning thats caused by js expecting a function and getting a string back...
Just add a .toString(). before the split and it will be happy. 

But more interesting: Where is our desired preselection ?  Answer: its not implemented (yet), so lets do it in  Part 4 :)

![pfsense_firebug _bug_hunting.png_thumb](/public/_imported_attachments_/1/pfsense_firebug _bug_hunting.png_thumb)
![pfsense_firebug _bug_hunting.png](/public/_imported_attachments_/1/pfsense_firebug _bug_hunting.png)
![pfsense_firebug_bug_hunting_2.png](/public/_imported_attachments_/1/pfsense_firebug_bug_hunting_2.png)
![pfsense_firebug_bug_hunting_2.png_thumb](/public/_imported_attachments_/1/pfsense_firebug_bug_hunting_2.png_thumb)
![pfsense_firebug_bug_hunting_3.png_thumb](/public/_imported_attachments_/1/pfsense_firebug_bug_hunting_3.png_thumb)
![pfsense_firebug_bug_hunting_3.png](/public/_imported_attachments_/1/pfsense_firebug_bug_hunting_3.png)[/i][/i][/code][/i][/i]

wallabybob

@ThorstenK:

i recognized that it would be useful to have some neat gui Component that let us users edit a pfSense generated mpd_[interface].conf.

I'm all for having a richer set of PPP configuration options but editing mpd_[interface].conf is probably not the way to get that because the file is written at least on startup, on interface Disable - Enable sequence (from the Interfaces -> [Interface] page) and on Disconnect - Reconnect sequence (on appropriate section of the Status -> Interfaces page).

Guest

Hey -
Normally, all this areas should import /etc/inc/interfaces.inc to handle mpdxxx.conf
Until now i planned to call this function too with a new dryrun option and let the user edit the resulting content.

But i think you are right - There is another option which might fit better:
Just show a button at the status->interfaces page when a user attached a ppp configuration to an interface.
This button would then display the current mpd[interface].conf in readonly mode, just to let users easily see whats actually configured. I think this solution would be easier to accomplish and should be more suitable.

I will post a patch here when this is accomplished. When its agreed to be designed correctly, we can go for a further step / handle it otherwise etc. (Anyway its about learning while doing useful things)

Just lets go step by step and everything will be fine ;)

–-snipsnip----
mmh i noted that im far to rusty atm and will take a js ground course at codeschool...
i managed to take it with humor and finally i have created something pratical which is plain php and runs totally without javacript. See screenshots !
---snipsnip---

status_interfaces.png_thumb

download_cscript.png_thumb

Guest

…update finished the course - seems to was worth the 9$ :) - im currently coding some gui extension.
see http://forum.pfsense.org/index.php/topic,49635.15.html