filtered web queue (#1113)

implements #969 partially

share/public/css/netdisco.css

@@ -597,6 +597,17 @@ div.toggle.btn-small {
   width: 152px;
 }
 
+/* set the drop-down width */
+.nd_sidebar-narrow-dropdown {
+  margin-top: 4px;
+  width: 46px;
+}
+
+/* set the drop-down width */
+.nd_sidebar-dropdown {
+  width: 130px;
+}
+
 /* set the day/mon/year drop-down width */
 #nd_days-select {
   margin-top: 4px;

share/views/admintask.tt

@@ -30,11 +30,17 @@
         href="#[% task.tag | html_entity %]_pane">[% task.label | html_entity %]</a></li>
       [% IF task.tag == 'jobqueue' %]
       <span id="nd_device-name">
-        <a class="nd_adminbutton" name="delall" href="#"><i class="icon-trash text-error"></i></a>
-        <a id="nd_countdown-refresh" href="#"><i class="text-success icon-refresh"></i></a>
-        <a id="nd_countdown-control" href="#">
-          <i id="nd_countdown-control-icon" class="text-success icon-play"></i></a>
         <span id="nd_countdown"></span>
+        &nbsp;&nbsp;
+        <a id="nd_countdown-control" href="#">
+          <i id="nd_countdown-control-icon" class="text-success icon-play icon-large"></i>
+        </a>
+        &nbsp;&nbsp;
+        <a id="nd_countdown-refresh" href="#"><i class="text-success icon-refresh icon-large"></i></a>
+        &nbsp;&nbsp;
+        <a class="nd_adminbutton" name="delall" href="#"><i class="icon-trash icon-large text-error"></i></a>
+        &nbsp;&nbsp;
+        <a id="nd_jobqueue-bookmark" href="#"><i class="icon-bookmark icon-large"></i></a>
       </span>
       [% ELSIF task.tag == 'userlog' %]
       <span id="nd_device-name">

share/views/ajax/admintask/jobqueue.tt

@@ -4,16 +4,14 @@
 <table class="table table-bordered table-condensed table-hover nd_floatinghead">
   <thead>
     <tr>
-      <th class="nd_center-cell">Entered</th>
+      <th class="nd_center-cell">Backend</th>
       <th class="nd_center-cell">Action</th>
-      <th class="nd_center-cell">Status</th>
       <th class="nd_center-cell">Device</th>
-      <th class="nd_center-cell">Port</th>
-      <th class="nd_center-cell">Param</th>
-      <th class="nd_center-cell">User</th>
-      <th class="nd_center-cell">Started</th>
-      <th class="nd_center-cell">Finished</th>
-      <th class="nd_center-cell">Action</th>
+      <th class="nd_center-cell">Submitted By</th>
+      <th class="nd_center-cell">Status</th>
+      <th class="nd_center-cell">Duration</th>
+      <th class="nd_center-cell">Details</th>
+      <th class="nd_center-cell">Cancel</th>
     </tr>
   </thead>
   <tbody>
@@ -24,17 +22,18 @@
       [% ' class="nd_jobqueueitem info"'    IF row.status.search('^queued-') %]
       data-content="[% row.log | html_entity %]"
     >
-      <td class="nd_center-cell">[% row.entered_stamp | html_entity %]</td>
+      [% IF row.status.search('^queued-') %]
+      <td class="nd_center-cell">[% row.status.remove('^queued-') | html_entity %]</td>
+      [% ELSE %]
+      <td class="nd_center-cell"></td>
+      [% END %]
+
       <td class="nd_center-cell">
         [% FOREACH word IN row.action.split('_') %]
         [% word.ucfirst | html_entity %]&nbsp;
         [% END %]
       </td>
-      [% IF row.status.search('^queued-') %]
-      <td class="nd_center-cell">Running on &quot;[% row.status.remove('^queued-') | html_entity %]&quot;</td>
-      [% ELSE %]
-      <td class="nd_center-cell">[% row.status.ucfirst | html_entity %]</td>
-      [% END %]
+
       <td class="nd_center-cell">
         [% IF row.action == 'discover' AND row.status == 'error' %]
         <a href="[% uri_for('/') | none %]?device=[% row.device | uri %]">[% row.device | html_entity %]</a>
@@ -42,16 +41,42 @@
         <a href="[% uri_for('/device') | none %]?q=[% row.device | uri %]">[% row.target.dns || row.device | html_entity %]</a>
         [% END %]
       </td>
-      <td class="nd_center-cell">[% row.port | html_entity %]</td>
-      <td class="nd_center-cell">[% row.subaction | html_entity %]</td>
+
       <td class="nd_center-cell">[% row.username | html_entity %]</td>
-      <td class="nd_center-cell">[% row.started_stamp | html_entity %]</td>
-      <td class="nd_center-cell">[% row.finished_stamp | html_entity %]</td>
+
+      [% IF row.status.search('^queued-') %]
+      <td class="nd_center-cell">Running</td>
+      [% ELSE %]
+      <td class="nd_center-cell">[% row.status.ucfirst | html_entity %]</td>
+      [% END %]
+
+      <td class="nd_center-cell">[% row.duration | html_entity %]</td>
+
+      <td class="nd_center-cell">
+        <button class="btn nd_jobqueue-extra" data-extra="nd_jobqueue_[% row.job | html_entity %]"><i class="icon-plus"></i></button>
+      </td>
+
       <td class="nd_center-cell">
         <input data-form="del" name="job" type="hidden" value="[% row.job | html_entity %]">
         <button class="btn nd_adminbutton" name="del" type="submit"><i class="icon-trash text-error"></i></button>
       </td>
     </tr>
+
+    <tr id="nd_jobqueue_[% row.job | html_entity %]" class="nd_collapse-pre-hidden">
+      <td colspan="8">
+        <table>
+        <tr><td class="span2">ID</td><td> [% row.job | html_entity %] </td></tr>
+        <tr><td>Entered</td><td> [% row.entered_stamp | html_entity %] </td></tr>
+        <tr><td>Started</td><td> [% row.started_stamp | html_entity %] </td></tr>
+        <tr><td>Finished</td><td> [% row.finished_stamp | html_entity %] </td></tr>
+        <tr><td>Port</td><td> [% row.port | html_entity %] </td></tr>
+        <tr><td>Subaction</td><td> [% row.subaction | html_entity %] </td></tr>
+        <tr><td>User IP</td><td> [% row.userip | html_entity %] </td></tr>
+        <tr><td>Device Key</td><td> [% row.device_key | html_entity %] </td></tr>
+        <tr><td>Log</td><td> [% row.log | html_entity %] </td></tr>
+        </table>
+      </td>
+    </tr>
     [% END %]
   </tbody>
 </table>

share/views/js/admintask.js

@@ -13,7 +13,7 @@
   function inner_view_processing(tab) {
 
     // reload this table every 5 seconds
-    if (tab == 'jobqueue'
+    if ((tab == 'jobqueue')
         && $('#nd_countdown-control-icon').hasClass('icon-play')) {
 
         $('#nd_countdown').text(timermax);
@@ -40,6 +40,19 @@
         }, (timermax * 1000)));
     }
 
