Преглед на файлове

HUE-6325 [jb] Harmonized job pages and breadcrumbs

Enrico Berti преди 8 години
родител
ревизия
99be8cb257

+ 1 - 1
apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser-embeddable.css

@@ -14,4 +14,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 See the License for the specific language governing permissions and
 limitations under the License.
 limitations under the License.
- */.jobbrowser-components .content-panel-inner{padding:10px}.jobbrowser-components .tab-content{padding:10px;border:none !important}.jobbrowser-components .hue-breadcrumbs-bar{padding:0}.jobbrowser-components .hue-breadcrumbs-bar li{padding:12px}.jobbrowser-components .hue-breadcrumbs-bar li:first-child{padding-left:0;padding-right:0}.jobbrowser-components .hue-breadcrumbs-bar a{color:#0B7FAD !important;display:inline !important}.jobbrowser-components .divider{color:#CCC;padding-right:12px}.jobbrowser-components .app-icon{vertical-align:text-top}
+ */.jobbrowser-components .content-panel-inner{padding:10px}.jobbrowser-components .tab-content{padding:10px;border:none !important}.jobbrowser-components .jb-breadcrumbs{background-color:#F8F8F8;margin-bottom:0}.jobbrowser-components .jb-panel{padding-left:10px;padding-right:10px}.jobbrowser-components .hue-breadcrumbs-bar{padding:0}.jobbrowser-components .hue-breadcrumbs-bar li{padding:12px}.jobbrowser-components .hue-breadcrumbs-bar li:first-child{padding-left:0;padding-right:0}.jobbrowser-components .hue-breadcrumbs-bar a{color:#0B7FAD !important;display:inline !important}.jobbrowser-components .divider{color:#CCC;padding-right:12px}.jobbrowser-components .app-icon{vertical-align:text-top}.jobbrowser-components .sidebar-nav .nav-list li:not(.nav-header){text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}

+ 16 - 0
apps/jobbrowser/src/jobbrowser/static/jobbrowser/less/jobbrowser-embeddable.less

@@ -27,6 +27,16 @@
     border: none !important;
     border: none !important;
   }
   }
 
 
+  .jb-breadcrumbs {
+    background-color: @cui-gray-050;
+    margin-bottom: 0;
+  }
+
+  .jb-panel {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
   .hue-breadcrumbs-bar {
   .hue-breadcrumbs-bar {
     padding: 0;
     padding: 0;
   }
   }
@@ -53,4 +63,10 @@
   .app-icon {
   .app-icon {
     vertical-align: text-top;
     vertical-align: text-top;
   }
   }
+
+  .sidebar-nav .nav-list li:not(.nav-header) {
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+  }
 }
 }

+ 51 - 53
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -122,8 +122,10 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
 
         <div class="content-panel">
         <div class="content-panel">
           <div class="content-panel-inner">
           <div class="content-panel-inner">
-
+            <!-- ko if: $root.job() -->
             <div data-bind="template: { name: 'breadcrumbs' }"></div>
             <div data-bind="template: { name: 'breadcrumbs' }"></div>
+            <!-- /ko -->
+
             <!-- ko if: interface() !== 'slas' && interface() !== 'oozie-info' -->
             <!-- ko if: interface() !== 'slas' && interface() !== 'oozie-info' -->
             <!-- ko if: !$root.job() -->
             <!-- ko if: !$root.job() -->
             <form class="form-inline">
             <form class="form-inline">
@@ -212,25 +214,25 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
           <!-- ko if: $root.job() -->
           <!-- ko if: $root.job() -->
           <!-- ko with: $root.job() -->
           <!-- ko with: $root.job() -->
             <!-- ko if: mainType() == 'jobs' -->
             <!-- ko if: mainType() == 'jobs' -->
-              <div data-bind="template: { name: 'job-page' }"></div>
+              <div class="jb-panel" data-bind="template: { name: 'job-page' }"></div>
             <!-- /ko -->
             <!-- /ko -->
 
 
             <!-- ko if: mainType() == 'workflows' -->
             <!-- ko if: mainType() == 'workflows' -->
               <!-- ko if: type() == 'workflow' -->
               <!-- ko if: type() == 'workflow' -->
-                <div data-bind="template: { name: 'workflow-page' }"></div>
+                <div class="jb-panel" data-bind="template: { name: 'workflow-page' }"></div>
               <!-- /ko -->
               <!-- /ko -->
 
 
               <!-- ko if: type() == 'workflow-action' -->
               <!-- ko if: type() == 'workflow-action' -->
-                <div data-bind="template: { name: 'workflow-action-page' }"></div>
+                <div class="jb-panel" data-bind="template: { name: 'workflow-action-page' }"></div>
               <!-- /ko -->
               <!-- /ko -->
             <!-- /ko -->
             <!-- /ko -->
 
 
             <!-- ko if: mainType() == 'schedules' -->
             <!-- ko if: mainType() == 'schedules' -->
-              <div data-bind="template: { name: 'schedule-page' }"></div>
+              <div class="jb-panel" data-bind="template: { name: 'schedule-page' }"></div>
             <!-- /ko -->
             <!-- /ko -->
 
 
             <!-- ko if: mainType() == 'bundles' -->
             <!-- ko if: mainType() == 'bundles' -->
-              <div data-bind="template: { name: 'bundle-page' }"></div>
+              <div class="jb-panel" data-bind="template: { name: 'bundle-page' }"></div>
             <!-- /ko -->
             <!-- /ko -->
 
 
           <!-- /ko -->
           <!-- /ko -->
@@ -284,33 +286,36 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 
 
 
 
 <script type="text/html" id="breadcrumbs">
 <script type="text/html" id="breadcrumbs">
-  <h3>
-    <ul class="inline hue-breadcrumbs-bar" data-bind="foreach: breadcrumbs">
-      <li>
-      <!-- ko if: $index() > 1 -->
-        <span class="divider">&gt;</span>
-      <!-- /ko -->
+  <h3 class="jb-breadcrumbs">
+    <ul class="inline hue-breadcrumbs-bar">
+      <!-- ko foreach: breadcrumbs -->
+        <li>
+        <!-- ko if: $index() > 1 -->
+          <span class="divider">&gt;</span>
+        <!-- /ko -->
 
 
-      <!-- ko if: $index() != 0 -->
-        <!-- ko if: $index() != $parent.breadcrumbs().length - 1 -->
-          <a href="javascript:void(0)" data-bind="click: function() { $parent.breadcrumbs.splice($index()); $root.job().id(id); $root.job().fetchJob(); }">
-          <span data-bind="template: 'breadcrumbs-icons'"></span>
-          <span data-bind="text: name"></span></a>
+        <!-- ko if: $index() != 0 -->
+          <!-- ko if: $index() != $parent.breadcrumbs().length - 1 -->
+            <a href="javascript:void(0)" data-bind="click: function() { $parent.breadcrumbs.splice($index()); $root.job().id(id); $root.job().fetchJob(); }">
+            <span data-bind="template: 'breadcrumbs-icons'"></span>
+            <span data-bind="text: name"></span></a>
+          <!-- /ko -->
+          <!-- ko if: $index() == $parent.breadcrumbs().length - 1 -->
+            <span data-bind="template: 'breadcrumbs-icons'"></span>
+            <span data-bind="text: name, attr: { title: id }"></span>
+          <!-- /ko -->
         <!-- /ko -->
         <!-- /ko -->
-        <!-- ko if: $index() == $parent.breadcrumbs().length - 1 -->
-          <span data-bind="template: 'breadcrumbs-icons'"></span>
-          <span data-bind="text: name, attr: { title: id }"></span>
+        </li>
+      <!-- /ko -->
+
+      <!-- ko if: !$root.isMini() -->
+        <!-- ko if: ['workflows', 'schedules', 'bundles', 'slas'].indexOf(interface()) > -1 -->
+        <li class="pull-right">
+          <a href="javascript:void(0)" data-bind="click: function() { $root.selectInterface('oozie-info') }">${ _('Configuration') }</a>
+        </li>
         <!-- /ko -->
         <!-- /ko -->
       <!-- /ko -->
       <!-- /ko -->
