27 Replies Latest reply on Feb 10, 2017 1:27 PM by nickzourdos

    The view for our Help Desk

    nickzourdos

      Spent a lot of time with customizations from the Content Exchange! I had to create a second site in IIS in order to bump the font to a readable size for the monitors that the Help Desk uses, and to do some other quirky formatting tricks like the highlighting for nodes that are down. Overall I think it turned out pretty well! I run the browser in F11 fullscreen instead of NOC mode It gives you just a liiiiitle extra space.

        • Re: The view for our Help Desk
          alexslv

          Hi Nick,

           

          I really like your dashboard. You have inspired me with some ideas.

           

          few questions if I may...

           

          1. It appears that you have managed to enlarge font a little bit. If this is the case - how did you do it?

          2. Would you be able to share how did you build "School outages" resource?

           

          Thanks,

          Alex

            • Re: The view for our Help Desk
              nickzourdos

              Hi Alex,

               

              I had to create a new website in IIS (make a duplicate of your SolarWinds site), then edit the C:\inetpub\WEBSITE\Orion\Styles\Resources.css file. You're looking for the .ResourceWrapper class. Here is mine, the bolded areas are my modifications:

              .ResourceWrapper table tbody tr td, .ResourceWrapper table tbody tr th

              {

                  border-bottom: 1px solid @{R=Core.LiveCss;K=GrooveColor};

                  font-family: Arial, Verdana, Helvetica, sans-serif;

                      font-size: 11pt;

                      font-weight: bold;

                  margin-bottom: 0px;

                  margin-top: 0px

              }

              As for the outage resource, you can find that here.

               

              Good luck!

              1 of 1 people found this helpful
            • Re: The view for our Help Desk
              orionfan

              Looks great!  How did you do the Top 20 Schools by Bandwidth Usage resource?

                • Re: The view for our Help Desk
                  nickzourdos

                  Thanks! I'm using a "Top XX Interfaces by Traffic" resource and using this SQL filter:

                  Type = 'VPN' AND InterfaceName Like '*outside*'

                  "Type" is a custom property and 'VPN' is assigned to all of our ASA's. The Outside interface gives me stats for their traffic in/out to the internet (more or less).

                • Re: The view for our Help Desk
                  haslini

                  Hi Nick, your NOC is really nice & impressive. im quite new in Network Monitoring & configuration here.. just want to ask you, how do you make the Service Center Internet - the radial gauges available in the NPM page? normally, this radial gauges found in 'outside' interfaces [isp lines] page that we've monitored right? i have 2 'outside' interfaces, how to combine [to allocate them side by side like you'd done] & put them in the NPM Summary page? i have tried to find the items in the 'customize page' but cannot find this radial gauges for specific interface.

                   

                  your kind assistance is greatly appreciated.

                    • Re: The view for our Help Desk
                      nickzourdos

                      Hello!

                       

                      I was only able to accomplish this because of the Custom HTML resource. It was a very interesting project...

                       

                      Open the first interface you want to have gauges for, and add the "Percent Utilization - Radial Gauges" resource to the view. You should be able to click the title of the resource in order to display it on a new tab/page. Right click > view source for the page and copy everything into your favorite text/code editor. There's a lot of code there, and believe it or not a lot of it is expendable. It took me a while to cut it down to just the critical bits, but here is the code I used in my Custom HTML resource. I've bolded the key areas that you will want to modify to fit your specific environment. The 4795 and 5473 numbers are the Node ID's for the two interfaces.

                       

                      <!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                      <html xmlns="http://www.w3.org/1999/xhtml">

                       

                      <head>

                      <meta http-equiv="REFRESH" content="300; URL=&#39;http://10.1.0.145/Orion/DetachResource.aspx?ResourceID=1409&NetObject='" />

                      </head>

                       

                      <body id="ctl00_Body">

                      <script type="text/javascript">SW.Core.Loader._cbLoaded('msajax');</script>

                              <div id="ctl00_BodyContent_divContainer" style="width:200px;margin-left:0px;">

                       

                            <center>

                              <br />

                              <table class="GaugeTable" align="center" style="width:100%">

                                  <tr>

                                      <td>

                                          <a href="/Orion/Charts/CustomChart.aspx?chartName=MMAvgUtil&NetObject=I:4795&Period=Today" target="_blank">

                                              <a href="/Orion/Charts/CustomChart.aspx?chartName=MMAvgUtil&NetObject=I:4795&Period=Today"><img src="/Orion/NetPerfMon/Gauge.aspx?Scale=65&Style=Black Eye&Property=RECV % Utilization&NetObject=I:4795&GaugeName=RECVUtilization&GaugeType=Radial&Units= %&Min=0&Max=100" /></a>

                                          </a>

                                      </td>

                                      <td>

                                          <a href="/Orion/Charts/CustomChart.aspx?chartName=MMAvgUtil&NetObject=I:4795&Period=Today" target="_blank">

                                              <a href="/Orion/Charts/CustomChart.aspx?chartName=MMAvgUtil&NetObject=I:4795&Period=Today"><img src="/Orion/NetPerfMon/Gauge.aspx?Scale=65&Style=Black Eye&Property=XMIT % Utilization&NetObject=I:4795&GaugeName=XMITUtilization&GaugeType=Radial&Units= %&Min=0&Max=100" /></a>

                                          </a>

                                      </td>

                       

                                      <td style="padding-right: 5px">

                                      </td>

                                      <td style="padding-right: 1px" bgcolor="#888888">

                                      </td>

                                      <td style="padding-right: 2px">

                                      </td>

                       

                                      <td>

                                          <a href="/Orion/Charts/CustomChart.aspx?chartName=MMAvgUtil&NetObject=I:5473&Period=Today" target="_blank">

                                              <a href="/Orion/Charts/CustomChart.aspx?chartName=MMAvgUtil&NetObject=I:5473&Period=Today"><img src="/Orion/NetPerfMon/Gauge.aspx?Scale=65&Style=Black Eye&Property=RECV % Utilization&NetObject=I:5473&GaugeName=RECVUtilization&GaugeType=Radial&Units= %&Min=0&Max=100" /></a>

                                          </a>

                                      </td>

                                      <td>

                                          <a href="/Orion/Charts/CustomChart.aspx?chartName=MMAvgUtil&NetObject=I:5473&Period=Today" target="_blank">

                                              <a href="/Orion/Charts/CustomChart.aspx?chartName=MMAvgUtil&NetObject=I:5473&Period=Today"><img src="/Orion/NetPerfMon/Gauge.aspx?Scale=65&Style=Black Eye&Property=XMIT % Utilization&NetObject=I:5473&GaugeName=XMITUtilization&GaugeType=Radial&Units= %&Min=0&Max=100" /></a>

                                          </a>

                                      </td>

                                  </tr>

                             </table>

                              </center>

                          </div>

                      </div>

                      </div>

                          </form>

                      </body>

                      </html>

                       

                      I'm sure there are dozens on mistakes in this code, but I'm no web designer

                    • Re: The view for our Help Desk
                      prowessa

                      nickzourdos Really Nice NOC. The dashboard is wow.

                      • Re: The view for our Help Desk
                        shreyasathavale

                        The Dashborad is just too amazing..very effective and simple, especially the nodes down tab.

                        • Re: The view for our Help Desk
                          rschroeder

                          nickzourdos, I like your view, and would like to see how you built the lower right section for school outages.  In particular, I like the hours & minutes features in the right two columns.  Would you be so kind as to share the build info behind that section so I could replicate it for some of my WAN sites?

                          • Re: The view for our Help Desk
                            morrack2000

                            Ok, this is an awesome thread, and serious kudo's to the OP for a great NOC view and tons of great advice.  I'm gonna throw a curve in that should make everyone's day - the NOCPageHeader.css file is loaded AFTER the Resources.css file, which means (drumroll please)..... you can override very specific elements for NOC pages only.  Like, say, table font size.  So, without having to setup a second IIS orion website, just paste the following to the very bottom of your main production NOCPageHeader.css file and be happy:

                             

                            .ResourceWrapper table tbody tr td, .ResourceWrapper table tbody tr th

                            {

                                /* themeable */

                                font-family : Arial, Helvetica, sans-serif;

                                font-size : 11pt;

                                font-weight: bold;

                                text-transform: uppercase;

                            }

                             

                            It will overwrite these elements that were previously defined in Resources.css, but ONLY on pages that ALSO load the NOCPageHeader.css file (ie, NOC view pages).  Customize the above to suit.

                             

                            Cheers!

                            2 of 2 people found this helpful
                            • Re: The view for our Help Desk
                              Richard Phillips

                              Nice look and great information.