SchizoDuckie/phpmytop.php

## phpmytop.php
<?php
/**
 * PHPMyTop clone #1000 by Jelle Ursem
 * One-file MyTop clone with divshot and jquery.
 * Shows you the queries currently running in your mysql database using show full processlist
 * Keeps prepending to the log of individual queries executed with no wrapping.
 *
 * Hover the Id of a query to see the kill option, click it to send kill $queryid to server.
 *
 * Howto:
 * Change config settings below.
 * Point browser to this file.
 */
error_reporting(E_ALL);
$user = 'root';
$pass = '#yoarpasshere';
$host = 'localhost';
$database = false; // query will run over all db's

if(stripos($_SERVER['HTTP_ACCEPT'],'json') !== false) {
  $conn = mysql_connect($host, $user, $pass);
  if($database) {
    mysql_select_db($database);
  }
  $query = "show full processlist";

  $output = array();
  $handle = mysql_query($query);
  while ($res = mysql_fetch_assoc($handle)) {
    if($res['Info'] === null) { continue; }
    if($res['Info'] === 'show full processlist') { continue; }
    $output[] = $res;
  }
  header("content-type: application/json");

  echo(json_encode($output));
  flush();
  die();

} else {
  if(isset($_GET['kill'])) {
    mysql_query("kill ".intval($_GET['kill']));
    die("Killed.");
  }
}
?>
<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <title>Mysql QueryLog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
  <style>

    #mytoplog tr td:first-child:hover {
      text-decoration: strike-trough;
      cursor:pointer;
      color:red;
    }
    #mytoplog tr td:first-child:hover:after {
      text-decoration: underline;
      content: "Kill";
      clear:both;
      display:block;
      clear:both;
      margin-top: 15px;
    }
    #mytoplog tr td:last-child {
      white-space: pre-wrap;
      -webkit-user-select: text;
    }
    td:last-child a {
      float: right;
      display: inline-block;
      top: 5px;
      right: 5px;
    }
    </style>
  </head>
  <body>

    <div class="container" style='width:90%; margin: 20px;'>
      <div class="alert alert-info hidden-phone">
        <a class="close" data-dismiss="alert">×</a>
        <b>The log below shows running queries and will be updated using ajax requests.</b>
      </div>

      <div class="row"></div>
      <table class="table table-striped table-condensed">
          <thead>
              <tr>
                  <th>ID</th>
                  <th>User</th>
                  <th>Host</th>
                  <th>Database</th>
                  <th>Command</th>
                  <th>Time</th>
                  <th>State</th>
                  <th>Info</th>
                </tr>
        </tbody>
        <tbody id="mytoplog"></tbody>
      </table>
    </div>

    <script type="text/javascript">
      Object.prototype.values = function(o){
             if (o !== Object(o)) return false;
             var ret=[],p;
             for(p in o) if(Object.prototype.hasOwnProperty.call(o,p)) ret.push(o[p]);
             return ret;
      }

      $(document).ready(function() {
        startPolling();
      });

      function startPolling() {
        $.getJSON(document.location.href.split('?')[0]+'?t='+new Date().getTime(), function(res) {
          if(res.length == 0) {
            $('#mytoplog').html('');
          }
          $(res).each(function(id,el) {
            if($("td[data-id='"+el.Id+"']").length == 0) {
              $('#mytoplog').prepend("<tr><td data-id='"+el.Id+"' onclick='kill(this)'>"+Object.values(el).join('</td><td>')+"</td></tr>");
            } else {
              $("td[data-id='"+el.Id+"']").parent('tr').html("<td data-id='"+el.Id+"' onclick='kill(this)'>"+Object.values(el).join('</td><td>')+"</td>");
            }
          });
        });
        setTimeout(startPolling, 500);
      }

      function kill(el) { /** Kill the query */
        var id = $(el).attr('data-id');
        $.get(document.location.href+"?kill="+id);
      }
    </script>
  </body>

