Browse Source

HUE-1176 [jb] Adding new overall layout for apps

Romain Rigaux 9 years ago
parent
commit
f78ade2

+ 2 - 2
apps/jobbrowser/src/jobbrowser/apis/job_api.py

@@ -57,7 +57,7 @@ class YarnApi(Api):
     jobs = NativeYarnApi(self.user).get_jobs(self.user, username=self.user.username, state='all', text='')
     return [{
         'id': app.jobId,
-        'name': 'name',
+        'name': app.name,
         'type': app.applicationType,
         'status': app.status,
         'user': self.user.username,
@@ -70,7 +70,7 @@ class YarnApi(Api):
     app = NativeYarnApi(self.user).get_job(jobid=appid)
     return {
         'id': app.jobId,
-        'name': 'name',
+        'name': app.name,
         'type': app.applicationType,
         'status': app.status,
         'user': self.user.username,

+ 80 - 6
apps/jobbrowser/src/jobbrowser/templates/apps.mako

@@ -140,8 +140,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
               </span>
             </span>
 
-            <i class="fa fa-calendar"></i>
-
             <div class="btn-toolbar" style="display: inline; vertical-align: middle; margin-left: 10px; font-size: 12px">
               <span class="loader hide"><i class="fa fa-2x fa-spinner fa-spin muted"></i></span>
               <button class="btn bulkToolbarBtn bulk-resume" data-operation="resume" title="${ _('Resume selected') }" disabled="disabled" type="button"><i class="fa fa-play"></i><span class="hide-small"> ${ _('Resume') }</span></button>
@@ -155,24 +153,24 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
                 <tr>
                   <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
                   <th>${_('Duration')}</th>
+                  <th>${_('Type')}</th>
                   <th>${_('Status')}</th>
                   <th>${_('Progress')}</th>
-                  <th>${_('Id')}</th>
                   <th>${_('Name')}</th>
-                  <th>${_('Type')}</th>
                   <th>${_('User')}</th>
+                  <th>${_('Id')}</th>
                 </tr>
                 </thead>
                 <tbody data-bind="foreach: jobs.apps">
                   <tr data-bind="click: fetchJob">
                     <td><div class="hueCheckbox fa"></div></td>
                     <td data-bind="text: duration"></td>
+                    <td data-bind="text: type"></td>
                     <td data-bind="text: status"></td>
                     <td data-bind="text: progress"></td>
-                    <td data-bind="text: id"></td>
                     <td data-bind="text: name"></td>
-                    <td data-bind="text: type"></td>
                     <td data-bind="text: user"></td>
+                    <td data-bind="text: id"></td>
                   </tr>
                 </tbody>
               </table>
@@ -194,6 +192,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
             <!-- /ko -->
           <!-- /ko -->
 
+          <div data-bind="template: { name: 'pagination' }"></div>
       </div>
     </div>
   </div>
@@ -201,6 +200,20 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 </div>
 
 
+<script type="text/html" id="pagination">
+  Showing
+  <span data-bind="text: paginationPage"></span>
+  to
+  <span data-bind="text: paginationOffset() * paginationResultPage()"></span>
+  of
+  <span data-bind="text: paginationResultCounts"></span>
+  
+  Show
+  <span data-bind="text: paginationOffset"></span>
+  results by page.
+</script>
+
+
 <script type="text/html" id="job-page">
   <!-- ko if: type() == 'MR2' -->
     <div data-bind="template: { name: 'job-mapreduce-page', data: $root.job() }"></div>
@@ -233,6 +246,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
   ${ _('Submitted') } <span data-bind="text: submitted"></span>
 </script>
 
+
 <script type="text/html" id="job-mapreduce-page">
   <h2>MapReduce</h2>
   <br/>
@@ -245,8 +259,63 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
   ${ _('Progress') } <span data-bind="text: progress"></span>
   ${ _('Duration') } <span data-bind="text: duration"></span>
   ${ _('Submitted') } <span data-bind="text: submitted"></span>
+
+  </br></br>
+  <span>
+  Map 100 Reduce 50</br>
+  Duration 8s</br>
+  </br></br>
+  
+  <div class="progress-job progress active pull-left" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': progress() < 100, 'progress-success': progress() === 100}">
+    <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
+  </div>
+
+  </br>
+
+  <ul class="nav nav-tabs">
+    <li class="active"><a href="#job-mapreduce-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
+    <li><a href="#job-mapreduce-page-tasks" data-toggle="tab">${ _('Tasks') }</a></li>
+    <li><a href="#job-mapreduce-page-metadata" data-toggle="tab">${ _('Metadata') }</a></li>
+    <li><a href="#job-mapreduce-page-counters" data-toggle="tab">${ _('Counters') }</a></li>
+  </ul>
+
+  <div class="tab-content" id="job-mapreduce-page-logs">
+    <table class="table table-condensed">
+    </table>
+  </div>
+
+  <div class="tab-content" id="job-mapreduce-page-tasks">
+    <table class="table table-condensed">
+    </table>
+  </div>
+  
+  <div class="tab-content" id="job-mapreduce-page-metadata">
+    <table class="table table-condensed">
+    </table>
+  </div>
+  
+  <div class="tab-content" id="job-mapreduce-page-counters">
+    <table class="table table-condensed">
+    </table>
+  </div>
+
 </script>
 
+<script type="text/html" id="job-mapreduce-task-page">
+  <h2>MapReduce Task</h2>
+  <br/>
+  
+  Task Attemps | Metadata | Counters
+</script>
+
+<script type="text/html" id="job-mapreduce-task-attempt-page">
+  <h2>MapReduce Task attempt</h2>
+  <br/>
+  
+  Container | Metadata | Counters
+</script>
+
+
 <script type="text/html" id="job-impala-page">
   <h2>Impala</h2>
   <br/>
@@ -430,6 +499,11 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
         hueUtils.changeURL('#!' + val);
         self.jobs.fetchJobs();
       });
+                                                                           
+      self.paginationOffset = ko.observable(0);
+      self.paginationResultPage = ko.observable(100);
+      self.paginationPage = ko.observable(1);
+      self.paginationResultCounts = ko.observable();
     };
 
     var viewModel;