Ver Fonte

HUE-6510 [jb] Styled job counters

Enrico Berti há 8 anos atrás
pai
commit
4c61335d13
1 ficheiros alterados com 77 adições e 3 exclusões
  1. 77 3
      apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

+ 77 - 3
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -537,7 +537,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         </div>
 
         <div class="tab-pane" id="job-mapreduce-page-counters">
-          <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
+          <div data-bind="template: { name: 'render-page-counters', data: properties['counters'] }"></div>
         </div>
       </div>
 
@@ -634,7 +634,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         </div>
 
         <div class="tab-pane" id="job-mapreduce-task-page-counters">
-          <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
+          <div data-bind="template: { name: 'render-task-counters', data: properties['counters'] }"></div>
         </div>
       </div>
     </div>
@@ -698,7 +698,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         </div>
 
         <div class="tab-pane" id="job-mapreduce-task-attempt-page-counters">
-          <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
+          <div data-bind="template: { name: 'render-attempt-counters', data: properties['counters'] }"></div>
         </div>
       </div>
 
@@ -1280,6 +1280,80 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
   <!-- /ko -->
 </script>
 
+<script type="text/html" id="render-page-counters">
+  <!-- ko hueSpinner: { spin: !$data.counterGroup, center: true, size: 'xlarge' } --><!-- /ko -->
+  <!-- ko if: $data.counterGroup -->
+  <!-- ko foreach: $data.counterGroup -->
+    <h3 data-bind="text: counterGroupName"></h3>
+    <table class="table table-condensed">
+      <thead>
+      <tr>
+        <th>${ _('Name') }</th>
+        <th width="15%">${ _('Maps total') }</th>
+        <th width="15%">${ _('Reduces total') }</th>
+        <th width="15%">${ _('Total') }</th>
+      </tr>
+      </thead>
+      <tbody data-bind="foreach: counter">
+        <tr>
+          <td data-bind="text: name"></td>
+          <td data-bind="text: mapCounterValue"></td>
+          <td data-bind="text: reduceCounterValue"></td>
+          <td data-bind="text: totalCounterValue"></td>
+        </tr>
+      </tbody>
+    </table>
+  <!-- /ko -->
+  <!-- /ko -->
+</script>
+
+<script type="text/html" id="render-task-counters">
+  <!-- ko hueSpinner: { spin: !$data.taskCounterGroup, center: true, size: 'xlarge' } --><!-- /ko -->
+  <!-- ko if: $data.taskCounterGroup -->
+  <!-- ko foreach: $data.taskCounterGroup -->
+    <h3 data-bind="text: counterGroupName"></h3>
+    <table class="table table-condensed">
+      <thead>
+      <tr>
+        <th>${ _('Name') }</th>
+        <th width="30%">${ _('Value') }</th>
+      </tr>
+      </thead>
+      <tbody data-bind="foreach: counter">
+        <tr>
+          <td data-bind="text: name"></td>
+          <td data-bind="text: value"></td>
+        </tr>
+      </tbody>
+    </table>
+  <!-- /ko -->
+  <!-- /ko -->
+</script>
+
+<script type="text/html" id="render-attempt-counters">
+  <!-- ko hueSpinner: { spin: !$data.taskAttemptCounterGroup, center: true, size: 'xlarge' } --><!-- /ko -->
+  <!-- ko if: $data.taskAttemptCounterGroup -->
+  <!-- ko foreach: $data.taskAttemptCounterGroup -->
+    <h3 data-bind="text: counterGroupName"></h3>
+    <table class="table table-condensed">
+      <thead>
+      <tr>
+        <th>${ _('Name') }</th>
+        <th width="30%">${ _('Value') }</th>
+      </tr>
+      </thead>
+      <tbody data-bind="foreach: counter">
+        <tr>
+          <td data-bind="text: name"></td>
+          <td data-bind="text: value"></td>
+        </tr>
+      </tbody>
+    </table>
+  <!-- /ko -->
+  <!-- /ko -->
+</script>
+
+
 <script type="text/javascript">
 
   (function () {