-      </li>
     </ul>
     </ul>
-    <!-- ko if: ! $root.isMini() -->
-      <!-- ko if: ['workflows', 'schedules', 'bundles', 'slas'].indexOf(interface()) > -1 -->
-      <span class="pull-right">
-        <a href="javascript:void(0)" data-bind="click: function() { $root.selectInterface('oozie-info') }">${ _('Configuration') }</a>
-      </span>
-      <!-- /ko -->
-    <!-- /ko -->
   </h3>
   </h3>
 </script>
 </script>
 
 
@@ -452,14 +457,12 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       </div>
       </div>
     </div>
     </div>
     <div class="span10">
     <div class="span10">
-      <div class="pull-right" data-bind="template: { name: 'job-actions' }"></div>
-      <div class="clearfix"></div>
-
-      <ul class="nav nav-tabs margin-top-20">
+      <ul class="nav nav-pills margin-top-20">
         <li class="active"><a href="#job-mapreduce-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li class="active"><a href="#job-mapreduce-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li><a href="#job-mapreduce-page-tasks" data-bind="click: function(){ fetchProfile('tasks'); $('a[href=\'#job-mapreduce-page-tasks\']').tab('show'); }">${ _('Tasks') }</a></li>
         <li><a href="#job-mapreduce-page-tasks" data-bind="click: function(){ fetchProfile('tasks'); $('a[href=\'#job-mapreduce-page-tasks\']').tab('show'); }">${ _('Tasks') }</a></li>
         <li><a href="#job-mapreduce-page-metadata" data-bind="click: function(){ fetchProfile('metadata'); $('a[href=\'#job-mapreduce-page-metadata\']').tab('show'); }">${ _('Metadata') }</a></li>
         <li><a href="#job-mapreduce-page-metadata" data-bind="click: function(){ fetchProfile('metadata'); $('a[href=\'#job-mapreduce-page-metadata\']').tab('show'); }">${ _('Metadata') }</a></li>
         <li><a href="#job-mapreduce-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
         <li><a href="#job-mapreduce-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
+        <li class="pull-right" data-bind="template: { name: 'job-actions' }"></li>
       </ul>
       </ul>
 
 
       <div class="tab-content">
       <div class="tab-content">
@@ -541,7 +544,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="sidebar-nav">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
           <li class="nav-header">${ _('Id') }</li>
-          <li><span data-bind="text: id"></span></li>
+          <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
           <li class="nav-header">${ _('Type') }</li>
           <li class="nav-header">${ _('Type') }</li>
           <li><span data-bind="text: type"></span></li>
           <li><span data-bind="text: type"></span></li>
           <li class="nav-header">${ _('Progress') }</li>
           <li class="nav-header">${ _('Progress') }</li>
@@ -568,7 +571,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       </div>
       </div>
     </div>
     </div>
     <div class="span10">
     <div class="span10">
-      <ul class="nav nav-tabs margin-top-20">
+      <ul class="nav nav-pills margin-top-20">
         <li class="active"><a href="#job-mapreduce-task-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li class="active"><a href="#job-mapreduce-task-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li><a href="#job-mapreduce-task-page-attempts" data-bind="click: function(){ fetchProfile('attempts'); $('a[href=\'#job-mapreduce-task-page-attempts\']').tab('show'); }">${ _('Attempts') }</a></li>
         <li><a href="#job-mapreduce-task-page-attempts" data-bind="click: function(){ fetchProfile('attempts'); $('a[href=\'#job-mapreduce-task-page-attempts\']').tab('show'); }">${ _('Attempts') }</a></li>
         <li><a href="#job-mapreduce-task-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
         <li><a href="#job-mapreduce-task-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
@@ -636,7 +639,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="sidebar-nav">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
           <li class="nav-header">${ _('Id') }</li>
