How to make a pingdom widget in the new Orion Modern Dashboard (2020.2 RC)

So while we all await both the release of hopefully a native widget and more integration with Orion I thought why not make a widget showcasing what the new modern dashboard can look like?

To start with getting this info in Orion go to "add a node"

  1. Add a node with address: api.pingdom.com.

  2. Set the node to "external" (this way it won't alert you if it goes down).

  3. Click submit.

  4. You'll now be looking at the node view. Hit the "API Poller Management" button and create a new one.

  5. In the next screen enter "https://api.pingdom.com/api/3.1/checks" under Request URL.

  6. Head over to https://my.pingdom.com/app/api-tokens and click "Add API Token".

    1. Choose read only.
    2. Copy down the API token someplace safe.

  7. Under Headers fill in "Authorization" under name and then "Bearer <your API token>"

  8. Click "Send Request".

  9. You should now see a nice array of metrics.

  10. Click on "checks" to expand it.

  11. Choose to monitor lastresponsetime for each separate check under the array.
    monitorping.png

  12. The list of what's monitored will populate on the right side of the screen.

  13. When you're done click "save".

  14. Now you'll note a new block on the api.pingdom.com node called "API Pollers" that should have each one of your checks listed with ping displayed.

  15. Head over to your new "modern dashboard" you want a pingdom widget displayed on. 

  16. Create a new Table widget. 
    1. Name it.
    2. Use the following SWQL Query to display that poller (change the "TOP 10" to match the number of monitors you ended up with):
SELECT TOP 10 DisplayName, ThresholdRule, DetailsUrl, Metric, Status FROM Cortex.Orion.ApiPoller.ValueToMonitor​​ WHERE RelatedAPiPoller = <pollerID that shows in the url for the API poll e.g. 45422>



  • Now let's populate it!

  • Value 1 - Sitename (or whatever label you'd prefer)
    value-sitename.png

  1. Add a new value. Name it "Latency" 
    value-latency.png
  2. Make sure everything in the preview looks right and then click save. 

When it's all said and done you now have: 

wigetdone.png

  • Status of up/down shown as an icon next to the clickable displayname of each monitor
  • Latency, complete with a linear graph.
  • Thresholds that warn when pings get a little too high.
Parents
  • Here's a "classic dashboard" widget. It autolinks to the perfstack data for each monitored check.

    Snag_53a0d996.png

    <div id="status_table" class="sw-rpt-tbl-frame">
    <script>
    
    //Pingdom Stats Widget 0.75 written by Chris O'Rourke May 22nd, 2020. 
    //Change the TOP count to match the number of displayed results you want. 
    	var swql="SELECT TOP 30 DisplayName, DetailsUrl, Metric, Status
    FROM Cortex.Orion.ApiPoller.ValueToMonitor WHERE RelatedApiPoller = <pollerID as shown in the api url>"
    
    	var params = JSON.stringify({
    		query: swql,
    		parameters: {
    		}
    	});
    	
    	$.ajax({
    		type: 'POST',
    		url: '/Orion/Services/Information.asmx/QueryWithParameters',
    		data: params,
    		contentType: "application/json; charset=utf-8",
    		dataType: "json",
    		success: function(response) {
    			//console.log(response.d.Rows);
    			
    			//Massage variables for output
    			var cleanVars = [];
    			for(var i=0; i < response.d.Rows.length; i++){
    				cleanVars[i] = {};
    				cleanVars[i]['service'] = response.d.Rows[i][0];
    				cleanVars[i]['link'] = response.d.Rows[i][1];
    				cleanVars[i]['ping'] = response.d.Rows[i][2];
    				cleanVars[i]['status'] = response.d.Rows[i][3];
    			}
    			//console.log(cleanVars);
    			
    			
    			//Initial Table and Headers
    			var statusTable = "<table class='sw-custom-query-table NeedsZebraStripes' style='table-layout: fixed; width: 100%;' cellpadding='2' cellspacing='0'>";
    			statusTable += "<thead><tr class='HeaderRow'>";
    			statusTable += "<th class='ReportHeader' style='font-weight: bold; font-size: 12px; text-align: left;'>Service</th>";
    			statusTable += "<th class='ReportHeader' style='font-weight: bold; font-size: 12px; text-align: left;'>Ping</th>";
    			statusTable += "</tr></thead>";
    			
    			//Add Services to Table
    			for(var i=0; i < cleanVars.length; i++){
    				statusTable += "<tr>";
    				
    				statusTable += "<td>";
    				
    				if (cleanVars[i]['status'] == '1'){
    					statusTable += "<img src='/Orion/images/StatusIcons/Small-up.gif' alt='Node Status Okay' style='vertical-align:bottom;margin-right:8px;'>";
    				} else {
    					statusTable += "<img src='/Orion/images/StatusIcons/Small-down.gif' alt='Node Status Down' style='vertical-align:bottom; margin-right:8px;'>";
    
    				}
    				
    				statusTable += "<a href='" + cleanVars[i]['link'] + "'>" + cleanVars[i]['service'] + "</a></td>";
    				
    				statusTable += "<td>" + cleanVars[i]['ping'] + " ms </td>";
    				
    				statusTable += "</tr>";
    				
    			}			
    			
    			
    			//Table Close
    			statusTable += "</table>";
    			
    			
    			//Grab Element from DOM and Write
    			var table = document.getElementById('status_table');
    			table.innerHTML = statusTable;
    		}
    	})
    </script>
    </div>
  • Hi, Is it working on 2020.2.4 ? I tried but "Cortex.Orion.ApiPoller.ValueToMonitor" table was not found. 

Reply Children
No Data