Browse Source

HUE-663 jobbrowser styled

Enrico Berti 13 years ago
parent
commit
a7060878f2

+ 157 - 158
apps/jobbrowser/src/jobbrowser/templates/job.mako

@@ -23,7 +23,7 @@
 %>
 
 <%def name="task_table(tasks)">
-  <table class="taskTable">
+  <table class="taskTable table table-striped table-condensed">
     <thead>
       <tr>
         <th>Tasks</th>
@@ -67,8 +67,8 @@
                   <a href="${location_to_url(request, val)}" title="${val}" target="${target}">${val}</a>
                   % if i != len(splitArray) - 1:
                     <br>
-                  % endif  
-               % else: 
+                  % endif
+               % else:
                   ${val}
                % endif
             % endfor
@@ -77,173 +77,172 @@
     % endfor
 </%def>
 ${commonheader("Job: " + job.jobId + " - Job Browser", "jobbrowser")}
+
 <div class="container-fluid">
 	<h1>Job: ${job.jobId} - Job Browser</h1>
-	<div class="sidebar withTitle">
-		<div class="well">
-			<h6>Job ID</h6>
-			${job.jobId}
-			
-			<h6>User</h6>
-			${job.user}
-			
-			<h6>Status</h6>
-			% if job.status.lower() == 'running' or job.status.lower() == 'pending':
-				<span class="label warning">${job.status.lower()}</span>
-			% elif job.status.lower() == 'succeeded':
-				<span class="label success">${job.status.lower()}</span>
-			% else:
-				<span class="label">${job.status.lower()}</span>
-			% endif
-			
-			% if job.status.lower() == 'running' or job.status.lower() == 'pending':
-	        <h6>Kill Job</h6>
-			<a href="${url('jobbrowser.views.kill_job', jobid=job.jobId)}" title="Kill this job">Kill this job</a>
-	        % endif
-			
-			
-			<h6>Output</h6>
-			<%
-	            output_dir = job.conf_keys.get('mapredOutputDir', "")
-	            location_url = location_to_url(request, output_dir)
-	            basename = os.path.basename(output_dir)
-	            dir_name = basename.split('/')[-1]
-	          %>
-	          % if location_url != None:
-	            <a href="${location_url}" title="${output_dir}">${dir_name}</a>
-	          % else:
-	            ${dir_name}
-	          % endif
-		</div>
-	</div>
-    
-    <div class="content">
-		<ul class="tabs">
-			<li class="active"><a href="#tasks">Tasks</a></li>
-			<li><a href="#metadata">Metadata</a></li>
-			<li><a href="#counters">Counters</a></li>
-		</ul>
+	<div class="row-fluid">
+		<div class="span2">
+			<div class="well sidebar-nav">
+				<h6>Job ID</h6>
+				${job.jobId}
 
