Переглянути джерело

[jb] Unified, fixed and ellipsified long IDs on the side bar

Enrico Berti 10 роки тому
батько
коміт
d7d3b3d

+ 0 - 15
apps/jobbrowser/src/jobbrowser/static/jobbrowser/css/jobbrowser.css

@@ -38,18 +38,3 @@
   padding: 20px;
   display: none;
 }
-
-.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;
-}

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

@@ -111,38 +111,3 @@ 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='fa fa-eye'></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"
-      });
-    }
-  });
-}

+ 3 - 5
apps/jobbrowser/src/jobbrowser/templates/attempt.mako

@@ -30,14 +30,14 @@ ${ comps.menubar() }
       <div class="sidebar-nav" style="padding-top: 0">
         <ul class="nav nav-list">
           <li class="nav-header">${_('Attempt ID')}</li>
-          <li class="white hellipsify">${attempt.attemptId_short}</li>
+          <li class="white truncate" title="${attempt.attemptId_short}">${attempt.attemptId_short}</li>
           <li class="nav-header">${_('Task')}</li>
           <li><a href="${url('jobbrowser.views.single_task', job=joblnk.jobId, taskid=taskid)}"
-                 class="hellipsify">${task.taskId_short}</a>
+                 class="truncate" title="${task.taskId_short}">${task.taskId_short}</a>
           </li>
           <li class="nav-header">${_('Job')}</li>
           <li><a href="${url('jobbrowser.views.single_job', job=joblnk.jobId)}"
-                 class="hellipsify">${joblnk.jobId_short}</a></li>
+                 class="truncate" title="${joblnk.jobId_short}">${joblnk.jobId_short}</a></li>
           <li class="nav-header">${_('Status')}</li>
           <li class="white">
             <%
@@ -210,8 +210,6 @@ ${ comps.menubar() }
     if (window.location.hash != null && window.location.hash.length > 1) {
       $('#tabs a[href="#' + window.location.hash.substring(2).replace(/(<([^>]+)>)/ig, "") + '"]').tab('show');
     }
-
-    hellipsify();
   });
 </script>
 

+ 3 - 3
apps/jobbrowser/src/jobbrowser/templates/attempt_logs.mako

@@ -28,12 +28,12 @@ ${ comps.menubar() }
       <div class="sidebar-nav" style="padding-top: 0">
         <ul class="nav nav-list">
           <li class="nav-header">${_('Attempt ID')}</li>
-          <li class="white">${attempt.attemptId_short}</li>
+          <li class="white truncate" title="${attempt.attemptId_short}">${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="truncate" title="${task.taskId_short}">${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="truncate" title="${joblnk.jobId_short}">${joblnk.jobId_short}</a></li>
           <li class="nav-header">${_('Status')}</li>
           <li class="white">
               <%

+ 6 - 8
apps/jobbrowser/src/jobbrowser/templates/job.mako

@@ -107,9 +107,9 @@ ${ comps.menubar() }
       <div class="sidebar-nav" style="padding-top: 0">
         <ul class="nav nav-list">
           <li class="nav-header">${_('App ID')}</li>
-          <li class="white hellipsify">${job.jobId_short}</li>
+          <li class="white truncate" title="${job.jobId_short}">${job.jobId_short}</li>
           <li class="nav-header">${_('Type')}</li>
-          <li class="white hellipsify">${job.applicationType}</li>
+          <li class="white truncate" title="${job.applicationType}">${job.applicationType}</li>
           <li class="nav-header">${_('User')}</li>
           <li class="white">${job.user}</li>
           <li class="nav-header">${_('Status')}</li>
@@ -212,9 +212,9 @@ ${ comps.menubar() }
       <div class="sidebar-nav" style="padding-top: 0">
         <ul class="nav nav-list">
           <li class="nav-header">${_('Job ID')}</li>
-          <li class="white hellipsify">${job.jobId_short}</li>
+          <li class="white truncate" title="${job.jobId_short}">${job.jobId_short}</li>
           <li class="nav-header">${_('Type')}</li>
-          <li class="white hellipsify">${job.applicationType or 'MR2'}</li>
+          <li class="white truncate" title="${job.applicationType or 'MR2'}">${job.applicationType or 'MR2'}</li>
           <li class="nav-header">${_('User')}</li>
           <li class="white">${job.user}</li>
           <li class="nav-header">${_('Status')}</li>
@@ -429,9 +429,9 @@ ${ comps.menubar() }
       <div class="sidebar-nav" style="padding-top: 0">
         <ul class="nav nav-list">
           <li class="nav-header">${_('App ID')}</li>
-          <li class="white hellipsify">${job.jobId_short}</li>
+          <li class="white truncate" title="${job.jobId_short}">${job.jobId_short}</li>
           <li class="nav-header">${_('Type')}</li>
-          <li class="white hellipsify">${job.applicationType}</li>
+          <li class="white truncate" title="${job.applicationType}">${job.applicationType}</li>
           <li class="nav-header">${_('User')}</li>
           <li class="white">${job.user}</li>
           <li class="nav-header">${_('Status')}</li>
@@ -757,8 +757,6 @@ $(document).ready(function () {
     }
   }, 2000);
 
-  hellipsify();
-
   $("a[data-row-selector='true']").jHueRowSelector();
 });
 </script>

