Browse Source

HUE-1176 [jb] Iteration on the design of the single page app

Romain Rigaux 9 năm trước cách đây
mục cha
commit
db693e7

+ 1 - 2
apps/jobbrowser/src/jobbrowser/apis/batch_api.py

@@ -32,7 +32,6 @@ except Exception, e:
   LOG.exception('Some application are not enabled for Job Browser v2: %s' % e)
 
 
-
 class BatchApi(Api):
 
   def apps(self):
@@ -49,7 +48,7 @@ class BatchApi(Api):
         'progress': 100,
         'duration': 10 * 3600,
         'submitted': 10 * 3600
-    } for app in wf_list.jobs] # if app.appName.startswith(OozieApi.BATCH_JOB_PREFIX)]
+    } for app in wf_list.jobs]
 
   def app(self, appid):
     oozie_api = get_oozie(self.user)

+ 1 - 1
apps/jobbrowser/src/jobbrowser/apis/schedule_api.py

@@ -51,7 +51,7 @@ class ScheduleApi(Api):
         'progress': 100,
         'duration': 10 * 3600,
         'submitted': 10 * 3600
-    } for app in wf_list.jobs if app.appName.startswith(OozieApi.SCHEDULE_JOB_PREFIX)]
+    } for app in wf_list.jobs]
 
   def app(self, appid):
     oozie_api = get_oozie(self.user)

+ 31 - 27
apps/jobbrowser/src/jobbrowser/templates/apps.mako

@@ -52,16 +52,15 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 <script src="${ static('oozie/js/list-oozie-coordinator.ko.js') }"></script>
 
 % if not is_embeddable:
+  ${ assist.assistJSModels() }
+  ${ assist.assistPanel() }
 
-${ assist.assistJSModels() }
-${ assist.assistPanel() }
-
-<a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isLeftPanelVisible() && $root.assistAvailable(), click: function() { $root.isLeftPanelVisible(true); }">
-  <i class="fa fa-chevron-right"></i>
-</a>
-
+  <a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isLeftPanelVisible() && $root.assistAvailable(), click: function() { $root.isLeftPanelVisible(true); }">
+    <i class="fa fa-chevron-right"></i>
+  </a>
 % endif
 
+<div id="jobbrowserComponents">
 <div class="navbar navbar-inverse navbar-fixed-top nokids">
     <div class="navbar-inner">
       <div class="container-fluid">
@@ -74,6 +73,12 @@ ${ assist.assistPanel() }
               </a>
             </li>
           </ul>
+            <span class="form-inline">
+              <input class="btn btn-status" type="radio" name="interface" value="jobs" data-bind="checked: interface" id="jobs"><label for="jobs">${ _('Apps') }</label>
+              <input class="btn btn-status" type="radio" name="interface" value="batches" data-bind="checked: interface" id="batches"><label for="batches">${ _('Workflows') }</label>
+              <input class="btn btn-status" type="radio" name="interface" value="schedules" data-bind="checked: interface" id="schedules"><label for="schedules">${ _('Schedules') }</label>
+              <input class="btn btn-status" type="radio" name="interface" value="bundles" data-bind="checked: interface" id="bundles"><label for="bundles">${ _('Bundles') }</label>
+            </span>
           % if not hiveserver2_impersonation_enabled:
             <div class="pull-right alert alert-warning" style="margin-top: 4px">${ _("Hive jobs are running as the 'hive' user") }</div>
           % endif
@@ -81,7 +86,7 @@ ${ assist.assistPanel() }
       </div>
     </div>
 </div>
-<div id="jobbrowserComponents">
+
 <div class="main-content">
   <div class="vertical-full container-fluid" data-bind="style: { 'padding-left' : $root.isLeftPanelVisible() ? '0' : '20px' }">
     <div class="vertical-full">
@@ -125,16 +130,8 @@ ${ assist.assistPanel() }
 
             <!-- ko if: $root.section() == 'apps' -->
             <h2>${ _('Apps') }</h2>