</html>
	<?php
	/**
	* PHPMyTop clone #1000 by Jelle Ursem
	* One-file MyTop clone with divshot and jquery.
	* Shows you the queries currently running in your mysql database using show full processlist
	* Keeps prepending to the log of individual queries executed with no wrapping.
	*
	* Hover the Id of a query to see the kill option, click it to send kill $queryid to server.
	*
	* Howto:
	* Change config settings below.
	* Point browser to this file.
	*/
	error_reporting(E_ALL);
	$user = 'root';
	$pass = '#yoarpasshere';
	$host = 'localhost';
	$database = false; // query will run over all db's

	if(stripos($_SERVER['HTTP_ACCEPT'],'json') !== false) {
	$conn = mysql_connect($host, $user, $pass);
	if($database) {
	mysql_select_db($database);
	}
	$query = "show full processlist";

	$output = array();
	$handle = mysql_query($query);
	while ($res = mysql_fetch_assoc($handle)) {
	if($res['Info'] === null) { continue; }
	if($res['Info'] === 'show full processlist') { continue; }
	$output[] = $res;
	}
	header("content-type: application/json");

	echo(json_encode($output));
	flush();
	die();

	} else {
	if(isset($_GET['kill'])) {
	mysql_query("kill ".intval($_GET['kill']));
	die("Killed.");
	}
	}
	?>
	<!doctype html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
	<title>Mysql QueryLog</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
	<style>

	#mytoplog tr td:first-child:hover {
	text-decoration: strike-trough;
	cursor:pointer;
	color:red;
	}
	#mytoplog tr td:first-child:hover:after {
	text-decoration: underline;
	content: "Kill";
	clear:both;
	display:block;
	clear:both;
	margin-top: 15px;
	}
	#mytoplog tr td:last-child {
	white-space: pre-wrap;
	-webkit-user-select: text;
	}
	td:last-child a {
	float: right;
	display: inline-block;
	top: 5px;
	right: 5px;
	}
	</style>
	</head>
	<body>

	<div class="container" style='width:90%; margin: 20px;'>
	<div class="alert alert-info hidden-phone">
	<a class="close" data-dismiss="alert">×</a>
	<b>The log below shows running queries and will be updated using ajax requests.</b>
	</div>

	<div class="row"></div>
	<table class="table table-striped table-condensed">
	<thead>
	<tr>
	<th>ID</th>
	<th>User</th>
	<th>Host</th>
	<th>Database</th>
	<th>Command</th>
	<th>Time</th>
	<th>State</th>
	<th>Info</th>
	</tr>
	</tbody>
	<tbody id="mytoplog"></tbody>
	</table>
	</div>

	<script type="text/javascript">
	Object.prototype.values = function(o){
	if (o !== Object(o)) return false;
	var ret=[],p;
	for(p in o) if(Object.prototype.hasOwnProperty.call(o,p)) ret.push(o[p]);
	return ret;
	}

	$(document).ready(function() {
	startPolling();
	});

	function startPolling() {
	$.getJSON(document.location.href.split('?')[0]+'?t='+new Date().getTime(), function(res) {
	if(res.length == 0) {
	$('#mytoplog').html('');
	}
	$(res).each(function(id,el) {
	if($("td[data-id='"+el.Id+"']").length == 0) {
	$('#mytoplog').prepend("<tr><td data-id='"+el.Id+"' onclick='kill(this)'>"+Object.values(el).join('</td><td>')+"</td></tr>");
	} else {
	$("td[data-id='"+el.Id+"']").parent('tr').html("<td data-id='"+el.Id+"' onclick='kill(this)'>"+Object.values(el).join('</td><td>')+"</td>");
	}
	});
	});
	setTimeout(startPolling, 500);
	}

	function kill(el) { /** Kill the query */
	var id = $(el).attr('data-id');
	$.get(document.location.href+"?kill="+id);
	}
	</script>
	</body>

	</html>