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)

diff --git a/gui/bacula-web/jobs.php b/gui/bacula-web/jobs.php
index e4fe0bfc4b290f49e30169796bbcd3cc7f411d65..c140a6c0b5af139de9557ff058ae50a03a3e6e1d 100644 (file)
--- 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 ef4573b51ce6844012e2f88ca7b7b3b9931da202..47563384cb3471eb25f05443bb43c3e971080850 100644 (file)
--- 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 c8608898f6ed55b03f077f2f38bd6cca6e780377..344231c1b0443fb48cf72958918126a47f69d957 100644 (file)
--- 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>