-          <li><span data-bind="text: id"></span></li>
+          <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
           <li class="nav-header">${ _('Type') }</li>
           <li class="nav-header">${ _('Type') }</li>
           <li><span data-bind="text: type"></span></li>
           <li><span data-bind="text: type"></span></li>
           <li class="nav-header">${ _('Progress') }</li>
           <li class="nav-header">${ _('Progress') }</li>
@@ -668,7 +671,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
     </div>
     </div>
     <div class="span10">
     <div class="span10">
 
 
-      <ul class="nav nav-tabs margin-top-20">
+      <ul class="nav nav-pills margin-top-20">
         <li class="active"><a href="#job-mapreduce-task-attempt-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li class="active"><a href="#job-mapreduce-task-attempt-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li><a href="#job-mapreduce-task-attempt-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-attempt-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
         <li><a href="#job-mapreduce-task-attempt-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-attempt-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
       </ul>
       </ul>
@@ -699,7 +702,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="sidebar-nav">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
           <li class="nav-header">${ _('Id') }</li>
-          <li><span data-bind="text: id"></span></li>
+          <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
           <li class="nav-header">${ _('Name') }</li>
           <li class="nav-header">${ _('Name') }</li>
           <li><span data-bind="text: name"></span></li>
           <li><span data-bind="text: name"></span></li>
           <li class="nav-header">${ _('Type') }</li>
           <li class="nav-header">${ _('Type') }</li>
@@ -735,7 +738,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="sidebar-nav">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
           <li class="nav-header">${ _('Id') }</li>
-          <li><span data-bind="text: id"></span></li>
+          <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
           <li class="nav-header">${ _('Name') }</li>
           <li class="nav-header">${ _('Name') }</li>
           <li><span data-bind="text: name"></span></li>
           <li><span data-bind="text: name"></span></li>
           <li class="nav-header">${ _('Type') }</li>
           <li class="nav-header">${ _('Type') }</li>
@@ -809,7 +812,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="sidebar-nav">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
           <li class="nav-header">${ _('Id') }</li>
-          <li><span data-bind="text: id"></span></li>
+          <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
           <!-- ko if: doc_url -->
           <!-- ko if: doc_url -->
           <li class="nav-header">${ _('Document') }</li>
           <li class="nav-header">${ _('Document') }</li>
           <li>
           <li>
@@ -853,7 +856,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
     </div>
     </div>
     <div class="span10">
     <div class="span10">
 
 
-      <ul class="nav nav-tabs margin-top-20">
+      <ul class="nav nav-pills margin-top-20">
         <li class="active"><a href="#workflow-page-graph" data-toggle="tab">${ _('Graph') }</a></li>
         <li class="active"><a href="#workflow-page-graph" data-toggle="tab">${ _('Graph') }</a></li>
         <li><a href="#workflow-page-metadata" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#workflow-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
         <li><a href="#workflow-page-metadata" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#workflow-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
         <li><a href="#workflow-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li><a href="#workflow-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
@@ -929,7 +932,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="sidebar-nav">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
           <li class="nav-header">${ _('Id') }</li>
-          <li><span data-bind="text: id"></span></li>
+          <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
           <li class="nav-header">${ _('Name') }</li>
           <li class="nav-header">${ _('Name') }</li>
           <li><span data-bind="text: name"></span></li>
           <li><span data-bind="text: name"></span></li>
           <li class="nav-header">${ _('Type') }</li>
           <li class="nav-header">${ _('Type') }</li>
@@ -947,7 +950,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
     </div>
     </div>
 
 
     <div class="span10">
     <div class="span10">
-      <ul class="nav nav-tabs margin-top-20">
+      <ul class="nav nav-pills margin-top-20">
         <li class="active"><a href="#workflow-action-page-metadata" data-toggle="tab">${ _('Properties') }</a></li>
         <li class="active"><a href="#workflow-action-page-metadata" data-toggle="tab">${ _('Properties') }</a></li>
         <li><a href="#workflow-action-page-tasks" data-toggle="tab">${ _('Child jobs') }</a></li>
         <li><a href="#workflow-action-page-tasks" data-toggle="tab">${ _('Child jobs') }</a></li>
         <li><a href="#workflow-action-page-xml" data-toggle="tab">${ _('XML') }</a></li>
         <li><a href="#workflow-action-page-xml" data-toggle="tab">${ _('XML') }</a></li>
