Skip navigation
3258 Views 3 Replies Latest reply: Aug 20, 2012 12:23 PM by giocar RSS
jshank Rank: White Belt 18 posts since
Apr 15, 2008
Currently Being Moderated

Sep 21, 2011 3:49 PM

Adding Custom Properties to Device Overview

I am attempting to add a circuit id field to my Zenoss 3.2 installation. I was able to create a Custom Property by selecting Infrastructure -> Devices, highlighting Device Classes (the root of the tree), Details, Custom Schema and then adding a string type of cCircuitID. I then populated this field through the Custom Properties option on the left side of the device detail screen for each of my devices.

 

My first goal is to display the cCircuitID in a more visible place on the main device overview page above the Rack Slot field. I spent hours looking through the forums, developer docs and zport/manage/zenmodel pages trying to find out where to customize the device overview page. From another discussion, Overriding a page template in Zenoss 3.x, it appears that interface design has been mostly removed from Zope and into JS pages. specifically to the Products/ZenUI3/browser/resources/js/zenoss/DeviceOverviewPanel.js file.

 

My questions are:

  1. Is there a location that overrides these files in order to preserve upgradability?
  2. I changed Rack to Racks in the DeviceOverviewPanel.js file and it didn't change in the UI, is there a cache?
  3. How does one reference a custom property in the javascript?

 

This is the code for Rack Slot

items: [{
                            fieldLabel: _t('Rack then Slot'),
                            name: 'rackSlot',
                            xtype: 'textfield'
                        },{
                            xtype: 'clicktoeditnolink',
                            listeners: {
                                labelclick: function(p){
                                    editCollector(this.getValues(), this.contextUid);
                                },
                                scope: this
 

 

Thank you very much in advance for any guidance on this topic.

  • dg1101 Newbie 3 posts since
    Aug 16, 2012
    Currently Being Moderated
    1. Aug 20, 2012 11:27 AM (in response to jshank)
    Re: Adding Custom Properties to Device Overview

    Apologies for resurrecting an old thread - but did you find a solution to this?

     

    Thanks,

  • giocar Newbie 2 posts since
    May 23, 2012
    Currently Being Moderated
    3. Aug 20, 2012 12:23 PM (in response to jshank)
    Re: Adding Custom Properties to Device Overview

    Hello,

     

    I may have a solution. I give you the code to change (i.e. removinf 2 field and adding a new one with my own values) the first (from left) panel, where uptime is.

    Depending from your Zenoss version, you have to restart the some daemons to see the UI changes.

    If you need to change other panels, you must find the ID and declare it, as I did for DEVICE_OVERVIEW_ID = ....

    I hope this will help.

     

    Steps:

    - Add a file in the js directory (in my example: browser/resources/js/devicedetails.js). The code is below.

    - use it in browser/configure.zcml adding the following code:

    <viewlet

            name="js-mydet"

            paths="/++resource++<your resourceDirectory name>/js/devicedetails.js"

            weight="9"

            for="..MyDevice.MyDevice"

            manager="Products.ZenUI3.browser.interfaces.IJavaScriptSrcManager"

            class="Products.ZenUI3.browser.javascript.JavaScriptSrcBundleViewlet"

            permission="zope2.Public"

            />

     

    ==== js file ====

     

    Ext.onReady(function() {

     

        DEVICE_OVERVIEW_ID = 'deviceoverviewpanel_summary';

     

        // first from left panel part: overview: my changes

        var modifyDeviceOverview = function(overview) {

            overview = Ext.getCmp(DEVICE_OVERVIEW_ID);

            overview.removeField('locking');

            overview.removeField('memory');

            overview.addField({

                name:'mytotalMemory',

                fieldLabel: _t('TotalMemory'),

                setRawValue: function(mytotalMemory) {

                    var v = 'None';

                    if (mytotalMemory) {

                        v = Zenoss.render.memory(mytotalMemory)

                    }

                    Zenoss.DisplayField.superclass.setRawValue.call(this, v);

                }

            });

        };

        Ext.ComponentMgr.onAvailable(DEVICE_OVERVIEW_ID, modifyDeviceOverview)

    });

More Like This

  • Retrieving data ...

Legend

  • Correct Answers - 4 points
  • Helpful Answers - 2 points