Make logs filterable

couchpotato/core/plugins/log/static/log.css

@@ -16,10 +16,14 @@
 		display: inline-block;
 		padding: 5px 10px;
 		margin: 0;
+	}
+
+	.page.log .nav li.select,
+	.page.log .nav li.clear {
 		cursor: pointer;
 	}
 
-		.page.log .nav li:hover:not(.active) {
+		.page.log .nav li:hover:not(.active, .filter) {
 			background: rgba(255, 255, 255, 0.1);
 		}
 
@@ -51,13 +55,12 @@
 	line-height: 150%;
 	font-size: 11px;
 	font-family: Lucida Console, Monaco, Nimbus Mono L, monospace, serif;
+	color: #FFF;
 }
 
-	.page.log .container .error {
-		color: #FFA4A4;
-		white-space: pre-wrap;
+	.page.log .container select {
+		vertical-align: top;
 	}
-	.page.log .container .debug { color: lightgrey; }
 
 	.page.log .container .time {
 		clear: both;
@@ -68,10 +71,25 @@
 		position: relative;
 	}
 
-		.page.log .container .time:last-child { display: none; }
-
-		.page.log .container .time span {
-			float: right;
-			width: 86%;
+		.page.log [data-filter=INFO] .error,
+		.page.log [data-filter=INFO] .debug,
+		.page.log [data-filter=ERROR] .debug,
+		.page.log [data-filter=ERROR] .info,
+		.page.log [data-filter=DEBUG] .info,
+		.page.log [data-filter=DEBUG] .error {
+			display: none;
 		}
 
+	.page.log .container .type {
+		margin-left: 10px;
+	}
+
+	.page.log .container .message {
+		float: right;
+		width: 86%;
+		white-space: pre-wrap;
+	}
+
+	.page.log .container .error { color: #FFA4A4; }
+	.page.log .container .debug { opacity: .4; }
+

couchpotato/core/plugins/log/static/log.js

@@ -27,25 +27,46 @@ Page.Log = new Class({
 				'nr': nr
 			},
 			'onComplete': function(json){
+				self.log.set('text', '');
 				self.log.adopt(self.createLogElements(json.log));
 				self.log.removeClass('loading');
 
-				new Fx.Scroll(window, {'duration': 0}).toBottom();
+				var nav = new Element('ul.nav', {
+					'events': {
+						'click:relay(li.select)': function(e, el){
+							self.getLogs(parseInt(el.get('text'))-1);
+						}
+					}
+				});
 
-				var nav = new Element('ul.nav').inject(self.log, 'top');
+				// Type selection
+				new Element('li.filter').grab(
+					new Element('select', {
+						'events': {
+							'change': function(){
+								var type_filter = this.getSelected()[0].get('value');
+								self.log.set('data-filter', type_filter);
+								self.scrollToBottom();
+							}
+						}
+					}).adopt(
+						new Element('option', {'value': 'ALL', 'text': 'Show all logs'}),
+						new Element('option', {'value': 'INFO', 'text': 'Show only INFO'}),
+						new Element('option', {'value': 'DEBUG', 'text': 'Show only DEBUG'}),
+						new Element('option', {'value': 'ERROR', 'text': 'Show only ERROR'})
+					)
+				).inject(nav);
+
+				// Selections
 				for (var i = 0; i <= json.total; i++) {
 					new Element('li', {
 						'text': i+1,
-						'class': nr == i ? 'active': '',
-						'events': {
-							'click': function(e){
-								self.getLogs(e.target.get('text')-1);
-							}
-						}
+						'class': 'select ' + (nr == i ? 'active': '')
 					}).inject(nav);
 				}
 
-				new Element('li', {
+				// Clear button
+				new Element('li.clear', {
 					'text': 'clear',
 					'events': {
 						'click': function(){
@@ -57,7 +78,12 @@ Page.Log = new Class({
 
 						}
 					}
-				}).inject(nav)
+				}).inject(nav);
+
+				// Add to page
+				nav.inject(self.log, 'top');
+
+				self.scrollToBottom();
 			}
 		});
 
@@ -68,17 +94,24 @@ Page.Log = new Class({
         var elements = [];
 
         logs.each(function(log){
-            elements.include(new Element('div.time', {
+            elements.include(new Element('div', {
+				'class': 'time ' + log.type.toLowerCase(),
                 'text': log.time
-            }).grab(
-                new Element('span', {
-                    'class': log.type.toLowerCase(),
+            }).adopt(
+                new Element('span.type', {
+                    'text': log.type
+                }),
+                new Element('span.message', {
                     'text': log.message
                 })
             ))
         });
 
 		return elements;
+	},
+
+	scrollToBottom: function(){
+		new Fx.Scroll(window, {'duration': 0}).toBottom();
 	}
 
 });