Version 3

    When it comes to working on projects, I always feel I NEED to use all the desktop real estate I have available. As much as I love SolarWinds, we have always been at odds here. While I want to use every last pixel of my screens to view, and work with, my data, SolarWinds products tend to want to keep me boxed up, working in tiny little windows. Someday, however, we will all be on the same page, and we will be using every pixel possible on that page. Until then, this is how you can easily, and fairly safely, adjust how much scrolling and paging you are required to do. This simple walkthrough will show you a few places you can make tiny adjustments, and see giant results.

     

    ESTIMATED TIME TO INSTALL/PERFORM MODIFICATION: <10 Minutes

    DIFFICULTY LEVEL:1-Youngling

    1. Youngling(Easiest/Most Basic; no coding experience required, no config wizard required, no system restart required, no system downtime.)
    2. Padawan (Easy/Basic; no coding experience required, possible config wizard required, possible system/services restart required, limited/no downtime.)
    3. Jedi Knight (Moderately Difficult/Advanced; some coding experience required/recommended, config wizard required, possible system/services restart required, limited/short duration downtime.)
    4. Jedi Master (Most Difficult/Advanced; advanced coding experience required, config wizard required, system/services restarts required, 30+ minutes downtime/maintenance window recommended, and other things that I do not even know I would need to know, required...)

     

     

     

    Before we begin,

     

     

    PLEASE don't edit files without backing them up first.

    If you see a friend or co-worker making changes without backing up first, please alert the authorities.

    Friends don't let friends mod without backups.

     

     

     

    Also, please keep in mind, changes made to system files will revert back to default when running the config wizard.

     

     

     

    This walkthrough will use the "Manage Accounts" page as the running example.

     

    Let's start by seeing what things look like before we make any changes.

     

    In the screenshot above, you can see we can only work with 9 lines, AND we will need to be scrolling over as well. Being the lazy admin I am, this is totally unacceptable. I cannot spend my days clicking and scrolling through unnecessary adventures. I need to see all my datas on all my pixels.

     

     

    So, what kind of potential are we looking at/for? Well, that giant void looks like a good place to start. Additionally, look at the alignment of those column heading and table data. Those big gaps make it somewhat confusing to view the data when we are trying to put more on the screen at once. And, one final thing, I notice there are a few columns that simply do not apply to my needs, and are taking up my valuable screen real estate. (This surely does not apply to everyone, but it does to me, so it is here...)

     

     

     

     

    If it's not broke, then fix it until it is?

     

    Let's make our first adjustments. Open the following file in notepad++, or whatever letter changing tool you enjoy using.

    \inetpub\SolarWinds\Orion\Admin\Accounts\js\Accounts.js

     

    //

    //Adjusting the settings in the "\inetpub\SolarWinds\Orion\Admin\Accounts\js\Accounts.js" file should allow you to easily, and fairly safely, change the look and feel of the corresponding GUI/page.

    //This block of code is located between lines 314 and 344. Depending on previous versions, as well as future updates, these line numbers may change.

    //

                grid = new Ext.grid.GridPanel({
                    store: dataStore,
                    columns: [
                            selectorModel,
                            { header: '@{R=Core.Strings;K=WEBJS_AK0_9;E=js}', width: 200,align: 'center', sortable: true, dataIndex: 'Accounts.AccountID', renderer: renderAccountName },
                            //{ header: '@{R=Core.Strings;K=WEBJS_AK0_81;E=js}', width: 150, sortable: true, dataIndex: 'Accounts.AccountType', renderer: renderAccountType },
                            { header: '@{R=Core.Strings;K=WEBJS_VB0_23;E=js}', width: 105,align: 'center', sortable: true, dataIndex: 'Accounts.AccountEnabled', renderer: renderYesNo },
                            //{ header: '@{R=Core.Strings;K=WEBJS_AK0_82;E=js}', width: 175, sortable: true, dataIndex: 'Accounts.Expires', renderer: renderAccountField },
                            { header: '@{R=Core.Strings;K=WEBJS_AK0_83;E=js}', width: 175,align: 'center', sortable: true, dataIndex: 'Accounts.LastLogin', renderer: renderAccountField },
                            { header: '@{R=Core.Strings;K=WEBJS_AK0_84;E=js}', width: 205,align: 'center', sortable: true, dataIndex: 'Accounts.LimitationID', renderer: renderAccountField },
                            { header: '@{R=Core.Strings;K=WEBJS_AK0_85;E=js}', width: 150,align: 'center', sortable: true, dataIndex: 'Accounts.AllowAdmin', renderer: renderYesNo },
                            { header: '@{R=Core.Strings;K=WEBJS_AK0_86;E=js}', width: 130,align: 'center', sortable: true, dataIndex: 'Accounts.AllowNodeManagement', renderer: renderYesNo },
                            { header: '@{R=Core.Strings.2;K=WEBJS_MG0_1;E=js}', width: 130,align: 'center', sortable: true, dataIndex: 'Accounts.AllowMapManagement', renderer: renderYesNo },
                            { header: '@{R=Core.Strings;K=WEBJS_TM0_120;E=js}', width: 130,align: 'center', sortable: true, dataIndex: 'Accounts.AllowReportManagement', renderer: renderYesNo },
                            { header: '@{R=Core.Strings;K=WEBJS_SO0_99;E=js}', width: 130,align: 'center', sortable: true, dataIndex: 'Accounts.AllowAlertManagement', renderer: renderYesNo },
                            { header: '@{R=Core.Strings;K=XMLDATA_ED0_2;E=js}', width: 130,align: 'center', sortable: true, dataIndex: 'Accounts.AllowUnmanage', renderer: renderYesNo },
                            { header: '@{R=Core.Strings;K=XMLDATA_JV0_1;E=js}', width: 155,align: 'center', sortable: true, dataIndex: 'Accounts.AllowDisableAction', renderer: renderYesNo },
                            { header: '@{R=Core.Strings;K=XMLDATA_JV0_2;E=js}', width: 155,align: 'center', sortable: true, dataIndex: 'Accounts.AllowDisableAlert', renderer: renderYesNo },
                            { header: '@{R=Core.Strings;K=XMLDATA_JV0_3;E=js}', width: 155,align: 'center', sortable: true, dataIndex: 'Accounts.AllowDisableAllActions', renderer: renderYesNo },
                            { header: '@{R=Core.Strings;K=WEBJS_AK0_87;E=js}', width: 210,align: 'center', sortable: true, dataIndex: 'Accounts.AllowCustomize', renderer: renderYesNo }
                    ],
                    sm: selectorModel,
                    viewConfig: {
                        //set to true if you want to resize each column with the window resize.  False maintains existing column sizes.
                        forceFit: true,
                        emptyText: '@{R=Core.Strings;K=WEBJS_AK0_88;E=js}'
                    },
                    //width: 700,
                    height: 750,
                    stripeRows: true,
                    trackMouseOver: false,

    //

    //

    //

     

     

    Finding our center:

     

     

     

    //To "center" align the grid column(s), simply add the following to each line. (This will allow you to center some columns, while leaving other columns as they are.)

    //

    //,align: 'center'

    //

    //Here is the original line, BEFORE centering the column:

                            { header: '@{R=Core.Strings;K=WEBJS_AK0_9;E=js}', width: 200, sortable: true, dataIndex: 'Accounts.AccountID', renderer: renderAccountName },

    //

     

    //And here is the line, AFTER centering the column:

                            { header: '@{R=Core.Strings;K=WEBJS_AK0_9;E=js}', width: 200,align: 'center', sortable: true, dataIndex: 'Accounts.AccountID', renderer: renderAccountName },

    //

    Notice the subtle difference between the two "Admin Rights" columns above. While this may seem like too small of a change to notice, the results will all add up in the end.

     

     

     

    Now that we have found our center, let's do something about all that unnecessary scrolling. (Both horizontally and vertically)

     

    What are we supposed to do with this? Well, you're supposed to let the system work for you, not you for it.

    The following adjustments will assist us in "fixing" these column widths. (I mean, just look at all that wasted space a simple Yes/No takes up.)

     

     

    //These next few are very easy, as they are simply true/false, and numerical values.

    //Somewhere around line 338, you should find an option to automatically adjust the column width. This will shrink down the default size of each column, automatically making each column fit on the page. No more having to manually adjust the width of each column, only to come back and do it again next time.

    //

    //BEFORE:

                        forceFit: false,

    //

    //AFTER:

                        forceFit: true,

    //

     

    Scrollbar, we don't need no stinking scrollbar!!

     

     

    Now let's do something to remedy that vertical waste of space!

     

    //Somewhere around line 342, you should find the value for the height of the grid.

    //My default grid height was 350, so I changed the value to 750, and it fits my page perfectly.

    //

    //BEFORE:

                    height: 350,

    //

    //AFTER:

                    height: 750,

    //

     

    WHAT?!?! You mean we just went from 9 work lines to 24. After doing several maths, I have concluded that, at the very least, may have possibly, more than doubled our vertical space usage... (Still waiting on the official response from the maths station)

     

    Well, I reckon the story ends here... Or... now that we have saved so many seconds of work, we could go out and spend them all on another improvement...

     

     

     

    //

    //The last thing I changed was a nice little option that automatically highlights the entire row your cursor hovers over.

    //Nothing really special here, but I think it's nice to see the entire row I am working with, visibly different/standing out, from all the other rows.

    //Once again, nothing fancy here, just a simple true/false toggle.

    //

    //BEFORE:

                    trackMouseOver: false,

    //

    //AFTER:

                    trackMouseOver: true,

    //

    Note the line above, where the cursor is hovering over... Do you see how that line stands out just a bit more distinct than the others? This is what you get when you enable the "trackMouseOver" option.

     

     

    //

    //While this is nothing ground breaking, and is probably as far from the future as it could be, it allows me to adjust the little things I see on a daily basis, which makes my broken brain happy.

    //Additionally, I commented out a couple of columns too, as they don't really show me anything I need to see, and just take up more space.

    //

    Now, when it's all said and done, I can see EVERYTHING I need to see, all on a single page. No more viewing column data all scrunched up together. No more scrolling left and right to see every column for a user. No more viewing unnecessary columns. No more manually adjusting each column, every time I land on this page. And, most importantly, NO MORE TINY BOX!!

     

     

     

    Bonus/Fun Tid-Bit:

    I like how they actually have the universal "shift-multi-select" option on and working here... I just wish, as many others on Thwack, they would implement this functionality EVERYWHERE, across all modules, pages, products, settings, etc...

    Anything that can be selected should have this functionality.

     

     

     

     

     

    And this is where our journey ends...

    On a single page, able to view all columns, and easily follow along, knowing exactly which account(s) we are going to manage.

     

    Your 4k monitor can now use all the high tech space it has available.

    (Because 4k was invented to better read spreadsheets and other text based webpages, right?)

     

     

    //Remember, if you adjust anything in this default/system file, it WILL be reset when you run the config wizard to rebuild the website.

     

     

     

    Go out and explore the files of your SolarWinds. And remember, if you break something, you always have 2 outs... You can blame it on the network, as well as the server... Let those two argue about it while you fix what you broke.

     

    Try your skills on the manage custom properties page

    \inetpub\SolarWinds\Orion\Admin\js\ManageCPGrid.js

     

    //This is where you adjust the settings to allow the grid to expand to full screen. (or whatever size you need)

    //Roughly around line ~800

                var mainGridPanel = new Ext.Panel({
                    region: 'center',
                    split: true,
                    width: 1800,
                    height: 800,
                    layout: 'border',
                    collapsible: false,
                    items: [navPanel, grid],
                    cls: 'no-border'
                });

     

     

     

    For more ways to customize your SolarWinds environment, make sure to check out this link, by CourtesyIT

    How to do various customizations with your Solarwinds

     

     

     

    Thank you,

     

    -Will