+    // activate typeahead on the queue filter boxes
+    $('.nd_queue_ta').autocomplete({
+      source: function (request, response)  {
+        var name = $(this.element)[0].name;
+        var query = $(this.element).serialize();
+        return $.get( uri_base + '/ajax/data/queue/typeahead/' + name, query, function (data) {
+          return response(data);
+        });
+      }
+      ,delay: 150
+      ,minLength: 0
+    });
+
     // activate typeahead on the topo boxes
     $('.nd_topo_dev').autocomplete({
       source: uri_base + '/ajax/data/deviceip/typeahead'
@@ -71,6 +84,15 @@
       ,minLength: 0
     });
 
+    $('.nd_jobqueue-extra').click(function(event) {
+      event.preventDefault();
+      var icon = $(this).children('i');
+      $(icon).toggleClass('icon-plus');
+      $(icon).toggleClass('icon-minus');
+      var extra_id = $(this).data('extra');
+      $('#' + extra_id).toggle();
+    });
+
     // activate modals and tooltips
     $('.nd_modal').modal({show: false});
     $("[rel=tooltip]").tooltip({live: true});
@@ -81,6 +103,18 @@
     var tab = '[% task.tag | html_entity %]'
     var target = '#' + tab + '_pane';
 
+    // get autocomplete field on input focus
+    $('.nd_sidebar').on('focus', '.nd_queue_ta', function(e) {
+      $(this).autocomplete('search', '%') });
+    $('.nd_sidebar').on('click', '.nd_topo_dev_caret', function(e) {
+      $(this).siblings('.nd_queue_ta').autocomplete('search', '%') });
+
+    // get all devices on device input focus
+    $('.nd_sidebar').on('focus', '.nd_topo_dev', function(e) {
+      $(this).autocomplete('search', '%') });
+    $('.nd_sidebar').on('click', '.nd_topo_dev_caret', function(e) {
+      $(this).siblings('.nd_topo_dev').autocomplete('search', '%') });
+
     // get all devices on device input focus
     $(target).on('focus', '.nd_topo_dev', function(e) {
       $(this).autocomplete('search', '%') });
