Changeset 5402


Ignore:
Timestamp:
Sep 6, 2010, 9:50:18 AM (12 years ago)
Author:
Nicklas Nordborg
Message:

Fixes #1506: Use AJAX to update job progress instead of page reloading

Location:
trunk/www
Files:
1 added
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/include/scripts/main.js

    r5370 r5402  
    290290    if (element != undefined)
    291291    {
    292       if (element.nodeName && element.nodeName == 'TR' && !Browser.isIE)
    293       {
    294         element.style.display='table-row';
    295       }
    296       else if (element.nodeName && element.nodeName == 'TBODY' && !Browser.isIE)
    297       {
    298         element.style.display='table-row-group';
    299       }
    300       else
    301       {
    302         element.style.display='block';
    303       }
     292      var display = 'block';
     293      if (element.nodeName && !Browser.isIE)
     294      {
     295        if (element.nodeName == 'TR')
     296        {
     297          display='table-row';
     298        }
     299        else if (element.nodeName == 'TBODY')
     300        {
     301          display='table-row-group';
     302        }
     303        else if (element.nodeName == 'TD')
     304        {
     305          display = 'table-cell';
     306        }
     307      }
     308      element.style.display = display;
    304309    }
    305310  }
  • trunk/www/views/jobs/view_job.jsp

    r5329 r5402  
    177177  %>
    178178  <base:page type="popup" title="<%=title%>">
    179   <base:head scripts="tabcontrol.js,table.js" styles="tabcontrol.css,progressbar.css,table.css">
     179  <base:head scripts="tabcontrol.js,table.js,ajax.js" styles="tabcontrol.css,progressbar.css,table.css">
    180180  <script language="JavaScript">
    181181  function autoUpdate()
    182182  {
    183183    var autoUpdate = <%=autoUpdate ? "true" : "false"%>;
    184     if (autoUpdate)
    185     {
    186       setTimeout('location.reload()', 10000);
    187     }
     184    if (autoUpdate) sendProgressUpdateRequest();
    188185  }
    189186  function abortJob()
     
    229226    {
    230227      Main.showUsingItems('<%=ID%>', '<%=itemType.name()%>', <%=itemId%>);
     228    }
     229   
     230    var lastStatus = '<%=status.name()%>';
     231    function sendProgressUpdateRequest()
     232    {
     233      var request = Ajax.getXmlHttpRequest();
     234      var url = 'ajax.jsp?ID=<%=ID%>&cmd=GetProgress&item_id=<%=itemId%>&'+Math.random();
     235      request.open("GET", url, true);
     236      Ajax.setReadyStateHandler(request, progressUpdateCallback);
     237      request.send(null);
     238    }
     239    function progressUpdateCallback(request)
     240    {
     241      var response = Ajax.parseResponse(request.responseText);
     242      var progress = response.getElements()[0];
     243      if (progress)
     244      {
     245        var status = progress['job.status'];
     246        var message = progress['job.message'];
     247        var percentComplete = progress['job.percent-complete'];
     248        var runningTime = progress['job.running-time'];
     249       
     250        if (lastStatus != status) location.reload();
     251        if (status == 'EXECUTING')
     252        {
     253          displayProgress(percentComplete, message, runningTime);
     254        }
     255      }
     256      setTimeout('sendProgressUpdateRequest()', 1500);
     257    }
     258
     259    function displayProgress(percentDone, message, runningTime)
     260    {
     261      // Percent complete
     262      var doneElement = document.getElementById('percentDone');
     263      var remainElement = document.getElementById('percentRemain');
     264      var unknownElement = document.getElementById('percentUnknown');
     265      if (percentDone == -1)
     266      {
     267        Main.hide('percentDone');
     268        Main.hide('percentRemain');
     269        Main.show('percentUnknown');
     270        Main.hide('percent');
     271      }
     272      else
     273      {
     274        Main.hide('percentUnknown');
     275        Main.show('percent');
     276        document.getElementById('percent').innerHTML = '&nbsp;' + percentDone+'%';
     277        doneElement.style.width = percentDone+'%';
     278        remainElement.style.width = (100-percentDone)+'%';
     279        Main.showHide('percentDone', percentDone > 0);
     280        Main.showHide('percentRemain', percentDone < 100);
     281      }
     282
     283      // Message
     284      document.getElementById('message').innerHTML = message;
     285
     286      // Running time
     287      document.getElementById('runningTime').innerHTML = runningTime;
    231288    }
    232289  </script>
     
    273330        <td class="prompt">Status</td>
    274331        <td <%=job.getStatus() == Job.Status.ERROR ? "class=\"error\" style=\"text-align: left;\"" : "" %>>
    275           <%=job.getStatus()%><%=job.isDryRun() ? " (dry-run)" : "" %>: <%=HTML.niceFormat(job.getStatusMessage())%>
     332          <%=job.getStatus()%><%=job.isDryRun() ? " (dry-run)" : "" %>:
     333          <span id="message"><%=HTML.niceFormat(job.getStatusMessage())%></span>
    276334        </td>
    277335      </tr>
     
    281339          <table border=0 cellspacing=0 cellpadding=0>
    282340          <tr>
    283           <td width="100" valign="middle">
    284             <table width="100" class="progressbar" border=0 cellspacing=0 cellpadding=0>
     341          <td valign="middle" style="max-width: 100px;">
     342            <table width="100px" class="progressbar" border=0 cellspacing=0 cellpadding=0>
    285343            <tr>
    286344              <%
    287345              int percent = job.getPercentComplete();
    288               if (percent > 0)
    289               {
    290                 %>
    291                 <td width="<%=percent%>%" class="done">&nbsp;</td>
    292                 <%
    293               }
    294               if (percent == -1)
    295               {
    296                 %>
    297                 <td width="100%" class="unknown">unknown</td>
    298                 <%
    299               }
    300               else if (percent < 100)
    301               {
    302                 %>
    303                 <td width="<%=100-percent%>%" class="remain">&nbsp;</td>
    304                 <%
    305               }
    306346              %>
     347              <td id="percentDone" class="done" width="<%=percent%>%"
     348                style="<%=percent <= 0 ? "display: none;" : ""%>">&nbsp;</td>
     349              <td id="percentRemain" class="remain" width="<%=100-percent%>%"
     350                style="<%=percent == 100 || percent == -1 ? "display: none;" : ""%>">&nbsp;</td>
     351              <td id="percentUnknown" width="100%" class="unknown"
     352                style="<%=percent != -1 ? "display: none" : "" %>">unknown</td>
    307353            </tr>
    308354            </table>
    309355          </td>
    310           <%if (percent != -1) { %>
    311           <td valign="middle">&nbsp;<%=percent%>%</td>
    312           <%} %>
     356          <td id="percent"
     357            style="<%=percent < 0 ? "display: none;" : "" %>">&nbsp;<%=percent%>%</td>
    313358          <%
    314359          if (logFile != null)
     
    347392      <tr valign="top">
    348393        <td class="prompt">Running time</td>
    349         <td>
     394        <td id="runningTime">
    350395          <%
    351396          Date started = job.getStarted();
     
    598643    <base:buttongroup align="center">
    599644      <%
    600       if (autoUpdate)
    601       {
    602         %>
    603         <base:button onclick="location.reload()" title="Refresh" image="refresh.gif" />
    604         <%
    605       }
    606       %>
    607       <%
    608645      if (supportsAbort)
    609646      {
     
    639676      %>
    640677      <base:button onclick="window.close()" title="Close" />
    641      
    642678    </base:buttongroup>
    643     <center>
    644     <%
    645     if (autoUpdate)
    646     {
    647       %>
    648       <i>(This page will automatically refresh itself every 10 seconds)</i>
    649       <%
    650     }
    651     %></center>
    652679  </base:body>
    653680  </base:page>
Note: See TracChangeset for help on using the changeset viewer.