Server: Load logs on demand

packages/flamenco/src/scripts/tutti/10_tasks.js

@@ -118,7 +118,7 @@ function loadActivities(url)
 function loadTasks(url) {
     return $.get(url)
     .done(function(data) {
-        if(console) console.log('Tasks loaded OK');
+        if(console) console.log('Tasks loaded OK\n' + url);
         $('#tasks').html(data);
         setupJsTaskLinkClickHandlers();
     })
@@ -230,11 +230,11 @@ function getTaskLog(url, container){
         return;
     }
 
-    var log_height = $('#col_main-overlay-content').height() - $('.flamenco-box.task').offset().top - $('.flamenco-box.task').height() - 20;
+    var log_height = $('#col_main-overlay-content').height() - $('.flamenco-box.task').offset().top - $('.flamenco-box.task').height() - 100;
 
     $.get(url)
         .done(function(data) {
-            if(console) console.log('Logs loaded OK');
+            if(console) console.log('Task log loaded OK\n' + url);
             $(container).html(data);
 
             var container_content = $(container).children('.item-log-content');

packages/flamenco/src/styles/_app_base.sass

@@ -281,11 +281,12 @@ nav.sidebar
 		width: 100%
 
 #item-action-panel
-	padding-top: 15px
-	text-align: right
+	padding: 0 10px 10px 10px
+	width: 100%
 
 	.btn
 		font-size: .8em
+
 #item-log
 	margin: 10px
 	border-radius: 3px
@@ -335,7 +336,7 @@ nav.sidebar
 				color: $color-primary
 				border-color: $color-primary
 
-			&.disabled, &.active
+			&.disabled
 				cursor: default
 				pointer-events: none
 

packages/flamenco/src/styles/_app_utils.sass

@@ -14,8 +14,8 @@
 	text-transform: uppercase
 	opacity: .9
 	padding:
-		left: 20px
-		right: 20px
+		left: 15px
+		right: 15px
 	border-radius: $roundness
 
 	@if $filled
@@ -45,14 +45,14 @@
 			color: $mixin-color
 			border-color: $mixin-color
 
-	&:active, &:focus
+	&:active
 		outline: none
 		border-color: $mixin-color
 		background-color: $mixin-color
 		color: white
 
 	i
-		margin-right: 10px
+		margin-right: 5px
 	small
 		font-size: .6em
 

packages/flamenco/src/templates/flamenco/jobs/view_job_embed.jade

@@ -44,6 +44,7 @@
 	| {% endif %}
 
 #item-action-panel
+	.pull-right
 		| {% if can_cancel_job %}
 		button.btn.btn-danger(onclick="setJobStatus('{{ job._id }}', 'cancel-requested')")
 			i.pi-cancel

packages/flamenco/src/templates/flamenco/tasks/view_task_embed.jade

@@ -35,7 +35,7 @@
 							data-task-id="{{ task._id }}",
 							class="task-link"
 						)
-							| {{ task.task }}
+							| {{ task._id }}
 				.table-row
 					.table-cell task Type
 					.table-cell {{ task.task_type | undertitle }}
@@ -58,6 +58,12 @@
 					.table-cell {{ task.worker }}
 
 #item-action-panel
+	button.btn.item-log-load.js-log-load(
+		data-url="{{ url_for('flamenco.tasks.perproject.view_task_log', project_url=project.url, task_id=task._id) }}")
+		i.pi-list
+		| View Log
+
+	.pull-right
 		| {% if can_requeue_task %}
 		button.btn.btn-success.requeue-task(onclick="setTaskStatus('{{ task._id }}', 'queued')")
 			i.pi-refresh
@@ -66,9 +72,6 @@
 		.action-result-panel
 
 #item-log.task
-	.item-log-loader
-		span Loading Logs
-		i.pi-spin.spin
 
 | {% if config.DEBUG %}
 .debug-info
@@ -95,9 +98,13 @@ script.
 	setupJsJobLinkClickHandlers();
 
 	// Task Logs
-	var url = "{{ url_for('flamenco.tasks.perproject.view_task_log', project_url=project.url, task_id=task._id) }}";
-	var item_log = $('#item-log.task');
-	getTaskLog(url, item_log); // on tasks.js
+	$('.js-log-load').on('click', function(){
+		var url = $(this).data('url');
+		var container = $('#item-log.task');
+
+		$(container).html('<div class="item-log-loader"><i class="pi-spin spin"></i></div>');
+		getTaskLog(url, $(container)); // on tasks.js
+	});
 
 	// Close Task Details
 	function closeTaskDetails(){

packages/flamenco/src/templates/flamenco/tasks/view_task_log_embed.jade

@@ -39,7 +39,7 @@ script.
 		e.preventDefault();
 
 		var url = $(this).attr('href');
-		getTaskLog(url, item_log);
+		getTaskLog(url, $('#item-log.task'));
 	});
 
 	$("p.item-log-line:contains('> Warning:')").addClass('log-warning');