@@ -95,12 +129,29 @@
       $(this).siblings('.nd_topo_port').autocomplete('search');
     });
 
+    // job control sidebar submit should reset timer
+    // and update bookmark
+    $('#' + tab + '_submit').click(function(event) {
+      for (var i = 0; i < nd_timers.length; i++) {
+          clearTimeout(nd_timers[i]);
+      }
+      // reset the timer cache
+      timercache = timermax - 1;
+
+      // bookmark
+      var querystr = $('#' + tab + '_form').serialize();
+      $('#nd_jobqueue-bookmark').attr('href',uri_base + '/admin/' + tab + '?' + querystr);
+    });
+
     // job control refresh icon should reload the page
     $('#nd_countdown-refresh').click(function(event) {
       event.preventDefault();
       for (var i = 0; i < nd_timers.length; i++) {
           clearTimeout(nd_timers[i]);
       }
+      // reset the timer cache
+      timercache = timermax - 1;
+      // and reload content
       $('#' + tab + '_form').trigger('submit');
     });
 

share/views/sidebar/admintask/jobqueue.tt

@@ -0,0 +1,49 @@
+
+            <span class="nd_sidebar-title"><em>Job Queue Filters</em></span>
+
+            <div class="clearfix">
+            </div>
+            <div class="clearfix">
+
+            <em class="muted">Backend:</em><br/>
+            <div class="input-append">
+              <input data-form="filter" class="nd_queue_ta nd_sidebar-dropdown" name="backend" type="text" value="[% params.backend | html_entity %]">
+              <span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
+            </div>
+
+            <em class="muted">Action:</em><br/>
+            <div class="input-append">
+              <input data-form="filter" class="nd_queue_ta nd_sidebar-dropdown" name="action" type="text" value="[% params.action | html_entity %]">
+              <span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
+            </div>
+
+            <em class="muted">Device:</em><br/>
+            <div class="input-append">
+              <input data-form="filter" class="nd_topo_dev nd_sidebar-dropdown" name="device" type="text" value="[% params.device | html_entity %]">
+              <span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
+            </div>
+
+            <em class="muted">Submitted by:</em><br/>
+            <div class="input-append">
+              <input data-form="filter" class="nd_queue_ta nd_sidebar-dropdown" name="username" type="text" value="[% params.username | html_entity %]">
+              <span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
+            </div>
+
+            <em class="muted">Job status:</em><br/>
+            <div class="input-append">
+              <input data-form="filter" class="nd_queue_ta nd_sidebar-dropdown" name="status" type="text" value="[% params.status | html_entity %]">
+              <span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
+            </div>
+
+            <em class="muted">Duration:</em><br/>
+            <label><span id="nd_vlan-label-text">Longer than </span>
+              <input name="duration" class="nd_sidebar-narrow-dropdown" type="number" placeholder="0"
+                value="[% params.duration | html_entity %]" type="text"/> mins
+            </label>
+
+            </div>
+
+            <button id="[% task.tag | html_entity %]_submit" type="submit" class="btn btn-info">
+                <i class="icon-search icon-large pull-left nd_navbar-icon"></i>
+            Filter</button>
+