-		<div class="tab-content">
-			<div class="tab-pane active" id="tasks">
-				<dl>
-	                <dt>Maps:</dt>
-	                <dd>${comps.mr_graph_maps(job)}</dd>
-	                <dt>Reduces:</dt>
-	                <dd>${comps.mr_graph_reduces(job, right_border=True)}</dd>
-	              </dl>
-	            %if failed_tasks:
-	            <div>
-	              <h3>
-	                <a href="${url('jobbrowser.views.tasks', jobid=job.jobId)}?taskstate=failed">View Failed Tasks &raquo;</a>
-	                Failed Tasks
-	              </h3>
-	              <div class="jt_task_list_container">
-	                ${task_table(failed_tasks)}
-	              </div>
-	            </div>
-	            %endif
-	            <div>
-					<a style="float:right;margin-right:10px" href="${url('jobbrowser.views.tasks', jobid=job.jobId)}">View All Tasks &raquo;</a>
-	              <h3>
-	                Recent Tasks
-	              </h3>
-	              <div class="jt_task_list_container">
-	                ${task_table(recent_tasks)}
-	              </div>
-	            </div>
-	
-			</div>
-			<div id="metadata" class="tab-pane">
-				<div class="toolbar">
-					<form>
-						<b>Filter metadata:</b>
-						<ul>
-							<li>
-								<input type="text" id="metadataFilter" title="Text Filter" placeholder="Text Filter"/>
-							</li>
-						</ul>
-					</form>
-		        </div>
-				 <table id="metadataTable">
-		              <thead>
-		                <th>Name</th>
-		                <th>Value</th>
-		              </thead>
-		              <tbody>
-		                <tr>
-		                  <td>ID</td>
-		                  <td>${job.jobId}</td>
-		                </tr>
-		                <tr>
-		                  <td>User</td>
-		                  <td>${job.user}</td>
-		                </tr>
-		                <tr>
-		                  <td>Maps</td>
-		                  <td>${job.finishedMaps} of ${job.desiredMaps}</td>
-		                </tr>
-		                <tr>
-		                  <td>Reduces</td>
-		                  <td>${job.finishedReduces} of ${job.desiredReduces}</td>
-		                </tr>
-		                <tr>
-		                  <td>Started</td>
-		                  <td>${job.startTimeFormatted}</td>
-		                </tr>
-		                <tr>
-		                  <td>Ended</td>
-		                  <td>${job.finishTimeFormatted}</td>
-		                </tr>
-		                <tr>
-		                  <td>Duration</td>
-		                  <td>${job.duration}</td>
-		                </tr>
-		                <tr>
-		                  <td>Status</td>
-		                  <td>${job.status}</td>
-		                </tr>
-		                ${rows_for_conf_vars(job.conf_keys)}
-		             
-		              </tbody>
-		            </table>
-					<h3>Raw configuration:</h3>
-				 <table id="rawConfigurationTable">
-		              <thead>
-		                <th>Name</th>
-		                <th>Value</th>
-		              </thead>
-		              <tbody>
+				<h6>User</h6>
+				${job.user}
+
+				<h6>Status</h6>
+				% if job.status.lower() == 'running' or job.status.lower() == 'pending':
+					<span class="label label-warning">${job.status.lower()}</span>
+				% elif job.status.lower() == 'succeeded':
+					<span class="label label-success">${job.status.lower()}</span>
+				% else:
+					<span class="label">${job.status.lower()}</span>
+				% endif
 
-		              % for key, value in sorted(job.full_job_conf.items()):
-		                <tr>
-		                  <td width="20%">${key}</td>
-		                  <td>
-							<div class="wordbreak">
-								${value}
-							</div>
-						  </td>
-		                </tr>
-		              % endfor
-		              </tbody>
-		            </table>
+				% if job.status.lower() == 'running' or job.status.lower() == 'pending':
+		        <h6>Kill Job</h6>
+				<a href="${url('jobbrowser.views.kill_job', jobid=job.jobId)}" title="Kill this job">Kill this job</a>
+		        % endif
 
+
+				<h6>Output</h6>
+				<%
+		            output_dir = job.conf_keys.get('mapredOutputDir', "")
+		            location_url = location_to_url(request, output_dir)
+		            basename = os.path.basename(output_dir)
+		            dir_name = basename.split('/')[-1]
+		          %>
+		          % if location_url != None:
+		            <a href="${location_url}" title="${output_dir}">${dir_name}</a>
+		          % else:
+		            ${dir_name}
+		          % endif
 			</div>
-			<div id="counters" class="tab-pane">
-				${comps.job_counters(job.counters)}
+		</div>
+		<div class="span10">
+			<ul class="nav nav-tabs">
+				<li class="active"><a href="#tasks" data-toggle="tab">Tasks</a></li>
+				<li><a href="#metadata" data-toggle="tab">Metadata</a></li>
+				<li><a href="#counters" data-toggle="tab">Counters</a></li>
+			</ul>
+
+			<div class="tab-content">
+				<div class="tab-pane active" id="tasks">
+					<dl>
+		                <dt>Maps:</dt>
+		                <dd>${comps.mr_graph_maps(job)}</dd>
+		                <dt>Reduces:</dt>
+		                <dd>${comps.mr_graph_reduces(job, right_border=True)}</dd>
+		              </dl>
+		            %if failed_tasks:
+		            <div>
+		              <h3>
+		                <a href="${url('jobbrowser.views.tasks', jobid=job.jobId)}?taskstate=failed">View Failed Tasks &raquo;</a>
+		                Failed Tasks
+		              </h3>
+		              <div class="jt_task_list_container">
+		                ${task_table(failed_tasks)}
+		              </div>
+		            </div>
+		            %endif
+		            <div>
+						<a style="float:right;margin-right:10px" href="${url('jobbrowser.views.tasks', jobid=job.jobId)}">View All Tasks &raquo;</a>
+		              <h3>
+		                Recent Tasks
+		              </h3>
+		              <div class="jt_task_list_container">
+		                ${task_table(recent_tasks)}
+		              </div>
+		            </div>
+
+				</div>
+				<div id="metadata" class="tab-pane">
+					<div class="well hueWell">
+						<form class="form-search">
+							Filter: <input id="metadataFilter" class="input-xlarge search-query" placeholder="Text Filter">
+						</form>
+					</div>
+					 <table id="metadataTable" class="table table-striped table-condensed">
+			              <thead>
+			                <th>Name</th>
+			                <th>Value</th>
+			              </thead>
+			              <tbody>
+			                <tr>
+			                  <td>ID</td>
+			                  <td>${job.jobId}</td>
+			                </tr>
+			                <tr>
+			                  <td>User</td>
+			                  <td>${job.user}</td>
+			                </tr>
+			                <tr>
+			                  <td>Maps</td>
+			                  <td>${job.finishedMaps} of ${job.desiredMaps}</td>
+			                </tr>
+			                <tr>
+			                  <td>Reduces</td>
+			                  <td>${job.finishedReduces} of ${job.desiredReduces}</td>
+			                </tr>
+			                <tr>
+			                  <td>Started</td>
+			                  <td>${job.startTimeFormatted}</td>
+			                </tr>
+			                <tr>
+			                  <td>Ended</td>
+			                  <td>${job.finishTimeFormatted}</td>
+			                </tr>
+			                <tr>
+			                  <td>Duration</td>
+			                  <td>${job.duration}</td>
+			                </tr>
+			                <tr>
+			                  <td>Status</td>
+			                  <td>${job.status}</td>
+			                </tr>
+			                ${rows_for_conf_vars(job.conf_keys)}
+
+			              </tbody>
+			            </table>
+					  <h3>Raw configuration:</h3>
+					 <table id="rawConfigurationTable" class="table table-striped table-condensed">
+			              <thead>
+			                <th>Name</th>
+			                <th>Value</th>
+			              </thead>
+			              <tbody>
+
+			              % for key, value in sorted(job.full_job_conf.items()):
+			                <tr>
+			                  <td width="20%">${key}</td>
+			                  <td>
+								<div class="wordbreak">
+									${value}
+								</div>
+							  </td>
+			                </tr>
+			              % endfor
+			              </tbody>
+			            </table>
+
+				</div>
+				<div id="counters" class="tab-pane">
+					${comps.job_counters(job.counters)}
+				</div>
 			</div>
 		</div>
 	</div>
 </div>
