Mike Saris UI/UX enhancements

public/css/style.less

@@ -1,7 +1,44 @@
-body {
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-}
-
-a {
-  color: #00B7FF;
+body {
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #00B7FF;
+}
+
+hr { 
+    display: block;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    margin-left: auto;
+    margin-right: auto;
+    border-style: inset;
+    border-width: 1px;
+}
+
+pre {
+  margin:0;
+  padding:0;
+  background-color: silver;
+}
+
+h3 {
+  margin:0;
+  padding:0;
+}
+
+.inactive {
+	background-color: #ffdddd;
+}
+.active {
+	background-color: #ddffdd;
+}
+.stable {
+	color: #009900;
+}
+.unstable {
+	color: #CC0000;
+}
+.semistable {
+	color: #FFCC00;
 }

routes/index.js

@@ -1,51 +1,94 @@
-var moment = require('moment'),
-	assert = require('assert'),
-	prettycron = require('prettycron')
-
-	// All of these routes assume (and implicitly require) that req.apiClient has already been set by either userLoginRequired or userLoginOptional
-exports.status = function(req, res){
-	req.apiClient.get('/status', function(err, req, rez, result) {
+var moment = require('moment'),
+	assert = require('assert'),
+	prettycron = require('prettycron')
+
+	// All of these routes assume (and implicitly require) that req.apiClient has already been set by either userLoginRequired or userLoginOptional
+exports.status = function(req, res){
+	req.apiClient.get('/status', function(err, req, rez, result) {
 		res.render('status.html',{ data: result, json: JSON.stringify });
-	});
-};
-
-exports.tasks = function(req, res){
-	req.apiClient.get('/tasks'+(req.params.filter ? '/'+req.params.filter : ''), function(err, req, rez, result) {
-		assert.ifError(err);
-		// console.log(rez.body);
-		res.render('tasks.html',{ data: result, json: JSON.stringify, prettycron: prettycron, moment: moment });
-	});
-};
-exports.runs = function(req, res){
-	var from = moment().subtract(1, 'day').toISOString();
-
-	req.apiClient.get('/log?filter='+req.params.filter+'&runsOnly=true&from='+from, function(err, req, rez) {
-		// rez.body is a newline-separated list of JSON objects, and isn't JSON-parseable directly. Let's parse them ourselves.
-		var runs = [];
-		rez.body.split('\n').forEach(function(item, n) {
-			// console.log("Now doing "+n);
-			item && runs.push(JSON.parse(item));
-		});
-		// console.log(runs);
-
-
-		res.render('runs.html',{ data: runs, json: JSON.stringify, moment: moment });
-	});
-};
-exports.log = function(req, res){
-	var from = moment().subtract(1, 'day').toISOString();
-
-
-	req.apiClient.get('/log?filter='+req.params.filter+'&from='+from, function(err, req, rez) {
-		var log_entries = [];
-		rez.body.split('\n').forEach(function(item, n) {
-			item && log_entries.push(JSON.parse(item));
-		});
-		// console.log(log_entries);
-		res.render('log.html',{ data: log_entries, json: JSON.stringify, moment: moment });
-	});
-};
-
-exports.login = function(req, res){
-	res.render('login.html')
+	});
+};
+
+exports.tasks = function(req, res){
+	var apiCall = '/tasks';
+	if (typeof req.params.filter == 'string') {
+		apiCall += '/'+req.params.filter;
+	}
+	req.apiClient.get(apiCall, function(err, req, rez, result) {
+		if (err) {
+			res.render('error.html', { message: 'You requested tasks for an invalid collection' });
+			return;
+		}
+		// console.log(rez.body);
+		var collectionSuccessRates = new Map();
+		var taskSuccessRates = new Map();
+		result.collections.forEach(function(collection, n) {
+			var numTaskRunsInCollection = 0;
+			var numSuccessfulTaskRunsInCollection = 0;
+			for(var taskName in collection.tasks) { 
+				if (collection.tasks.hasOwnProperty(taskName)) {
+					var task = collection.tasks[taskName];
+					var numTaskRuns = 0;
+					var numSuccessfulTaskRuns = 0;
+					for (i = 0; i < task.recentExitCodes.length; i++) {
+						numTaskRunsInCollection++;
+						numTaskRuns++;
+						if (task.recentExitCodes[i] == 0) {
+							numSuccessfulTaskRunsInCollection++;
+							numSuccessfulTaskRuns++;
+						}
+					}
+					if (numTaskRuns != 0) {
+						taskSuccessRates.set(task.id, Math.round(numSuccessfulTaskRuns / numTaskRuns * 100));
+					}
+					else {
+						taskSuccessRates.set(task.id, 0);
+					}
+				}
+			}
+			if (numTaskRunsInCollection != 0) {
+				collectionSuccessRates.set(collection.collection, 
+						Math.round(numSuccessfulTaskRunsInCollection / numTaskRunsInCollection * 100));
+			}
+			else {
+				collectionSuccessRates.set(collection.collection, 0);
+			}
+		});
+
+		res.render('tasks.html',{ data: result, json: JSON.stringify, prettycron: prettycron, moment: moment,
+			taskSuccessRates: taskSuccessRates, collectionSuccessRates: collectionSuccessRates});
+	});
+};
+exports.runs = function(req, res){
+	var from = moment().subtract(1, 'day').toISOString();
+
+	req.apiClient.get('/log?filter='+req.params.filter+'&runsOnly=true&from='+from, function(err, req, rez) {
+		// rez.body is a newline-separated list of JSON objects, and isn't JSON-parseable directly. Let's parse them ourselves.
+		var runs = [];
+		rez.body.split('\n').forEach(function(item, n) {
+			// console.log("Now doing "+n);
+			item && runs.push(JSON.parse(item));
+		});
+		// console.log(runs);
+
+
+		res.render('runs.html',{ data: runs, json: JSON.stringify, moment: moment });
+	});
+};
+exports.log = function(req, res){
+	var from = moment().subtract(1, 'day').toISOString();
+
+
+	req.apiClient.get('/log?filter='+req.params.filter+'&from='+from, function(err, req, rez) {
+		var log_entries = [];
+		rez.body.split('\n').forEach(function(item, n) {
+			item && log_entries.push(JSON.parse(item));
+		});
+		// console.log(log_entries);
+		res.render('log.html',{ data: log_entries, json: JSON.stringify, moment: moment });
+	});
+};
+
+exports.login = function(req, res){
+	res.render('login.html')
 }

views/error.html

@@ -0,0 +1,12 @@
+{% extends 'layout.html' %}
+
+{% block bodyclass %}home{% endblock %}
+
+
+{% block main %}
+
+<h1>Sorry!</h1>
+
+{{ message }}
+
+{% endblock %}

views/layout.html

@@ -1,26 +1,27 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>
-      {% block title %}
-        Ummon Web
-      {% endblock %}
-    </title>
-    {% block css %}
-      <link href="/css/style.css" rel="stylesheet" />
-    {% endblock %}
-    {% block js %}
-      <script type="text/javascript" src="/js/jquery.js"> </script>
-      <script type="text/javascript" src="/js/client.js"> </script>
-    {% endblock %}
-
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
-    <link rel="shortcut icon" href="/favicon.ico">
-  </head>
-  <body class="{% block bodyclass %}{% endblock %}">
-    {% block main %}
-
-    {% endblock %}
-  </body>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>
+      {% block title %}
+        Ummon Web
+      {% endblock %}
+    </title>
+    {% block css %}
+      <link href="/css/style.css" rel="stylesheet" />
+    {% endblock %}
+    {% block js %}
+      <script type="text/javascript" src="/js/jquery.js"> </script>
+      <script type="text/javascript" src="/js/client.js"> </script>
+    {% endblock %}
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <link rel="shortcut icon" href="/favicon.ico">
+  </head>
+  <body class="{% block bodyclass %}{% endblock %}">
+  <a href="/">Home</a>
+    {% block main %}
+
+    {% endblock %}
+  </body>
 </html>