20 Replies Latest reply on Jul 2, 2018 11:46 AM by jblankjblank

    Simple NetPath Summary Widget

    cobrien

      Want a simple summary of your NetPath services?  You can do it with Custom Tile.  It comes out like this:

       

      Clicking on any of the statuses or numbers will bring you to that list with naming convention <Service Name> (<Probe Name>):

       

      Clicking on a path will take you to the path visualization NetPath is known for.

       

      To get this yourself, customize a page and add the "custom tile" widget:

       

      After placing on the page, click "Edit" in the top right of the widget and select one of the NetPath options under Entity Filter:

       

       

      If you want to get fancy, you can add an advanced entity filter and filter to a specific, widely monitored Service, or all sorts of other pivots:

       

      Add several of these to a page to build a dashboard.  It's a neat use of a common resource.  Thanks to jblankjblank and his team for creating this and showing me this NetPath specific customization.

        • Re: Simple NetPath Summary Widget
          mesverrum

          Nice, I'm surprised I missed the announcement of this new resource in Orion.

           

          I've been playing with the tiles in EOC for a bit and the biggest hurdle I had run into there with them was that I can build one tile, and that's good, and I can build 10 tiles and that's a little tedious, but then my clients see the view I put together and they are like, oh hey can you build me out one of those for every X in my environment.  Now I have to build them out hundreds at a time and there is no good built in way to do this in bulk.  Just as a simple example, my clients would want a tile for each of their locations... for 100+ locations, and every time they add a new site they need to remember to build a new tile for it.  I'd like to see a built in way to just set up a view and have it automatically generate a tile for each distinct value of this property (which is basically what I'm doing in powershell these days but clients don't want to have to learn to master SQL/SWQL/powershell/and the API just to avoid sitting in front of the screen for 10 hours building these things.  I think it was wluther who had done a few posts a while back describing his various struggles with setting up views that add new charts automatically as needed.

          1 of 1 people found this helpful
          • Re: Simple NetPath Summary Widget
            wluther

            Also, y'all are doing a great job with these new simplified, summary view, widgets. These are great! Big information in a tiny space. (Health summary too, I think) Great stuff!

            • Re: Simple NetPath Summary Widget
              Raul Gonzalez

              It would be great if we could change the size (and font) of the info displayed in the custom tile. Lots of customers want to see (mainly in their NOC views) big numbers showing number of devices or apps down, with problems, etc. This custom tile resources looks really useful, but it is still not perfect.

               

              At the moment, to achieve this, I'm using custom HTML with REST API queries, but as mesverrum mentioned, customers don't want to be scripting ninjas to know how to modify these resources.

                • Re: Simple NetPath Summary Widget
                  wluther

                  conguir Will you post an example of your HTML/REST method? I'm always curious to learn how others accomplish their out of the box solutions.

                   

                   

                  Thank you,

                   

                  -Will

                    • Re: Simple NetPath Summary Widget
                      Raul Gonzalez

                      Not a problem. This is an example of a treemap showing top devices by alerts triggered.

                       

                      Note: the SWQL query to get the data is a bit 'peculiar' due to the way this resource works. Basically this resources allows you to have nested groups, therefore you need a 'first level' of grouping where the parent of this group has to be null:

                       

                      <html>

                        <head>

                          <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

                          <script type="text/javascript">

                            google.charts.load('current', {'packages':['treemap']});

                            google.charts.setOnLoadCallback(drawChart);

                            function drawChart() {

                              var results = [['Name','Global','Alerts']];

                      var query = JSON.stringify({query:"select distinct 'Global' as [c0], site as [c1], 0 as [c2] from orion.nodescustomproperties where site is null union ( select n.caption + ' (' + ToString(count(*)) + ' alerts)'  as[c0], 'Global' as [c1], count(*) as [c2] from orion.alerthistory ah inner join orion.nodes n on n.nodeid = ah.alertobjects.relatednodeid group by n.caption)"});

                      $.ajax({

                      type: 'POST',

                      url: '/Orion/Services/Information.asmx/Query',

                      data: query,

                      contentType: "application/json; charset=utf-8",

                      dataType: "json",

                      async: false,

                      success: function (response) {

                      for(var i in response.d.Rows) {

                      results.push([response.d.Rows[i][0],response.d.Rows[i][1],response.d.Rows[i][2]]);

                      }

                      }

                      })

                      var data = google.visualization.arrayToDataTable(results);

                              tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

                              tree.draw(data, {

                                minColor: '#ff0',

                                midColor: '#f80',

                                maxColor: '#f00',

                                headerHeight: 15,

                                fontColor: 'black',

                                showScale: true

                              });

                            }

                          </script>

                        </head>

                        <body>

                          <div id="chart_div" style="width: 900px; height: 500px;"></div>

                        </body>

                      </html>

                       

                      This will look like this (I changed caption by nodeid)

                       

                      I posted some examples in my LinkedIn page: https://www.linkedin.com/feed/update/urn:li:activity:6416236602154106880

                      1 of 1 people found this helpful
                  • Re: Simple NetPath Summary Widget
                    Raul Gonzalez

                    Hi

                     

                    I've created a better version of the script, now when you click on the device, it shows you the top alert definitions for that device:

                     

                     

                    <html>

                      <head>

                        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

                        <script type="text/javascript">

                          google.charts.load('current', {'packages':['treemap']});

                          google.charts.setOnLoadCallback(drawChart);

                          function drawChart() {

                     

                     

                            var results = [['Name','Global','Alerts']];

                    var query = JSON.stringify({query:"select distinct 'Global' as [c0], site as [c1], 0 as [c2] from orion.nodescustomproperties where site is null union (select 'Node ' + ToString(n.nodeid) + ' (' + ToString(count(*)) + ' alerts)'  as[c0], 'Global' as [c1], count(*) as [c2] from orion.alerthistory ah inner join orion.nodes n on n.nodeid = ah.alertobjects.relatednodeid group by n.caption  union (select ah.alertobjects.AlertConfigurations.name + ' - Nodeid ' + ToString(n.nodeid) + ' (' +Tostring(count(*)) + ' alerts)' as [c0], s1.c0  as [c1], count(*) as [c2] from orion.alerthistory ah inner join orion.nodes n on n.nodeid = ah.alertobjects.relatednodeid inner join (select 'Node ' + ToString(n.nodeid) + ' (' + ToString(count(*)) + ' alerts)'  as [c0], n.nodeid as [nodeid] from orion.alerthistory ah inner join orion.nodes n on n.nodeid = ah.alertobjects.relatednodeid group by n.caption) s1 on s1.nodeid = n.nodeid group by n.caption, ah.alertobjects.AlertConfigurations.name ))"});

                    $.ajax({

                    type: 'POST',

                    url: '/Orion/Services/Information.asmx/Query',

                    data: query,

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    async: false,

                    success: function (response) {

                    for(var i in response.d.Rows) {

                    results.push([response.d.Rows[i][0],response.d.Rows[i][1],response.d.Rows[i][2]]);

                    }

                    }

                    })

                     

                     

                    var data = google.visualization.arrayToDataTable(results);

                     

                     

                     

                     

                            tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

                     

                     

                            tree.draw(data, {

                              minColor: '#ff0',

                              midColor: '#f80',

                              maxColor: '#f00',

                              headerHeight: 15,

                              fontColor: 'black',

                              showScale: true

                            });

                     

                     

                          }

                        </script>

                      </head>

                      <body>

                        <div id="chart_div" style="width: 900px; height: 500px;"></div>

                      </body>

                    </html>

                    • Re: Simple NetPath Summary Widget
                      rschroeder

                      When did this become available?  With NPM 12.2?  Or 12.3?