The short answer, unfortunately, is "you can't".  (At least, AFAIK and from a quick look at the reference to ZCML's browser:page entry.  I believe that it's also supposed to be a 'feature' in that all sorts of crazy stuff was happening where different zenpacks would override the same page.)

What is possible is to create a new hierearchy in a zenpack and then to point a new item to the page.  In this scenario, there would be a 'MIBs' item and then a 'MIB Browser' item that would be displayed.  It should also be possible to add a new 'cog' menu item to bring up the browser.

  Zenoss 3.1.1 (not released yet) has more MIB functionality dragged into it, but not a MIB browser (it's still not done).  A lot of the backend work has been completed (ie facade/router stuff), but it's still a little buggy and not ready for prime time.  The current JS that I've got is not feature complete, but does have a nice tree view of OIDs.  I've had to lean on some of the other members of the developer team for ExtJS help as the ExtJS framework is a little bit beyond me at the moment.

kells

Since I didn't write that piece of documentation, I'm not personally going to feel badly about it.

  From a pragmatic perspective, there are now (as of 3.x) two different types of pages:

  - new JavaScript pages

  - backcompat pages (ie old school Zope page templates)

The actual JS pages are in the ZENHOME/Products/ZenUI3/browser/resources/js/zenoss/ directory, and are wired up using various zcml files in the ZenUI3 directory tree.

  Much of the old .pt files have not been cleaned up, which can cause some confusion about what's going on.  A lot of the mechanics of linking up new and backcompat pages are contained int he $ZENHOME/Products/ZenUI3 directory.

For reference, the backcompat pages have a zcml file (ZenUI3/browser/backcompat.zcml) as well as some thin Python shims (ZenUI3/browser/backcompat.py).  The zcml points to the .pt files still in use.

  The MIBs page is a backcompat page.

  A really quick example:

From a JS file:

=============================

// New menu option on the cog wheel

Ext.ComponentMgr.onAvailable('context-configure-menu', function(config) {

  var origOnGet = config.onGetMenuItems;

  config.onGetMenuItems = function(uid) {

    var result = origOnGet.call(this, uid) || [];

    // Menu item only shows up when certain device class is selected

    if( uid.match('^/zport/dmd/Devices/MyDeviceClass/') ) {

        result.push( {

            text: _t('Run Predefined Shell Cmmand'),

            hidden: Zenoss.Security.doesNotHavePermission('Manage Device'),

            handler: function() {

                var win = new Zenoss.CommandWindow({

                    uids: Re: Overriding a page template in Zenoss 3.x,

                    target: 'run_predefined_command',

                    title: _t('Title in window')

                });

                win.show();

            }

        });

    }

    return result;

  };

});

  From a zenpack's configure.zcml

=============================

<!--  Add a command window for showing output from command run from organizer -->

   <browser:page

    class=".command.PredefinedCommandView"

    name="run_predefined_command"

    for="*"

    permission="zenoss.ManageDevice"

    />

From a file called 'command.py' in the zp dir:

=============================

import Globals

from Products.ZenUtils.jsonutils import unjson

from Products.Zuul import getFacade

from Products.ZenUI3.browser.streaming import StreamingView

class PredefinedCommandView(StreamingView):

    def stream(self):

        data = unjson(self.request.get('data'))

        uids = data['uids']

        facade = getFacade('device', self.context)

        organizer = facade._getObject(uids[0])

        libexec = os.path.join(os.path.dirname(__file__), 'libexec')

        predefinedCmd = [

             libexec + '/mywrapper_script',

            'arg1', 'arg2'

        ]

        result = executeCommand(predefinedCmd, None, None)

        return result

kells

Any pointers on where you would go hunting for examples of creating a new device component in the UI?

For example, user wants to create a ZP for a new ILO-enabled network hardware device and wants a component that displays its special management components or something peculiar. How would one go about adding a totally new component in? Think of how 'interfaces' or 'file systems' 'Windows Services' is implemented in 3.x - but making your own new component UI section.

This was a question I heard from a few ZP devs.

The following add-on convo took place on email and I thought it would be good to include here:

dcarmean asked:

Where does zuul fit in this?  Are "routers" part of zuul or extjs or?

kkerney replied:

The Zuul directory has a lot of the new UI and Zope 3 style Zope Component Architecture (ZCA) pieces.  Zuul isn't really a thing, it's just a directory (ok, technically a Zope product, but whatever).  The name Zuul came from Ghostbusters.

ExtJS - a JS library that can wrap things like YUI and Mochikit, etc etc
router - the published API of what can be used (its executable code)
facade - the supporting code behind the routers