-            ${_('Username')} <input id="userFilter" type="text" class="input-medium search-query" placeholder="${_('Search for username')}" value="${ user_filter or '' }">
-            &nbsp;&nbsp;${_('Text')} <input id="textFilter" type="text" class="input-xlarge search-query" placeholder="${_('Search for id, name, status...')}" value="${ text_filter or '' }">
-
-            <span class="form-inline">
-              <input class="btn btn-status" type="radio" name="interface" value="jobs" data-bind="checked: interface" id="jobs"><label for="jobs">${ _('Jobs') }</label>
-              <input class="btn btn-status" type="radio" name="interface" value="batches" data-bind="checked: interface" id="batches"><label for="batches">${ _('Workflows') }</label>
-              <input class="btn btn-status" type="radio" name="interface" value="schedules" data-bind="checked: interface" id="schedules"><label for="schedules">${ _('Schedules') }</label>
-              <input class="btn btn-status" type="radio" name="interface" value="schedules" data-bind="checked: interface" id="bundles"><label for="bundles">${ _('Bundles') }</label>
-            </span>
 
+            ${_('Filter')} <input id="textFilter" type="text" class="input-xlarge search-query" placeholder="${_('Filter by id, name, user...')}" value="user:${ user.username }">
             <span class="btn-group">
               <class="btn-group">
                 <a class="btn btn-status btn-success" data-value="completed">${ _('Succeeded') }</a>
@@ -143,32 +140,39 @@ ${ assist.assistPanel() }
               </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>
+              <button class="btn bulkToolbarBtn bulk-suspend" data-operation="suspend" title="${ _('Suspend selected') }" disabled="disabled" type="button"><i class="fa fa-pause"></i><span class="hide-small"> ${ _('Suspend') }</span></button>
+              <button class="btn bulkToolbarBtn btn-danger bulk-kill disable-feedback" data-operation="kill" title="${ _('Kill selected') }" disabled="disabled" type="button"><i class="fa fa-times"></i><span class="hide-small"> ${ _('Kill') }</span></button>
+            </div>
+
             <div class="card card-small">
               <table id="jobsTable" class="datatables table table-condensed">
                 <thead>
                 <tr>
-                  <th>${_('Logs')}</th>
+                  <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
+                  <th>${_('Duration')}</th>
+                  <th>${_('Status')}</th>
+                  <th>${_('Progress')}</th>
                   <th>${_('Id')}</th>
                   <th>${_('Name')}</th>
                   <th>${_('Type')}</th>
-                  <th>${_('Status')}</th>
                   <th>${_('User')}</th>
-                  <th>${_('Progress')}</th>
-                  <th>${_('Duration')}</th>
-                  <th>${_('Submitted')}</th>
                 </tr>
                 </thead>
                 <tbody data-bind="foreach: jobs.apps">
                   <tr data-bind="click: fetchJob">
-                    <td></td>
+                    <td><div class="hueCheckbox fa"></div></td>
+                    <td data-bind="text: duration"></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: status"></td>
                     <td data-bind="text: user"></td>
-                    <td data-bind="text: progress"></td>
-                    <td data-bind="text: duration"></td>
-                    <td data-bind="text: submitted"></td>
                   </tr>
                 </tbody>
               </table>

+ 1 - 1
desktop/core/src/desktop/templates/responsive.mako

@@ -235,7 +235,6 @@ ${ hueIcons.symbols() }
         <li data-bind="click: function () { onePageViewModel.currentApp('oozie_workflow') }"><a href="javascript: void(0);">Workflows</a></li>
         <li><a href="javascript: void(0);">Custom App 1</a></li>
         <li><a href="javascript: void(0);">Custom App 2</a></li>
-        <li><a href="javascript: void(0);">Custom App 3</a></li>
         <li class="header">&nbsp;</li>
         <li class="header" style="padding-left: 4px; border-bottom: 1px solid #DDD; padding-bottom: 3px;">${ _('Browse') }</li>
         <li data-bind="click: function () { onePageViewModel.currentApp('filebrowser') }"><a href="javascript: void(0);">Files</a></li>
@@ -245,6 +244,7 @@ ${ hueIcons.symbols() }
         <li data-bind="click: function () { onePageViewModel.currentApp('jobbrowser') }"><a href="javascript: void(0);">Jobs</a></li>
         <li><a href="javascript: void(0);">HBase</a></li>
         <li><a href="javascript: void(0);">Security</a></li>
+        <li><a href="javascript: void(0);">SLAs</a></li>
       </ul>
       <div class="left-nav-drop">
         <div data-bind="click: function () { onePageViewModel.currentApp('importer') }" class="pointer" title="${ _('Import data wizard') }">