Browse Source

HUE-6254 [jb] Restyled the mini JB list of jobs

Enrico Berti 8 năm trước cách đây
mục cha
commit
a617a0e60e

+ 22 - 2
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -147,11 +147,30 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 <i class="fa fa-refresh"></i>
               </a>
 
+              <!-- ko ifnot: $root.isMini -->
               <div data-bind="template: { name: 'job-actions', 'data': jobs }" class="pull-right"></div>
+              <!-- /ko -->
             </form>
 
 
             <div class="card card-small">
+              <!-- ko if: $root.isMini -->
+              <ul class="unstyled" id="jobsTable" data-bind="foreach: jobs.apps">
+                <li class="status-border" data-bind="css: {'success': apiStatus() == 'SUCCEEDED', 'running': isRunning(), 'failed': apiStatus() == 'FAILED'}, attr:{ 'title': status }, click: conditionalFetchJob">
+                  <span class="muted pull-left" data-bind="momentFromNow: {data: submitted, interval: 10000, titleFormat: 'LLL'}"></span></td>
+                  <span class="muted pull-right" data-bind="text: duration().toHHMMSS()"></span>
+                  <div class="clearfix"></div>
+                  <strong class="pull-left" data-bind="text: type"></strong>
+                  <div class="inline-block pull-right"><i class="fa fa-user muted"></i> <span data-bind="text: user"></span></div>
+                  <div class="clearfix"></div>
+                  <div class="pull-left" data-bind="ellipsis: {data: name(), length: 40 }"></div>
+                  <div class="pull-right muted" data-bind="text: id"></div>
+                  <div class="clearfix"></div>
+                </li>
+                <div class="status-bar status-background" data-bind="css: {'running': isRunning()}, style: {'width': progress() + '%'}"></div>
+              </ul>
+              <!-- /ko -->
+              <!-- ko ifnot: $root.isMini -->
               <table id="jobsTable" class="datatables table table-condensed">
                 <thead>
                 <tr>
@@ -174,8 +193,8 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                     <td>
                       <div class="status-circle" data-bind="attr:{ 'title': status }, css: {'green': apiStatus() == 'SUCCEEDED', 'orange': isRunning(), 'red': apiStatus() == 'FAILED'}"></div>
                     </td>
-                    <td data-bind="text: duration"></td>
-                    <td data-bind="text: submitted"></td>
+                    <td data-bind="text: duration().toHHMMSS()"></td>
+                    <td data-bind="moment: {data: submitted, format: 'LLL'}"></td>
                     <td data-bind="text: type"></td>
                     <td data-bind="text: progress"></td>
                     <td data-bind="text: name"></td>
@@ -184,6 +203,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                   </tr>
                 </tbody>
               </table>
+              <!-- /ko -->
             </div>
             <!-- /ko -->
 

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 19 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -5323,6 +5323,25 @@
     }
   };
 
+  ko.bindingHandlers.moment = {
+    update: function (element, valueAccessor) {
+      var options = ko.unwrap(valueAccessor());
+      var $element = $(element);
+
+      var value = typeof options.data === 'function' ? options.data() : options.data;
+
+      function render() {
+        if (options.format) {
+          $element.text(moment(value).format(options.format));
+        }
+        else {
+          $element.text(moment(value));
+        }
+      }
+      render();
+    }
+  };
+
 
   ko.bindingHandlers.attachViewModelToElementData = {
     init: function (el, valueAccessor, allBindingsAccessor, viewModel) {

+ 25 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -297,6 +297,31 @@ input[type='password']::-ms-reveal {
   }
 }
 
+.status-border {
+  &.success {
+    border-color: @cui-green!important;
+  }
+  &.running {
+    border-color: @cui-orange!important;
+  }
+  &.failed {
+    border-color: @cui-red!important;
+  }
+}
+
+.status-background {
+  &.success {
+    background-color: @cui-green!important;
+  }
+  &.running {
+    background-color: @cui-orange!important;
+  }
+  &.failed {
+    background-color: @cui-red!important;
+  }
+}
+
+
 .blue,
 .card-heading-blue {
   color: @hue-primary-color-dark!important;

+ 13 - 6
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -861,15 +861,22 @@ a:visited {
   overflow-y: auto;
   height: 550px;
   max-height: 550px;
-  table, thead, tbody, th, td, tr {
-    display: block;
-  }
-  thead tr {
-    display: none;
-  }
   input.search-query {
     width: 70px;
   }
+  li {
+    padding: 7px;
+    margin-top: 10px;
+    border-left: 3px solid @cui-white;
+    &:hover {
+      background-color: @cui-gray-050;
+    }
+  }
+  .status-bar {
+    height: 1px;
+    width: 0;
+    opacity: .5;
+  }
 }
 
 .uploadstatus {

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác