From e21a117cbeb9c441b7dc6f8ad769307947714c42 Mon Sep 17 00:00:00 2001
From: Davide Franco <bacula-dev@dflc.ch>
Date: Tue, 21 Dec 2010 14:37:50 +0100
Subject: [PATCH] bacula-web: Improved Jobs page

 - Improved apparence for last jobs
 - Added scrollbar for last jobs
 - Possibility to choose how many jobs to see in the list (20,40 or 60)
---
 gui/bacula-web/jobs.php           | 12 ++++++-
 gui/bacula-web/style/default.css  | 18 +++++-----
 gui/bacula-web/templates/jobs.tpl | 60 +++++++++++++++++++++----------
 3 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/gui/bacula-web/jobs.php b/gui/bacula-web/jobs.php
index e4fe0bfc4b..c140a6c0b5 100644
--- a/gui/bacula-web/jobs.php
+++ b/gui/bacula-web/jobs.php
@@ -73,7 +73,12 @@
   $query .= "LEFT JOIN Pool ON Job.PoolId=Pool.PoolId ";
   $query .= "LEFT JOIN Status ON Job.JobStatus = Status.JobStatus ";
   $query .= "ORDER BY Job.EndTime DESC ";
-  $query .= "LIMIT 20";
+  
+  // Determine how many jobs to display
+  if( isset($_POST['limit']) )
+	$query .= "LIMIT " . $_POST['limit'];
+  else
+	$query .= "LIMIT 20 ";
   
   $jobsresult = $dbSql->db_link->query( $query );
   
@@ -82,10 +87,15 @@
 	  die("Unable to get last failed jobs from catalog" . $jobsresult->getMessage() );
   }else {
 	  while( $job = $jobsresult->fetchRow( DB_FETCHMODE_ASSOC ) ) {
+		// Determine icon for job
 		if( $job['JobStatus'] == 'T' )
 			$job['Job_icon'] = "s_ok.gif";
 		else
 			$job['Job_icon'] = "s_error.gif";
+		
+		// Odd or even row
+		if( count($last_jobs) % 2)
+			$job['Job_classe'] = 'odd';
 			
 		array_push( $last_jobs, $job);
 	  }
diff --git a/gui/bacula-web/style/default.css b/gui/bacula-web/style/default.css
index ef4573b51c..47563384cb 100644
--- a/gui/bacula-web/style/default.css
+++ b/gui/bacula-web/style/default.css
@@ -89,7 +89,7 @@ a:hover { color: #736F6E }
 #main_center {
  position: absolute; 
  left:10px; 
- width: 900px; 
+ width: 1000px; 
  /*border: 1px solid red; */
  margin-top: 0px;
 }
@@ -137,7 +137,7 @@ a:hover { color: #736F6E }
 .box table.list
 {
  border-collapse: collapse;
- width: 100%;
+ /*width: 100%;*/
  margin: 0px;
 }
 
@@ -154,7 +154,7 @@ a:hover { color: #736F6E }
 
 .box table tr td
 {
- padding: 2px;
+ padding: 5px;
  font-size: 8pt;
  height: 20px;
 }
@@ -170,18 +170,22 @@ a:hover { color: #736F6E }
  margin: 2px;
 }
 
-.box table tr td.info
+.box table td.info
 {
  text-align: center; 
  vertical-align: middle;
- /* padding-right: 8em; */
+ padding-right: 8em;
  font-weight: bold;
  background-color: #E0E0E0;
  height: auto;
  padding: 5px;
+ margin:0px;
 }
 
 .box table tr td.info a { font-size: 8pt;}
+
+.odd { background-color: #DCDCDC; }
+
 table {
  width: 100%;
  margin: 0px;
@@ -291,9 +295,7 @@ td,input,select {
  font-size : 13px; 
  color: red;
 }
-.header { 
- font-size : 18px; 
-}
+
 .size_small { 
  font-size: 9px; 
 }
diff --git a/gui/bacula-web/templates/jobs.tpl b/gui/bacula-web/templates/jobs.tpl
index c8608898f6..344231c1b0 100644
--- a/gui/bacula-web/templates/jobs.tpl
+++ b/gui/bacula-web/templates/jobs.tpl
@@ -47,33 +47,55 @@
 		{/foreach}
 	</table>
   </div> <!-- end div box -->
-  <!-- Failed jobs -->  
+
+  <!-- Last jobs -->  
   <div class="box">
 	<p class="title">Last jobs</p>
-	<table class="list">
+	<table class="list" border="0">
 	  <tr>
-		<td class="info">Status</td>
-		<td class="info">Job ID</td>
-		<td class="info">BackupJob</td>
-		<td class="info">Start Time</td>
-		<td class="info">End Time</td>
-		<td class="info">Elapsed time</td>
-		<td class="info">Level</td>
-		<td class="info">Pool</td>
+		<td width="50" class="info">Status</td>
+		<td width="50" class="info">Job ID</td>
+		<td width="70" class="info">BackupJob</td>
+		<td width="80" class="info">Start Time</td>
+		<td width="80" class="info">End Time</td>
+		<td width="70" class="info">Elapsed time</td>
+		<td width="50" class="info">Level</td>
+		<td width="80" class="info">Pool</td>
 	  </tr>
+	</table>
+	<div class="listbox">
+	<table class="list" border="0">
 	  {foreach from=$last_jobs item=job}
 	  <tr>
-		<td> <img width="20" src="style/images/{$job.Job_icon}" alt="" title="{$job.JobStatusLong}" /> </td>
-		<td>{$job.JobId}</td>
-		<td>{$job.Job_name}</td>
-		<td>{$job.StartTime}</td>
-		<td>{$job.EndTime}</td>
-		<td>{$job.elapsed}</td>
-		<td align="center">{$job.Level}</td>
-		<td>{$job.Pool_name}</td>
+		<td width="50" class="{$job.Job_classe}">
+			<img width="20" src="style/images/{$job.Job_icon}" alt="" title="{$job.JobStatusLong}" />
+		</td>
+		<td width="50" class="{$job.Job_classe}">{$job.JobId}</td>
+		<td width="70" class="{$job.Job_classe}">{$job.Job_name}</td>
+		<td width="80" class="{$job.Job_classe}">{$job.StartTime}</td>
+		<td width="80" class="{$job.Job_classe}">{$job.EndTime}</td>
+		<td width="70" class="{$job.Job_classe}">{$job.elapsed}</td>
+		<td width="50" class="{$job.Job_classe}">{$job.Level}</td>
+		<td width="80" class="{$job.Job_classe}">{$job.Pool_name}</td>
+	  </tr>
+	{/foreach}
+	</table>
+	</div> <!-- end div class=listbox -->
+	<form action="jobs.php" method="post">
+	<table>
+	  <tr>
+		<td class="info" colspan="8">
+			Limit to
+			<select name="limit">
+				<option value="20">20
+				<option value="40">40
+				<option value="60">60
+			</select>
+			<input type="submit" value="Update" />
+		</td>
 	  </tr>
-	  {/foreach}
 	</table>
+	</form>
   </div>
 
 </div>
-- 
2.39.2