@@ -1008,7 +1011,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="sidebar-nav">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
           <li class="nav-header">${ _('Id') }</li>
-          <li><span data-bind="text: id"></span></li>
+          <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
           <li class="nav-header">${ _('Name') }</li>
           <li class="nav-header">${ _('Name') }</li>
           <li><span data-bind="text: name"></span></li>
           <li><span data-bind="text: name"></span></li>
           <li class="nav-header">${ _('Type') }</li>
           <li class="nav-header">${ _('Type') }</li>
@@ -1038,8 +1041,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       </div>
       </div>
     </div>
     </div>
     <div class="span10">
     <div class="span10">
-
-      <ul class="nav nav-tabs">
+      <ul class="nav nav-pills margin-top-20">
         <li class="active"><a href="#schedule-page-task" data-toggle="tab">${ _('Tasks') }</a></li>
         <li class="active"><a href="#schedule-page-task" data-toggle="tab">${ _('Tasks') }</a></li>
         <li><a href="#schedule-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li><a href="#schedule-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li><a href="#schedule-page-metadata" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#schedule-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
         <li><a href="#schedule-page-metadata" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#schedule-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
@@ -1123,7 +1125,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       <div class="sidebar-nav">
       <div class="sidebar-nav">
         <ul class="nav nav-list">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Id') }</li>
           <li class="nav-header">${ _('Id') }</li>
-          <li><span data-bind="text: id"></span></li>
+          <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
           <li class="nav-header">${ _('Name') }</li>
           <li class="nav-header">${ _('Name') }</li>
           <li><span data-bind="text: name"></span></li>
           <li><span data-bind="text: name"></span></li>
           <li class="nav-header">${ _('Type') }</li>
           <li class="nav-header">${ _('Type') }</li>
@@ -1153,21 +1155,17 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       </div>
       </div>
     </div>
     </div>
     <div class="span10">
     <div class="span10">
-      <div class="pull-right" data-bind="template: { name: 'job-actions' }"></div>
-      <div class="clearfix"></div>
-
-      <ul class="nav nav-tabs">
+      <ul class="nav nav-pills margin-top-20">
         <li class="active"><a href="#bundle-page-coordinators" data-toggle="tab">${ _('Tasks') }</a></li>
         <li class="active"><a href="#bundle-page-coordinators" data-toggle="tab">${ _('Tasks') }</a></li>
         <li><a href="#bundle-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li><a href="#bundle-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
         <li><a href="#bundle-page-metadata"  data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#bundle-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
         <li><a href="#bundle-page-metadata"  data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#bundle-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
         <li><a href="#bundle-page-xml" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#bundle-page-xml\']').tab('show'); }">${ _('XML') }</a></li>
         <li><a href="#bundle-page-xml" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#bundle-page-xml\']').tab('show'); }">${ _('XML') }</a></li>
+        <li class="pull-right" data-bind="template: { name: 'job-actions' }"></li>
       </ul>
       </ul>
 
 
       <div class="tab-content">
       <div class="tab-content">
         <div class="tab-pane active" id="bundle-page-coordinators">
         <div class="tab-pane active" id="bundle-page-coordinators">
-          <div data-bind="template: { name: 'job-actions' }"></div>
-
-          ${_('Filter')} <input type="text" class="input-xlarge search-query"  placeholder="${_('Filter by id, name, user...')}" />
+          <input type="text" class="input-xlarge search-query"  placeholder="${_('Filter by id, name, user...')}" />
           <div class="btn-group">
           <div class="btn-group">
             <select size="3" multiple="true"></select>
             <select size="3" multiple="true"></select>
             <a class="btn btn-status btn-success" data-value="completed">${ _('Succeeded') }</a>
             <a class="btn btn-status btn-success" data-value="completed">${ _('Succeeded') }</a>