+ 1 - 1
apps/jobbrowser/src/jobbrowser/templates/job_attempt_logs.mako

@@ -29,7 +29,7 @@ ${ comps.menubar() }
       <div class="sidebar-nav" style="padding-top: 0">
         <ul class="nav nav-list">
           <li class="nav-header">${ _('Attempt ID') }</li>
-          <li class="white">${ attempt_index }</li>
+          <li class="white truncate" title="${ attempt_index }">${ attempt_index }</li>
         </ul>
       </div>
     </div>

+ 1 - 1
apps/jobbrowser/src/jobbrowser/templates/job_not_assigned.mako

@@ -34,7 +34,7 @@ ${ comps.menubar() }
       <div class="sidebar-nav" style="padding-top: 0">
         <ul class="nav nav-list">
           <li class="nav-header">${_('Job ID')}</li>
-          <li class="white hellipsify">${ jobid }</li>
+          <li class="white truncate" title="${ jobid }">${ jobid }</li>
         </ul>
       </div>
     </div>

+ 2 - 4
apps/jobbrowser/src/jobbrowser/templates/task.mako

@@ -30,9 +30,9 @@ ${ comps.menubar() }
       <div class="sidebar-nav" style="padding-top: 0">
         <ul class="nav nav-list">
           <li class="nav-header">${_('Task ID')}</li>
-          <li class="white hellipsify">${task.taskId_short}</li>
+          <li class="white truncate" title="${task.taskId_short}">${task.taskId_short}</li>
           <li class="nav-header">${_('Job')}</li>
-          <li><a href="${url('jobbrowser.views.single_job', job=joblnk.jobId)}" class="hellipsify">${joblnk.jobId_short}</a></li>
+          <li><a href="${url('jobbrowser.views.single_job', job=joblnk.jobId)}" class="truncate" title="${joblnk.jobId_short}">${joblnk.jobId_short}</a></li>
           <li class="nav-header">${_('Status')}</li>
           <li class="white">
             % if task.state.lower() == 'running' or task.state.lower() == 'pending':
@@ -223,8 +223,6 @@ ${ comps.menubar() }
       }
     });
 
-    hellipsify();
-
     $("a[data-row-selector='true']").jHueRowSelector();
   });
 </script>

+ 7 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -1389,6 +1389,7 @@ a#advanced-btn:hover {
   margin-top: 1px;
   padding: 9px 18px;
   text-shadow: none;
+  font-size: 14px;
   transition: border 0.218s ease 0s;
 }
 
@@ -2072,3 +2073,9 @@ pre {
 .clearable.onX {
   cursor: pointer !important;
 }
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}