Recently in Web Category

This is an example of YUI DataTable that uses Context Menu options to select/unselect rows.  Also, the rowClickEvent listener has a muli-select/unselect function attached.  Follow the link below to see the example.

http://www.coderfoo.com/examples/datatable-multi-row-select.html

DataTable selectAllRows extension:

// Extend YUI DataTable which is missing a selectAllRows method
YAHOO.lang.augmentObject(
  YAHOO.widget.DataTable.prototype, {

    _selectAllTrEls : function() {
      var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_EVEN, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsEven , YAHOO.widget.DataTable.CLASS_SELECTED);

      var selectedRowsOdd = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_ODD, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsOdd, YAHOO.widget.DataTable.CLASS_SELECTED);
    },

  /* Selects all rows. * * @method selectAllRows */
  selectAllRows : function() {
    // Remove all rows from tracker
    var tracker = this._aSelections || [];
    for(var j=tracker.length- 1; j>-1; j--) {
      if(YAHOO.lang.isString( tracker[j] )){
        tracker.splice( j,1);
      }
    }
    // Update tracker
    this._aSelections = tracker;
    // Update UI
    this._selectAllTrEls();
    // Get all highlighted rows and make yahoo aware they are selected
    var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_SELECTED, "tr",this._elTbody);
    for (i=0;i<selectedRowsEven.length; i++){
      this.selectRow(i);
    }
  }
});
// End YUI Datatable extension

Web monitor using Perl and curl

| No Comments | No TrackBacks

Monitoring your website or webapp for issues is crucial.  There are many options available, both open source and vendor.  In the past I've used Nagios, which works great.  As with any "end all be all" infrastructure monitoring software, Nagios is not exactly a quick easy install and configuration.  However if you have the time I do recommend using Nagios.  When properly setup and configured, it makes life *much* easier as a Sys Admin.  And you don't have to worry about a user, or worse, management finding the problem first.

The alternative to monitoring software is good ol' fashioned scripts via cron.  When time and resources don't allow, scripts work great if done right.  For this post, I'm sharing a Perl script which uses libcurl via WWW::Curl to monitor a web application and will send an email alert if there is a problem.  Initially I had used Net::HTTP to issue a simple HTTP request and parse the resulting HTTP code.  This works fine, but what if I need to login to the site first?  Curl is basically a command line web browser so it will allow you to login to a site, store cookies, follow redirects, etc.  This script uses a config file for it's options.  I tried just plain command-line switches at first, but it started getting messy and I'd like to support all of libcurl's options.  That being said, the hardest part of using this script is figuring out which of the libcurl options you need and how they work together.  If you're familiar with the curl command, most of the switches directly map to the libcurl-easy interface options. 

On to some of the specifics.  Here are the prerequisites for the script:

  • Linux/UNIX
  • Perl
  • curl
  • Getopt::Long
  • Mail::Sendmail
  • HTTP::Status
  • WWW::Curl
  • Config::General

The general logic of the script is as follows:

READ config
SET curl options
PERFORM curl request
PARSE result
CHECK http code
  ALERT IF http error code
  ALERT IF unexpected http code
  ALERT IF timeout reached
DONE

If no HTTP codes are specified in the config file the defaults will be used.  That is, an error code is anything greater than or equal to 400 and unexpected codes are any other than 200 and less than 400.  See here for specifics on status codes. 

The configuration options are case insensitive so feel free to use whatever case you like for readability.  Below is an example configuration.  Using these settings will simply hit the URL and send an alert email if there is a problem.

# ---------------------------------------------------------------------------
# monitor-site.pl Config File
# ---------------------------------------------------------------------------

# General settings
repeat = 1        # Only repeat the alert once
threshhold = 3600 # Only alert an hour later after the initial alert
timeout = 600     # Alert if the request takes longer than 10 seconds

# Alert email options
<alert>
  # Required
  To = andy@coderfoo.com

  # Optional
  From = admin@coderfoo.com
  Subject = "Critical Issue!" 

  # Define HTTP Code alerts. Any code not defined here will be "unexpected"
  Error = 400-417,500-505
  Ok = 200
</alert>

# Libcurl options, all are supported
<curlopts>
  # Required
  CURLOPT_URL = http://www.coderfoo.com

  # Optional (See the libcurl docs for options)
</curlopts>

Note that the only required options are "to" within the <alert> block and "curlopt_url" in the <curlopts> block.  If the "repeat" and/or "threshhold" options are used, a hidden file called .monitor will be created to track the results of the last run.

Here is a link to a tar-gz of the monitor:

http://www.coderfoo.com/source/monitor-site.tar.gz

See the README file in this package for information on installation and running the script.

YUI TreeView: Drag and Drop nodes

| 4 Comments | 1 TrackBack
I recently had a need for a YUI (Yahoo! User Interface) TreeView with Drag & Drop nodes.  Here's a little background on the project.  My web application uses YUI Menu for navigation and is driven by a single database table.  Initially I threw together a quick and dirty CGI CRUD interface to manage the menu.  But, the more I had to modify the menu with this interface the more I needed something easier to use.  So I decided to scrap the CGI interface and start over with a nice 100% Ajax interface with a YUI TreeView to represent the YUI Menu.  Adding, changing, and deleting nodes is pretty easy, but to easily change the order of the Menu items, I added YUI Drag & Drop to the TreeView.  

The example I created is essentially a merge of two YUI examples with some tweaks.  The base code I used for this example is the Default TreeView example.  For my web app, the TreeView is dynamically loaded.  Either way, drag and drop will work.  The Reordering a list example was the best fit for my needs so it is used for drag and drop.

Here is the onDragOver function with tweaks to allow for dragging a nested node over it's parent without too much quirkiness:
  onDragOver: function(e, id) {
    var srcEl = this.getEl();
    var destEl = Dom.get(id);

    // We are only concerned with menu items, we ignore the dragover
    // notifications for anything else.
    if (destEl.id.match(/^ygtv[0-9]+$/)) {
      var orig_p = srcEl.parentNode;
      var p = destEl.parentNode;
      var destIdx = destEl.id.match(/[0-9]+$/);
      var destTreeNode = oTextNodeMap['ygtvlabelel' + destIdx];

      // Ignore any parent that is expanded
      // If !expanded
      if (! destTreeNode.expanded) {
        if (this.goingUp) {
          p.insertBefore(srcEl, destEl); // insert above
          lastDestId = destEl.id;
        } 
        else {
          p.insertBefore(srcEl, destEl.nextSibling); // insert below
          lastDestId = destEl.id;
        }
      }

      DDM.refreshCache();
    }
  }
The finished example of the TreeView with Drag & Drop:

Pages

About this Archive

This page is an archive of recent entries in the Web category.

Perl is the previous category.

YUI is the next category.

Find recent content on the main index or look in the archives to find all content.

Powered by Movable Type 4.261