Updating the UX of the module

amoebas · Sep 3, 2014 · 02b5dc5 · 02b5dc5
1 parent 748e5dd
commit 02b5dc5
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 125 deletions.
diff --git a/code/DBProfilerQuery.php b/code/DBProfilerQuery.php
@@ -2,8 +2,16 @@
 
 class DBProfilerQuery extends ViewableData {
 
+
+	/**
+	 *
+	 * @var string - select, delete, update, insert, show
+	 */
 	public $type = null;
 
+	/**
+	 * @var int
+	 */
 	protected $duplicates = 0;
 
 	/**
@@ -12,21 +20,30 @@ class DBProfilerQuery extends ViewableData {
 	 */
 	protected $stacktrace = null;
 
+	/**
+	 * @return bool
+	 */
 	public function canView() {
 		return true;
 	}
 
+	/**
+	 * @return string
+	 */
 	public function getTime() {
 		return sprintf("%0.1f", $this->time);
 	}
 
+	/**
+	 * @return string
+	 */
 	public function getBackgroundColor() {
 		return substr($this->hash,0,6);
 	}
 
 	/**
 	 *
-	 * @param array $trace
+	 * @param \DBStacktrace $trace
 	 */
 	public function setStacktrace(DBStacktrace $trace) {
 		$this->stacktrace = $trace;
@@ -54,22 +71,40 @@ public function getColor() {
 		return ($tot/3<128)?'fff':'000';
 	}
 
+	/**
+	 * @return mixed
+	 */
 	public function getSha1() {
 		return $this->hash;
 	}
 
+	/**
+	 * @return string
+	 */
 	public function getQuerySummary() {
-		return substr($this->query,0,80);
+		if(strlen($this->query)<80) {
+			return false;
+		}
+		return substr($this->query,0,80) . '...';
 	}
 
+	/**
+	 * @return mixed
+	 */
 	public function getQuery() {
 		return $this->query;
 	}
 
+	/**
+	 * @return string - select, delete, update, insert, show
+	 */
 	public function getType() {
 		return $this->type;
 	}
-
+
+	/**
+	 * @return int
+	 */
 	public function getDuplicates() {
 		return $this->duplicates;
 	}

diff --git a/code/DBProfilerViewer.php b/code/DBProfilerViewer.php
@@ -5,23 +5,47 @@
  */
 class DBProfilerViewer extends Controller {
 
+	/**
+	 * @var array
+	 */
 	private static $allowed_actions = array(
 		'show',
 	);
 
+	/**
+	 * @var array
+	 */
 	public static $url_handlers = array(
 		'' => 'index',
 		'$Action' => 'show',
 	);
-
+
+	/**
+	 * @var ArrayList
+	 */
 	protected $List = null;
 
+	/**
+	 *
+	 */
+	public function init() {
+		parent::init();
+		$jQuery = Controller::join_links(Director::absoluteBaseURL(), THIRDPARTY_DIR, 'jquery/jquery.js');
+		Requirements::javascript($jQuery);
+		Requirements::javascript('//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js');
+		Requirements::javascript('profiler/javascript/dbprofiler.js');
+		Requirements::css('//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css');
+		Requirements::css('profiler/css/dbprofiler.css');
+		$debugCSS = Controller::join_links(Director::absoluteBaseURL(), FRAMEWORK_DIR, 'css/debug.css');
+		Requirements::css($debugCSS);
+	}
+
 	/**
 	 *
 	 * @param SS_HTTPRequest $request
+	 * @return \HTMLText
 	 */
 	public function index(SS_HTTPRequest $request) {
-
 		$list = new ArrayList();
 		foreach($this->getHistory() as $data) {
 			$query = unserialize(file_get_contents($data['filepath']));
@@ -33,17 +57,19 @@ public function index(SS_HTTPRequest $request) {
 		return $this->renderWith('DBProfilerViewer_index');
 	}
 
+	/**
+	 * @return string
+	 */
 	public function Link() {
 		return Director::absoluteBaseURL().'dev/profiler/';
 	}
 
 	/**
 	 *
 	 * @param SS_HTTPRequest $request
+	 * @return \HTMLText
 	 */
 	public function show(SS_HTTPRequest $request) {
-		Requirements::javascript('framework/thirdparty/jquery/jquery.js');
-		Requirements::javascript('profiler/javascript/dbprofiler.js');
 		$sha = $request->param('Action');
 		$list = $this->getLogData($sha);
 		$this->List = $list;
@@ -106,6 +132,10 @@ protected function getLogData($sha) {
 		return $niceList;
 	}
 
+	/**
+	 * @param $list
+	 * @return DBProfilerQueryList
+	 */
 	protected function markDuplicates($list) {
 		$counted = array_count_values($list->column('hash'));
 		$result = new DBProfilerQueryList();
@@ -118,6 +148,10 @@ protected function markDuplicates($list) {
 		return $result;
 	}
 
+	/**
+	 * @param $query
+	 * @return string
+	 */
 	protected function getAnalyzedQueryObject($query) {
 		preg_match_all('|\"([a-z_A-Z]*)\"\."([a-z_A-Z]*)\"|', $query->query, $matches);
 		$query->tables = array_unique($matches[1]);
@@ -136,7 +170,6 @@ protected function getAnalyzedQueryObject($query) {
 		} elseif(strpos(trim($query->query), 'DESCRIBE') === 0) {
 			$query->type = 'show';
 		}
-
 		return $query;
 	}
 }
diff --git a/css/dbprofiler.css b/css/dbprofiler.css
@@ -0,0 +1,56 @@
+#listview {
+    font-size: 13px;
+}
+
+#listview td {
+    vertical-align: text-top;
+}
+
+#listview .hide {
+    display: none;
+}
+
+.type-show {
+    color: #888;
+}
+
+.type-select {
+    color: #000;
+}
+
+.type-delete {
+    color: #900;
+}
+
+.type-update {
+    color: #006;
+}
+
+.type-insert {
+    color: #060
+}
+
+.center {
+    text-align: center;
+}
+
+.duplicates {
+    border: 1px solid #000;
+    margin: 1px;
+}
+
+td.query {
+    font-family: monospace;
+}
+
+.cursor {
+    cursor: pointer;
+}
+
+tr.odd td {
+   background: #dde9ff;
+}
+
+tr.even {
+
+}
diff --git a/javascript/dbprofiler.js b/javascript/dbprofiler.js
@@ -1,11 +1,17 @@
 $(document).ready(function() {
 
-	$('td').each(function(){
-		$(this).click(function(){
-			var hidden = $(this).find('.hide');
-			var displayed = $(this).find('.display');
+	$('td .cursor').each(function(){
+		$(this).dblclick(function(){
+			var hidden = $(this).parent().find('.hide');
+			var displayed = $(this).parent().find('.display');
+			console.log(displayed);
 			displayed.removeClass('display').addClass('hide');
 			hidden.removeClass('hide').addClass('display');
+
+			$('html, body').animate({
+				scrollTop: $(this).parent().offset().top
+			}, 0);
+
 			return false;
 		});
 	});

diff --git a/templates/DBProfilerViewer_index.ss b/templates/DBProfilerViewer_index.ss
@@ -1,53 +1,43 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<title>DBProfiler</title>
-		<style type="text/css">
-			body { background-color:#eee; margin:0; padding:0; font-family:Helvetica,Arial,sans-serif; }
-			.info { border-bottom:1px dotted #333; background-color:#ccdef3; margin:0; padding:6px 12px; }
-			.info h1 { margin:0; padding:0; color:#333; letter-spacing:-2px; }
-			.header { margin:0; border-bottom:6px solid #ccdef3; height:23px; background-color:#666673;
-					 padding:4px 0 2px 6px; }
-			.trace { padding:6px 12px; }.trace li { font-size:14px; margin:6px 0; }pre { margin-left:18px; }
-			pre span { color:#999;}
-			pre .error { color:#f00; }.pass { margin-top:18px; padding:2px 20px 2px 40px; color:#006600; background:#E2F9E3; border:1px solid #8DD38D; }
-			.fail { margin-top:18px; padding:2px 20px 2px 40px; color:#C80700; background:#FFE9E9; border:1px solid #C80700; }
-			.failure span { color:#C80700; font-weight:bold; }
-			.list {padding:6px 12px; }
-			.list table {font-size:14px;}
-			.summary {font-size: 14px;}
-			.type-show {color: #888;}
-			.type-select {color: #000;}
-			.type-update {color:#900;}
-			.duplicates{ border: 1px solid #000; text-align: center;}
-			.hide {
-				display: none;
-			}
-		</style>
-	</head>
-	<body>
-		<div class="info">
-			<h1>DBProfiler</h1>
-		</div>
-		<div class="list">
-			<table>
-				<thead>
-					<tr>
-						<th>Total time</th>
-						<th>Queries</th>
-						<th>Url</th>
-						<th>When</th>
-					</tr>
-					<% loop List %>	  
-					<tr>
-						<td>$TotalTime</td>
-						<td>$Count</td>
-						<td>$Url</td>
-						<td><a href="$Link">$DateTime</a></td>
-					</tr>
-					<% end_loop %>
-				</thead>
-			</table>
-		</div>
-	</body>
-</html>
+<head><title>GET /dev/</title>
+    <link rel="stylesheet" type="text/css" href="http://sandbox.dev/framework/css/debug.css"/>
+</head>
+<body>
+<div class="info">
+	<h1>SilverStripe Development DBProfiler</h1>
+    <h3>$AbsoluteBaseURL</h3><a href="$Link">DBProfile</a></div>
+	<div class="options">
+	    <table id="listview">
+	        <thead>
+	        <tr>
+	            <th>Total time</th>
+	            <th>Queries</th>
+	            <th>Url</th>
+	            <th>When</th>
+	        </tr>
+	        </thead>
+            <tbody>
+				<% loop $List %>
+	            <tr>
+	                <td>$TotalTime</td>
+	                <td>$Count</td>
+	                <td>$Url</td>
+	                <td><a href="$Link">$DateTime</a></td>
+	            </tr>
+				<% end_loop %>
+            </tbody>
+
+	    </table>
+	</div>
+</div>
+<script>
+    $(document).ready( function () {
+        $('#listview').DataTable({
+            "paging": false,
+            "order": []
+        });
+    } );
+</script>
+</body>
+</html>