krisrice/ords_pool_status.html

## ords_pool_status.html
<html>
  <head>
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hack-font@3/build/web/hack-subset.css">
  <script>

var refreshInteval;
function poolListing(){
    // populate the list of pools

      fetch('http://localhost:8080/ords/_/instance-api/stable/database-pools-cache/',
            { headers: {'Authorization': 'Basic ' + btoa('klriceDBA:oracle')} }
           )
           .then(response => response.text())
           .then((response) => {
              items = JSON.parse(response).items;
              var pools = document.getElementById("pools");
              for( item in  items) {
                  pool = document.createElement("option")
                  pool.text =items[item].id
                  pool.value =items[item].links[0].href;
                  pools.add(pool);
              }
            });
            //
            // if change in pool cancel interval
            if ( refreshInteval ) {clearInterval(refreshInteval); }
            // update stats every 250ms

          refreshInteval = setInterval(reloadData, 250);
      //
    }
function reloadData(){

    // Get the pool data based on the select list of pools

      fetch(   document.getElementById('pools').selectedOptions[0].value,
              { headers: {'Authorization': 'Basic ' + btoa('klriceDBA:oracle')} })
        .then(response => response.text())
        .then((response) => {plot(JSON.parse(response))});
}


function updateTable(data){
  Object.keys(data.statistics).forEach(function(key) {
      var value = data.statistics[key];
      var old = document.getElementById(key + "_value").innerHTML;

      // Mark up changes to be obvious
      if ( value != old ) {
        document.getElementById(key + "_value").innerHTML =  value;
        document.getElementById(key + "_value").style.color ="red";
        document.getElementById(key + "_value").style.fontSize ="xx-large";
      } else {
        document.getElementById(key + "_value").innerHTML =   value ;
        document.getElementById(key + "_value").style.color ="black";
        document.getElementById(key + "_value").style.fontSize ="initial";
      }

    });
}

function plot(data){
    if ( ! document.getElementById('stats') ) {
      // Make the new Table
            txt = "<table id='stats' border='0'>";
            Object.keys(data.statistics).forEach(function(key) {
              var value = data.statistics[key];
              txt += "<tr><td style='font-size:xx-large;' id='" + key + "'>" + key + "</td><td id='"+key+"_value' style='font-family:Hack;'>" + value+ "</td></tr>";
            });
            txt += "</table>";
            document.getElementById("poolinfo").innerHTML = txt;
      } else {
      // Update the values
        updateTable(data);
    }
  }


poolListing();

  </script>
  </head>
  <body>
    <div  style='font-family:Hack;font-size:xx-large;'>Choose a Pool to monitor:<select style='font-family:Hack;font-size:xx-large;' name="pools" id="pools" onchange="pickAPool()"></select></div>
    <div id="poolinfo"></div>
  </body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hack-font@3/build/web/hack-subset.css">
	<script>

	var refreshInteval;
	function poolListing(){
	// populate the list of pools

	fetch('http://localhost:8080/ords/_/instance-api/stable/database-pools-cache/',
	{ headers: {'Authorization': 'Basic ' + btoa('klriceDBA:oracle')} }
	)
	.then(response => response.text())
	.then((response) => {
	items = JSON.parse(response).items;
	var pools = document.getElementById("pools");
	for( item in items) {
	pool = document.createElement("option")
	pool.text =items[item].id
	pool.value =items[item].links[0].href;
	pools.add(pool);
	}
	});
	//
	// if change in pool cancel interval
	if ( refreshInteval ) {clearInterval(refreshInteval); }
	// update stats every 250ms

	refreshInteval = setInterval(reloadData, 250);
	//
	}
	function reloadData(){

	// Get the pool data based on the select list of pools

	fetch( document.getElementById('pools').selectedOptions[0].value,
	{ headers: {'Authorization': 'Basic ' + btoa('klriceDBA:oracle')} })
	.then(response => response.text())
	.then((response) => {plot(JSON.parse(response))});
	}


	function updateTable(data){
	Object.keys(data.statistics).forEach(function(key) {
	var value = data.statistics[key];
	var old = document.getElementById(key + "_value").innerHTML;

	// Mark up changes to be obvious
	if ( value != old ) {
	document.getElementById(key + "_value").innerHTML = value;
	document.getElementById(key + "_value").style.color ="red";
	document.getElementById(key + "_value").style.fontSize ="xx-large";
	} else {
	document.getElementById(key + "_value").innerHTML = value ;
	document.getElementById(key + "_value").style.color ="black";
	document.getElementById(key + "_value").style.fontSize ="initial";
	}

	});
	}

	function plot(data){
	if ( ! document.getElementById('stats') ) {
	// Make the new Table
	txt = "<table id='stats' border='0'>";
	Object.keys(data.statistics).forEach(function(key) {
	var value = data.statistics[key];
	txt += "<tr><td style='font-size:xx-large;' id='" + key + "'>" + key + "</td><td id='"+key+"_value' style='font-family:Hack;'>" + value+ "</td></tr>";
	});
	txt += "</table>";
	document.getElementById("poolinfo").innerHTML = txt;
	} else {
	// Update the values
	updateTable(data);
	}
	}


	poolListing();

	</script>
	</head>
	<body>
	<div style='font-family:Hack;font-size:xx-large;'>Choose a Pool to monitor:<select style='font-family:Hack;font-size:xx-large;' name="pools" id="pools" onchange="pickAPool()"></select></div>
	<div id="poolinfo"></div>
	</body>
	</html>