+
+
+
 		<script type="text/javascript" charset="utf-8">
 			$(document).ready(function(){
-				$(".tabs").tabs();
 				$(".taskTable").dataTable({
 					"bPaginate": false,
 				    "bLengthChange": false,
 					"bInfo": false,
 					"bAutoWidth": false,
-					"aoColumns": [ 
+					"aoColumns": [
 						{ "sWidth": "40%" },
 						{ "sWidth": "40%" },
 						{ "sWidth": "20%" }
@@ -254,7 +253,7 @@ ${commonheader("Job: " + job.jobId + " - Job Browser", "jobbrowser")}
 				    "bLengthChange": false,
 					"bInfo": false,
 					"bAutoWidth": false,
-					"aoColumns": [ 
+					"aoColumns": [
 						{ "sWidth": "30%" },
 						{ "sWidth": "70%" }
 					]
@@ -264,23 +263,23 @@ ${commonheader("Job: " + job.jobId + " - Job Browser", "jobbrowser")}
 				    "bLengthChange": false,
 					"bInfo": false,
 					"bAutoWidth": false,
-					"aoColumns": [ 
+					"aoColumns": [
 						{ "sWidth": "30%" },
 						{ "sWidth": "70%" }
 					]
 				});
-				
+
 				$("#metadataFilter").keydown(function(){
 					_metadataTable.fnFilter($(this).val());
 					_rawConfigurationTable.fnFilter($(this).val());
 				});
-				
+
 				$(".jobCountersTable").dataTable({
 					"bPaginate": false,
 				    "bLengthChange": false,
 					"bInfo": false,
 					"bAutoWidth": false,
-					"aoColumns": [ 
+					"aoColumns": [
 						{ "sWidth": "40%" },
 						{ "sWidth": "20%" },
 						{ "sWidth": "20%" },

+ 6 - 6
apps/jobbrowser/src/jobbrowser/templates/jobbrowser_components.mako

@@ -20,11 +20,11 @@
 %>
 	% for group in counters.groups:
 		<h3>${format_counter_name(group.displayName)}</h3>
-	    <table class="taskCountersTable">
+	    <table class="taskCountersTable table table-striped table-condensed">
 	      <thead>
 	         <tr>
 	           <th>Counter Name</th>
-	           <th>Value</th>   
+	           <th>Value</th>
 	        </tr>
 	      </thead>
 	      <tbody>
@@ -46,13 +46,13 @@
 
 	% for group in counters.itervalues():
       <h3>${format_counter_name(group['displayName'])}</h3>
-	  <table class="jobCountersTable">
+	  <table class="jobCountersTable table table-striped table-condensed">
       <thead>
          <tr>
            <th>Name</th>
            <th>Maps Total</th>
            <th>Reduces Total</th>
-           <th>Total</th>   
+           <th>Total</th>
         </tr>
       </thead>
       <tbody>
@@ -72,9 +72,9 @@
 			</tbody>
 	     </table>
 	% endfor
-    
 
-   
+
+
 </%def>
 
 <%def name="mr_graph(job)">

+ 2 - 2
apps/jobbrowser/src/jobbrowser/templates/jobs.mako

@@ -32,7 +32,7 @@
 ${commonheader("Job Browser", "jobbrowser")}
 <div class="container-fluid">
 <h1>Job Browser</h1>
-<div class="well">
+<div class="well hueWell">
 	<form action="/jobbrowser/jobs" method="GET">
 		<b>Filter jobs:</b>
 
@@ -55,7 +55,7 @@ ${commonheader("Job Browser", "jobbrowser")}
 % if len(jobs) == 0:
 <p>There were no jobs that match your search criteria.</p>
 % else:
-<table class="datatables">
+<table class="datatables table table-striped table-condensed">
 	<thead>
 		<tr>
 			<th>Name / Id</th>

+ 124 - 122
apps/jobbrowser/src/jobbrowser/templates/task.mako

@@ -18,132 +18,134 @@
 %>
 <%namespace name="comps" file="jobbrowser_components.mako" />
 
-  ${commonheader("Job Task: " + task.taskId + "- Job Browser", "jobbrowser")}
-	<div class="container-fluid">
-	<h1>Job Task: ${task.taskId} - Job Browser</h1>
+${commonheader("Job Task: " + task.taskId + "- Job Browser", "jobbrowser")}
 
-	<div class="sidebar withTitle">
-		<div class="well">
-			<h6>Task ID</h6>
-			${task.taskId_short}
-			
-			<h6>Job</h6>
-			<a href="${url('jobbrowser.views.single_job', jobid=joblnk.jobId)}" class="frame_tip jt_view" title="View this job">${joblnk.jobId_short}</a>
-			
-			<h6>Status</h6>
-			% if task.state.lower() == 'running' or task.state.lower() == 'pending':
-				<span class="label warning">${task.state.lower()}</span>
-			% elif task.state.lower() == 'succeeded':
-				<span class="label success">${task.state.lower()}</span>
-			% else:
-				<span class="label">${task.state.lower()}</span>
-			% endif
-		</div>
-	</div>
-	
-	<div class="content">
-		
+<div class="container-fluid">
+	<h1>Job Task: ${task.taskId} - Job Browser</h1>
+	<div class="row-fluid">
+		<div class="span2">
+			<div class="well sidebar-nav">
+				<h6>Task ID</h6>
+				${task.taskId_short}
 
-		<ul class="tabs">
-			<li class="active"><a href="#attempts">Attempts</a></li>
-			<li><a href="#metadata">Metadata</a></li>
-			<li><a href="#counters">Counters</a></li>
-		</ul>
+				<h6>Job</h6>
+				<a href="${url('jobbrowser.views.single_job', jobid=joblnk.jobId)}" class="frame_tip jt_view" title="View this job">${joblnk.jobId_short}</a>
 
-		<div class="tab-content">
-			<div class="tab-pane active" id="attempts">
-				<table id="attemptsTable">
-	              <thead>
-	                <tr>
-	                 <th>Attempt ID</th>
-	                 <th>Progress</th>
-	                 <th>State</th>
-	                 <th>Task Tracker</th>
-	                 <th>Start Time</th>
-	                 <th>End Time</th>
-	                 <th>Output Size</th>
-	                 <th>Phase</th>
-	                 <th>Shuffle Finish</th>
-	                 <th>Sort Finish</th>
-	                 <th>Map Finish</th>
-	                 <th>View</th>
-	                </tr>
-	              </thead>
-	              <tbody>
-	                % for attempt in task.attempts:
-	                 <tr data-dblclick-delegate="{'dblclick_loads':'.view_attempt'}">
-	                   <td>${attempt.attemptId_short}</td>
-	                   <td>${"%d" % (attempt.progress * 100)}%</td>
-	                   <td><span class="status_link ${attempt.state}">${attempt.state}</span></td>
-	                   <td><a href="/jobbrowser/trackers/${attempt.taskTrackerId}" class="task_tracker_link">${attempt.taskTrackerId}</a></td>
-	                   <td>${attempt.startTimeFormatted}</td>
-	                   <td>${attempt.finishTimeFormatted}</td>
-	                   <td>${attempt.outputSize}</td>
-	                   <td>${attempt.phase}</td>
-	                   <td>${attempt.shuffleFinishTimeFormatted}</td>
-	                   <td>${attempt.sortFinishTimeFormatted}</td>
-	                   <td>${attempt.mapFinishTimeFormatted}</td>
-	                   <td><a class="frame_tip jtask_view jt_slide_right view_attempt" title="View this attempt"
-	                          href="${ url('jobbrowser.views.single_task_attempt', jobid=joblnk.jobId, taskid=task.taskId, attemptid=attempt.attemptId) }"></a></td>
-	                 </tr>
-	                % endfor
-	              </tbody>
-	            </table>
+				<h6>Status</h6>
+				% if task.state.lower() == 'running' or task.state.lower() == 'pending':
+					<span class="label label-warning">${task.state.lower()}</span>
+				% elif task.state.lower() == 'succeeded':
+					<span class="label label-success">${task.state.lower()}</span>
+				% else:
+					<span class="label">${task.state.lower()}</span>
+				% endif
 			</div>
-			<div id="metadata" class="tab-pane">
-				<table id="metadataTable">
-	              <thead>
-	                <th>Name</th>
-	                <th>Value</th>
-	              </thead>
-	              <tbody>
-	                <tr>
-	                  <td>Task id</td>
-	                  <td>${task.taskId}</td>
-	                </tr>
-	                <tr>
-	                  <td>Type</td>
-	                  <td>${task.taskType}</td>
-	                </tr>
-	                <tr>
-	                  <td>JobId</td>
-	                  <td><a href="${url('jobbrowser.views.single_job', jobid=joblnk.jobId)}" class="frame_tip jt_view" title="View this job">${joblnk.jobId}</a></td>
-	                </tr>
-	                <tr>
-	                  <td>State</td>
-	                  <td>${task.state}</td>
-	                </tr>
-	                <tr>
-	                  <td>Status</td>
-	                  <td>${task.mostRecentState}</td>
-	                </tr>
-	                <tr>
-	                  <td>Start Time</td>
-	                  <td>${task.startTimeFormatted}</td>
-	                </tr>
-	                <tr>
-	                  <td>Execution Start Time</td>
-	                  <td>${task.execStartTimeFormatted}</td>
-	                </tr>
-	                <tr>
-	                  <td>Execution Finish Time</td>
-	                  <td>${task.execFinishTimeFormatted}</td>
-	                </tr>
-	                <tr>
-	                  <td>Progress</td>
-	                  <td>${"%d" % (task.progress * 100)}%</td>
-	                </tr>
-	              </tbody>
-	            </table>
-			</div>
-			<div id="counters" class="tab-pane">
-				${comps.task_counters(task.counters)}
+		</div>
+		<div class="span10">
+			<ul class="nav nav-tabs">
+				<li class="active"><a href="#attempts" data-toggle="tab">Attempts</a></li>
+				<li><a href="#metadata" data-toggle="tab">Metadata</a></li>
+				<li><a href="#counters" data-toggle="tab">Counters</a></li>
+			</ul>
+
+			<div class="tab-content">
+				<div class="tab-pane active" id="attempts">
+					<table id="attemptsTable" class="table table-striped table-condensed">
+		              <thead>
+		                <tr>
+		                 <th>Attempt ID</th>
+		                 <th>Progress</th>
+		                 <th>State</th>
+		                 <th>Task Tracker</th>
+		                 <th>Start Time</th>
+		                 <th>End Time</th>
+		                 <th>Output Size</th>
+		                 <th>Phase</th>
+		                 <th>Shuffle Finish</th>
+		                 <th>Sort Finish</th>
+		                 <th>Map Finish</th>
+		                 <th>View</th>
+		                </tr>
+		              </thead>
+		              <tbody>
+		                % for attempt in task.attempts:
+		                 <tr data-dblclick-delegate="{'dblclick_loads':'.view_attempt'}">
+		                   <td>${attempt.attemptId_short}</td>
+		                   <td>${"%d" % (attempt.progress * 100)}%</td>
+		                   <td><span class="status_link ${attempt.state}">${attempt.state}</span></td>
+		                   <td><a href="/jobbrowser/trackers/${attempt.taskTrackerId}" class="task_tracker_link">${attempt.taskTrackerId}</a></td>
+		                   <td>${attempt.startTimeFormatted}</td>
+		                   <td>${attempt.finishTimeFormatted}</td>
+		                   <td>${attempt.outputSize}</td>
+		                   <td>${attempt.phase}</td>
+		                   <td>${attempt.shuffleFinishTimeFormatted}</td>
+		                   <td>${attempt.sortFinishTimeFormatted}</td>
+		                   <td>${attempt.mapFinishTimeFormatted}</td>
+		                   <td><a class="frame_tip jtask_view jt_slide_right view_attempt" title="View this attempt"
+		                          href="${ url('jobbrowser.views.single_task_attempt', jobid=joblnk.jobId, taskid=task.taskId, attemptid=attempt.attemptId) }"></a></td>
+		                 </tr>
+		                % endfor
+		              </tbody>
+		            </table>
+				</div>
+				<div id="metadata" class="tab-pane">
+					<table id="metadataTable" class="table table-striped table-condensed">
+		              <thead>
+		                <th>Name</th>
+		                <th>Value</th>
+		              </thead>
+		              <tbody>
+		                <tr>
+		                  <td>Task id</td>
+		                  <td>${task.taskId}</td>
+		                </tr>
+		                <tr>
+		                  <td>Type</td>
+		                  <td>${task.taskType}</td>
+		                </tr>
+		                <tr>
+		                  <td>JobId</td>
+		                  <td><a href="${url('jobbrowser.views.single_job', jobid=joblnk.jobId)}" class="frame_tip jt_view" title="View this job">${joblnk.jobId}</a></td>
+		                </tr>
+		                <tr>
+		                  <td>State</td>
+		                  <td>${task.state}</td>
+		                </tr>
+		                <tr>
+		                  <td>Status</td>
+		                  <td>${task.mostRecentState}</td>
+		                </tr>
+		                <tr>
+		                  <td>Start Time</td>
+		                  <td>${task.startTimeFormatted}</td>
+		                </tr>
+		                <tr>
+		                  <td>Execution Start Time</td>
+		                  <td>${task.execStartTimeFormatted}</td>
+		                </tr>
+		                <tr>
+		                  <td>Execution Finish Time</td>
+		                  <td>${task.execFinishTimeFormatted}</td>
+		                </tr>
+		                <tr>
+		                  <td>Progress</td>
+		                  <td>${"%d" % (task.progress * 100)}%</td>
+		                </tr>
+		              </tbody>
+		            </table>
+				</div>
+				<div id="counters" class="tab-pane">
+					${comps.task_counters(task.counters)}
+				</div>
 			</div>
 		</div>
-	</div>	
+	</div>
+</div>
+
+
+
 		<script type="text/javascript" charset="utf-8">
 			$(document).ready(function(){
-				$(".tabs").tabs();
 				$("#attemptsTable").dataTable({
 					"bPaginate": false,
 				    "bLengthChange": false,
@@ -156,18 +158,18 @@
 					"bInfo": false,
 					"bAutoWidth": false,
 					"bFilter": false,
-					"aoColumns": [ 
+					"aoColumns": [
 						{ "sWidth": "30%" },
 						{ "sWidth": "70%" }
 					]
 				});
-				
+
 				$(".taskCountersTable").dataTable({
 					"bPaginate": false,
 				    "bLengthChange": false,
 					"bInfo": false,
 					"bAutoWidth": false,
-					"aoColumns": [ 
+					"aoColumns": [
 						{ "sWidth": "30%" },
 						{ "sWidth": "70%" }
 					]
@@ -178,6 +180,6 @@
 
 			});
 		</script>
-     
+
 
     ${commonfooter()}

+ 31 - 35
apps/jobbrowser/src/jobbrowser/templates/tasks.mako

@@ -28,40 +28,36 @@
   </%def>
 	<div class="container-fluid">
 	<h1>Task View: Job:  ${jobid}</h1>
-	<div class="well">
-		<div class="">
-		
-				<form method="get" action="/jobbrowser/jobs/${jobid}/tasks">
-					<b>Filter tasks:</b>
-				
-						<select name="taskstate" class="submitter">
-							<option value="">All states</option>
-							<option value="succeeded" ${selected('succeeded', taskstate)}>succeeded</option>
-							<option value="running" ${selected('running', taskstate)}>running</option>
-							<option value="failed" ${selected('failed', taskstate)}>failed</option>
-							<option value="killed" ${selected('killed', taskstate)}>killed</option>
-							<option value="pending" ${selected('pending', taskstate)}>pending</option>
-						</select>
-				
-				
-						<select name="tasktype" class="submitter">
-							<option value="">All types</option>
-							<option value="map" ${selected('map', tasktype)}>maps</option>
-							<option value="reduce" ${selected('reduce', tasktype)}>reduces</option>
-							<option value="job_cleanup" ${selected('job_cleanup', tasktype)}>cleanups</option>
-							<option value="job_setup" ${selected('job_setup', tasktype)}>setups</option>
-						</select>
-				
-				
-						<input type="text" name="tasktext"  class="submitter" title="Text filter" placeholder="Text Filter"
-						% if tasktext:
-						value="${tasktext}"
-						% endif
-						/>
-				
-				</form>
-		
-		</div>
+	<div class="well hueWell">
+		<form method="get" action="/jobbrowser/jobs/${jobid}/tasks">
+			<b>Filter tasks:</b>
+
+				<select name="taskstate" class="submitter">
+					<option value="">All states</option>
+					<option value="succeeded" ${selected('succeeded', taskstate)}>succeeded</option>
+					<option value="running" ${selected('running', taskstate)}>running</option>
+					<option value="failed" ${selected('failed', taskstate)}>failed</option>
+					<option value="killed" ${selected('killed', taskstate)}>killed</option>
+					<option value="pending" ${selected('pending', taskstate)}>pending</option>
+				</select>
+
+
+				<select name="tasktype" class="submitter">
+					<option value="">All types</option>
+					<option value="map" ${selected('map', tasktype)}>maps</option>
+					<option value="reduce" ${selected('reduce', tasktype)}>reduces</option>
+					<option value="job_cleanup" ${selected('job_cleanup', tasktype)}>cleanups</option>
+					<option value="job_setup" ${selected('job_setup', tasktype)}>setups</option>
+				</select>
+
+
+				<input type="text" name="tasktext"  class="submitter" title="Text filter" placeholder="Text Filter"
+				% if tasktext:
+				value="${tasktext}"
+				% endif
+				/>
+
+		</form>
 	</div>
 
 
@@ -69,7 +65,7 @@
 	<p>There were no tasks that match your search criteria.</p>
 	% else:
 
-	<table class="datatables">
+	<table class="datatables table table-striped table-condensed">
 		<thead>
 			<tr>
 				<th>Task ID</th>