From 13ab4beeefd2c49666ce771753fbb3a28c9d2f2c Mon Sep 17 00:00:00 2001
From: Dmitry Vyukov <dvyukov@google.com>
Date: Thu, 22 Nov 2018 14:27:37 +0100
Subject: syz-manager: modernize web UI

1. Use dashboard style.
2. Allow sorting of tables.
3. Show old crashes in grey.
4. Use tables instead of text output for more pages.
5. Show corpus inputs on a separate page to allow copy-pasting.
6. Use standard JS sorting instead of custom bubble sort (much faster).
7. Fix off-by one in table sorting.

Fixes #694
---
 dashboard/app/static/common.js | 31 +++++++++++++------------------
 dashboard/app/static/style.css | 16 ++++++++++++++++
 2 files changed, 29 insertions(+), 18 deletions(-)

(limited to 'dashboard/app/static')

diff --git a/dashboard/app/static/common.js b/dashboard/app/static/common.js
index 5a146f3bd..5c20f7df9 100644
--- a/dashboard/app/static/common.js
+++ b/dashboard/app/static/common.js
@@ -3,28 +3,22 @@
 
 function sortTable(item, colName, conv, desc = false) {
 	table = item.parentNode.parentNode.parentNode;
-	rows = table.getElementsByTagName("tr");
+	rows = table.rows;
 	col = findColumnByName(rows[0].getElementsByTagName("th"), colName);
-	values = new Array;
+	values = [];
 	for (i = 1; i < rows.length; i++)
-		values[i] = conv(rows[i].getElementsByTagName("td")[col].textContent);
+		values.push([conv(rows[i].getElementsByTagName("td")[col].textContent), rows[i]]);
 	if (desc)
 		desc = !isSorted(values.slice().reverse())
 	else
 		desc = isSorted(values);
-	do {
-		changed = false;
-		for (i = 1; i < values.length - 1; i++) {
-			v0 = values[i];
-			v1 = values[i + 1];
-			if (desc && v0 >= v1 || !desc && v0 <= v1)
-				continue;
-			changed = true;
-			values[i] = v1;
-			values[i + 1] = v0;
-			rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
-		}
-	} while (changed);
+	values.sort(function(a, b) {
+		if (a[0] == b[0]) return 0;
+		if (desc && a[0] > b[0] || !desc && a[0] < b[0]) return -1;
+		return 1;
+	});
+	for (i = 0; i < values.length; i++)
+		table.appendChild(values[i][1]);
 	return false;
 }
 
@@ -37,8 +31,8 @@ function findColumnByName(headers, colName) {
 }
 
 function isSorted(values) {
-	for (i = 1; i < rows.length - 1; i++) {
-		if (values[i] > values[i + 1])
+	for (i = 0; i < values.length - 1; i++) {
+		if (values[i][0] > values[i + 1][0])
 			return false;
 	}
 	return true;
@@ -46,6 +40,7 @@ function isSorted(values) {
 
 function textSort(v) { return v.toLowerCase(); }
 function numSort(v) { return -parseInt(v); }
+function floatSort(v) { return -parseFloat(v); }
 function reproSort(v) { return v == "C" ? 0 : v == "syz" ? 1 : 2; }
 function patchedSort(v) { return v == "" ? -1 : parseInt(v); }
 
diff --git a/dashboard/app/static/style.css b/dashboard/app/static/style.css
index cb9e6e378..536cd82ab 100644
--- a/dashboard/app/static/style.css
+++ b/dashboard/app/static/style.css
@@ -122,11 +122,27 @@ table td, table th {
 	text-align: right;
 }
 
+.list_table .stat_name {
+	width: 150pt;
+	max-width: 150pt;
+	font-family: monospace;
+}
+
+.list_table .stat_value {
+	width: 100pt;
+	max-width: 100pt;
+	font-family: monospace;
+}
+
 .bad {
 	color: #f00;
 	font-weight: bold;
 }
 
+.inactive {
+	color: #888;
+}
+
 .plain {
 	text-decoration: none;
 }
-- 
cgit mrf-deployment