Sfoglia il codice sorgente

HUE-1159 [jb] MR2 Layout is broken by task and attempt IDs length

Added hellipses if the job, task or attempt id is longer than 20 characters
Enrico Berti 12 anni fa
parent
commit
b2dbfb9

+ 45 - 38
apps/jobbrowser/src/jobbrowser/templates/attempt.mako

@@ -20,6 +20,9 @@
 <%namespace name="comps" file="jobbrowser_components.mako" />
 
 ${ commonheader(_('Task Attempt: %(attemptId)s') % dict(attemptId=attempt.attemptId_short), "jobbrowser", user) | n,unicode }
+
+<link href="/jobbrowser/static/css/jobbrowser.css" rel="stylesheet">
+
 <div class="container-fluid">
     <h1>${_('Task Attempt: %(attemptId)s - Job Browser') % dict(attemptId=attempt.attemptId_short)}</h1>
     <div class="row-fluid">
@@ -27,12 +30,12 @@ ${ commonheader(_('Task Attempt: %(attemptId)s') % dict(attemptId=attempt.attemp
             <div class="well sidebar-nav">
                 <ul class="nav nav-list">
                     <li class="nav-header">${_('Attempt ID')}</li>
-                    <li>${attempt.attemptId_short}</li>
+                    <li class="hellipsify">${attempt.attemptId_short}</li>
                     <li class="nav-header">${_('Task')}</li>
-                    <li><a href="${url('jobbrowser.views.single_task', job=joblnk.jobId, taskid=taskid)}" title="${_('View this task')}">${task.taskId_short}</a>
+                    <li><a href="${url('jobbrowser.views.single_task', job=joblnk.jobId, taskid=taskid)}" class="hellipsify">${task.taskId_short}</a>
                     </li>
                     <li class="nav-header">${_('Job')}</li>
-                    <li><a href="${url('jobbrowser.views.single_job', job=joblnk.jobId)}" title="${_('View this job')}">${joblnk.jobId_short}</a></li>
+                    <li><a href="${url('jobbrowser.views.single_job', job=joblnk.jobId)}" class="hellipsify">${joblnk.jobId_short}</a></li>
                     <li class="nav-header">${_('Status')}</li>
                     <li>
                         <%
@@ -133,44 +136,48 @@ ${ commonheader(_('Task Attempt: %(attemptId)s') % dict(attemptId=attempt.attemp
     </div>
 </div>
 
-<script type="text/javascript" charset="utf-8">
-    $(document).ready(function(){
-        $("#metadataTable").dataTable({
-            "bPaginate": false,
-            "bLengthChange": false,
-            "bInfo": false,
-            "bAutoWidth": false,
-            "bFilter": false,
-            "aoColumns": [
-                { "sWidth": "30%" },
-                { "sWidth": "70%" }
-            ],
-            "oLanguage": {
-                "sEmptyTable": "${_('No data available')}",
-                "sZeroRecords": "${_('No matching records')}",
-            }
-        });
+<script src="/jobbrowser/static/js/utils.js" type="text/javascript" charset="utf-8"></script>
 
-        $(".taskCountersTable").dataTable({
-            "bPaginate": false,
-            "bLengthChange": false,
-            "bInfo": false,
-            "bFilter": false,
-            "bAutoWidth": false,
-            "aoColumns": [
-                { "sWidth": "30%" },
-                { "sWidth": "70%" }
-            ],
-            "oLanguage": {
-                "sEmptyTable": "${_('No data available')}",
-                "sZeroRecords": "${_('No matching records')}",
-            }
-        });
+<script type="text/javascript" charset="utf-8">
+  $(document).ready(function () {
+    $("#metadataTable").dataTable({
+      "bPaginate": false,
+      "bLengthChange": false,
+      "bInfo": false,
+      "bAutoWidth": false,
+      "bFilter": false,
+      "aoColumns": [
+        { "sWidth": "30%" },
+        { "sWidth": "70%" }
+      ],
+      "oLanguage": {
+        "sEmptyTable": "${_('No data available')}",
+        "sZeroRecords": "${_('No matching records')}",
+      }
+    });
 
-        if (window.location.hash != null && window.location.hash.length > 1){
-            $('#tabs a[href="#'+window.location.hash.substring(2)+'"]').tab('show');
-        }
+    $(".taskCountersTable").dataTable({
+      "bPaginate": false,
+      "bLengthChange": false,
+      "bInfo": false,
+      "bFilter": false,
+      "bAutoWidth": false,
+      "aoColumns": [
+        { "sWidth": "30%" },
+        { "sWidth": "70%" }
+      ],
+      "oLanguage": {
+        "sEmptyTable": "${_('No data available')}",
+        "sZeroRecords": "${_('No matching records')}",
+      }
     });
+
+    if (window.location.hash != null && window.location.hash.length > 1) {
+      $('#tabs a[href="#' + window.location.hash.substring(2) + '"]').tab('show');
+    }
+
+    hellipsify();
+  });
 </script>
 
 ${ commonfooter(messages) | n,unicode }

+ 11 - 7
apps/jobbrowser/src/jobbrowser/templates/job.mako

@@ -92,6 +92,8 @@
 
 ${ commonheader(_('Job: %(jobId)s') % dict(jobId=job.jobId_short), "jobbrowser", user) | n,unicode }
 
+<link href="/jobbrowser/static/css/jobbrowser.css" rel="stylesheet">
+
 <style type="text/css">
   .killJob {
     display: none;
@@ -110,7 +112,7 @@ ${ commonheader(_('Job: %(jobId)s') % dict(jobId=job.jobId_short), "jobbrowser",
             <div class="well sidebar-nav">
                 <ul class="nav nav-list">
                     <li class="nav-header">${_('Job ID')}</li>
-                    <li>${job.jobId_short}</li>
+                    <li class="hellipsify">${job.jobId_short}</li>
                     <li class="nav-header">${_('User')}</li>
                     <li>${job.user}</li>
                     <li class="nav-header">${_('Status')}</li>
@@ -425,17 +427,17 @@ $(document).ready(function () {
     }
   });
 
-  var _isUpdating = true;
+  var isUpdating = true;
 
   function callJobDetails() {
-    _isUpdating = true;
+    isUpdating = true;
     $.getJSON("?format=json&rnd=" + Math.random(), function (data) { // Need to add random to prevent the cached of IE9
       if (data != null && data.job != null) {
         updateJob(data.job);
         updateFailedTasks(data.failedTasks);
         updateRecentTasks(data.recentTasks);
       }
-      _isUpdating = false;
+      isUpdating = false;
     });
   }
 
@@ -457,13 +459,13 @@ $(document).ready(function () {
     $("#killJobContainer").html(killCell);
     $("#jobStatus").html('<span class="label ' + getStatusClass(job.status) + '">' + (job.isRetired && !job.isMR2 ? '<i class="icon-briefcase icon-white" title="${ _('Retired') }"></i> ' : '') + job.status + '</span>');
     if (job.desiredMaps > 0) {
-      $("#jobMaps").html('<span title="' + emptyStringIfNull(job.mapsPercentComplete) + '">' + (job.isRetired ? '${_('N/A')}' : '<div class="progress" title="' + (job.isMR2 ? job.mapsPercentComplete : job.finishedMaps + '/' + job.desiredMaps) + '"><div class="bar-label">' + job.mapsPercentComplete + '%</div><div class="' + 'bar ' + getStatusClass(job.status, "bar-") + '" style="margin-top:-20px;width:' + job.mapsPercentComplete + '%"></div></div>') + '</span>');
+      $("#jobMaps").html((job.isRetired ? '${_('N/A')}' : '<div class="progress" style="width:100px" title="' + (job.isMR2 ? job.mapsPercentComplete : job.finishedMaps + '/' + job.desiredMaps) + '"><div class="bar-label">' + job.mapsPercentComplete + '%</div><div class="' + 'bar ' + getStatusClass(job.status, "bar-") + '" style="margin-top:-20px;width:' + job.mapsPercentComplete + '%"></div></div>'));
     }
     else {
       $("#jobMaps").html('${_('N/A')}');
     }
     if (job.desiredReduces > 0) {
-      $("#jobReduces").html('<span title="' + emptyStringIfNull(job.reducesPercentComplete) + '">' + (job.isRetired ? '${_('N/A')}' : '<div class="progress" title="' + (job.isMR2 ? job.reducesPercentComplete : job.finishedReduces + '/' + job.desiredReduces) + '"><div class="bar-label">' + job.reducesPercentComplete + '%</div><div class="' + 'bar ' + getStatusClass(job.status, "bar-") + '" style="margin-top:-20px;width:' + job.reducesPercentComplete + '%"></div></div>') + '</span>');
+      $("#jobReduces").html((job.isRetired ? '${_('N/A')}' : '<div class="progress" style="width:100px" title="' + (job.isMR2 ? job.reducesPercentComplete : job.finishedReduces + '/' + job.desiredReduces) + '"><div class="bar-label">' + job.reducesPercentComplete + '%</div><div class="' + 'bar ' + getStatusClass(job.status, "bar-") + '" style="margin-top:-20px;width:' + job.reducesPercentComplete + '%"></div></div>'));
     }
     else {
       $("#jobReduces").html('${_('N/A')}');
@@ -565,11 +567,13 @@ $(document).ready(function () {
   callJobDetails();
 
   var _runningInterval = window.setInterval(function () {
-    if (!_isUpdating){
+    if (!isUpdating){
       callJobDetails();
     }
   }, 2000);
 
+  hellipsify();
+
   $("a[data-row-selector='true']").jHueRowSelector();
 });
 </script>

+ 54 - 46
apps/jobbrowser/src/jobbrowser/templates/task.mako

@@ -21,6 +21,8 @@
 
 ${ commonheader(_('Job Task: %(taskId)s') % dict(taskId=task.taskId_short), "jobbrowser", user) | n,unicode }
 
+<link href="/jobbrowser/static/css/jobbrowser.css" rel="stylesheet">
+
 <div class="container-fluid">
     <h1>${_('Job Task: %(taskId)s - Job Browser') % dict(taskId=task.taskId_short)}</h1>
     <div class="row-fluid">
@@ -28,9 +30,9 @@ ${ commonheader(_('Job Task: %(taskId)s') % dict(taskId=task.taskId_short), "job
             <div class="well sidebar-nav">
                 <ul class="nav nav-list">
                     <li class="nav-header">${_('Task ID')}</li>
-                    <li>${task.taskId_short}</li>
+                    <li class="hellipsify">${task.taskId_short}</li>
                     <li class="nav-header">${_('Job')}</li>
-                    <li><a href="${url('jobbrowser.views.single_job', job=joblnk.jobId)}" title="${_('View this job')}">${joblnk.jobId_short}</a></li>
+                    <li><a href="${url('jobbrowser.views.single_job', job=joblnk.jobId)}" class="hellipsify">${joblnk.jobId_short}</a></li>
                     <li class="nav-header">${_('Status')}</li>
                     <li>
                             % if task.state.lower() == 'running' or task.state.lower() == 'pending':
@@ -155,54 +157,60 @@ ${ commonheader(_('Job Task: %(taskId)s') % dict(taskId=task.taskId_short), "job
     </div>
 </div>
 
-<script type="text/javascript" charset="utf-8">
-    $(document).ready(function(){
-        $("#attemptsTable").dataTable({
-            "bPaginate": false,
-            "bLengthChange": false,
-            "bInfo": false,
-            "bFilter": false,
-            "aaSorting": [[ 1, "asc" ]],
-            "oLanguage": {
-                "sEmptyTable": "${_('No data available')}",
-                "sZeroRecords": "${_('No matching records')}",
-            }
-        });
+<script src="/jobbrowser/static/js/utils.js" type="text/javascript" charset="utf-8"></script>
 
-        $("#metadataTable").dataTable({
-            "bPaginate": false,
-            "bLengthChange": false,
-            "bInfo": false,
-            "bAutoWidth": false,
-            "bFilter": false,
-            "aoColumns": [
-                { "sWidth": "30%" },
-                { "sWidth": "70%" }
-            ],
-            "oLanguage": {
-                "sEmptyTable": "${_('No data available')}",
-                "sZeroRecords": "${_('No matching records')}",
-            }
-        });
+<script type="text/javascript" charset="utf-8">
+  $(document).ready(function () {
+    $("#attemptsTable").dataTable({
+      "bPaginate": false,
+      "bLengthChange": false,
+      "bInfo": false,
+      "bFilter": false,
+      "aaSorting": [
+        [ 1, "asc" ]
+      ],
+      "oLanguage": {
+        "sEmptyTable": "${_('No data available')}",
+        "sZeroRecords": "${_('No matching records')}",
+      }
+    });
 
-        $(".taskCountersTable").dataTable({
-            "bPaginate": false,
-            "bLengthChange": false,
-            "bInfo": false,
-            "bFilter": false,
-            "bAutoWidth": false,
-            "aoColumns": [
-                { "sWidth": "30%" },
-                { "sWidth": "70%" }
-            ],
-            "oLanguage": {
-                "sEmptyTable": "${_('No data available')}",
-                "sZeroRecords": "${_('No matching records')}",
-            }
-        });
+    $("#metadataTable").dataTable({
+      "bPaginate": false,
+      "bLengthChange": false,
+      "bInfo": false,
+      "bAutoWidth": false,
+      "bFilter": false,
+      "aoColumns": [
+        { "sWidth": "30%" },
+        { "sWidth": "70%" }
+      ],
+      "oLanguage": {
+        "sEmptyTable": "${_('No data available')}",
+        "sZeroRecords": "${_('No matching records')}",
+      }
+    });
 
-        $("a[data-row-selector='true']").jHueRowSelector();
+    $(".taskCountersTable").dataTable({
+      "bPaginate": false,
+      "bLengthChange": false,
+      "bInfo": false,
+      "bFilter": false,
+      "bAutoWidth": false,
+      "aoColumns": [
+        { "sWidth": "30%" },
+        { "sWidth": "70%" }
+      ],
+      "oLanguage": {
+        "sEmptyTable": "${_('No data available')}",
+        "sZeroRecords": "${_('No matching records')}",
+      }
     });
+
+    hellipsify();
+
+    $("a[data-row-selector='true']").jHueRowSelector();
+  });
 </script>
 
 

+ 19 - 0
apps/jobbrowser/static/css/jobbrowser.css

@@ -19,4 +19,23 @@
   margin-bottom: 40px;
   padding: 20px;
   display: none;
+}
+
+.sidebar-nav {
+  padding: 9px 0;
+}
+
+.nochrome::-moz-focus-inner {
+  border: 0;
+  padding: 0
+}
+
+.nochrome {
+  width: auto;
+  border: 0 none;
+  margin: 0;
+  margin-top: -4px;
+  padding: 0;
+  background: transparent;
+  overflow: visible;
 }

+ 35 - 0
apps/jobbrowser/static/js/utils.js

@@ -114,3 +114,38 @@ jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function (a, b) {
   y = parseFloat(y);
   return ((x < y) ? 1 : ((x > y) ? -1 : 0));
 };
+
+function hellipsify() {
+  var MAX_LENGTH = 20;
+  $(".hellipsify").each(function () {
+    var _this = $(this);
+    if (_this.text().length > MAX_LENGTH) {
+      var _oText = _this.text();
+      var _clone = $("<div>");
+      _clone.html(_this.html());
+      _clone.css("position", "absolute").css("background-color", "#F5F5F5");
+      _clone.css("top", (_this.is("a") ? _this.position().top + 3 : _this.position().top)).css("left", _this.position().left)
+      _clone.css("z-index", "9999").css("display", "none");
+      _clone.appendTo($("body"));
+      _clone.mouseout(function () {
+        $(this).hide();
+      })
+      $(this).html(_oText.substr(0, MAX_LENGTH - 1) + "&hellip;&nbsp;");
+      var _eye = $("<button class='nochrome btn-small'></button>");
+      _eye.html("<i class='icon-eye-open'></i>");
+      _eye.css("cursor", "pointer");
+      _eye.on("click", function (e) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
+        _clone.show();
+        _this.tooltip("hide");
+      });
+      _eye.appendTo(_this);
+      _this.data("original-text", _oText);
+      _this.tooltip({
+        title: _oText,
+        placement: "right"
+      });
+    }
+  });
+}