[jb] Split the Job Browser mako into a regular and mini version and extract inline js

apps/jobbrowser/src/jobbrowser/views.py

@@ -114,9 +114,16 @@ def get_job(request, job_id):
 
 
 def apps(request):
+  if request.GET.get('is_mini', False):
+    return render('mini_job_browser.mako', request, {
+      'is_embeddable': request.GET.get('is_embeddable', False),
+      'is_mini': True,
+      'hiveserver2_impersonation_enabled': hiveserver2_impersonation_enabled()
+    })
+
   return render('job_browser.mako', request, {
     'is_embeddable': request.GET.get('is_embeddable', False),
-    'is_mini': request.GET.get('is_mini', False),
+    'is_mini': False,
     'hiveserver2_impersonation_enabled': hiveserver2_impersonation_enabled()
   })
 

desktop/core/src/desktop/js/apps/jobBrowser/app.js

@@ -14,15 +14,111 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import $ from 'jquery';
+import * as ko from 'knockout';
+
 import huePubSub from 'utils/huePubSub';
+
 import './components/hiveQueryPlan/webcomp';
 import './components/queriesList/webcomp';
 import './components/impalaQueries/webcomp';
+import './eventListeners';
+import JobBrowserViewModel from './knockout/JobBrowserViewModel';
+import Job from './knockout/Job';
+import I18n from 'utils/i18n';
 
 huePubSub.subscribe('app.dom.loaded', app => {
   if (app !== 'jobbrowser') {
     return;
   }
 
-  // TODO: Move js from job_browser.mako here.
+  $(document).ready(() => {
+    const jobBrowserViewModel = new JobBrowserViewModel(false);
+    const openJob = id => {
+      if (jobBrowserViewModel.job() == null) {
+        jobBrowserViewModel.job(new Job(jobBrowserViewModel, {}));
+      }
+      jobBrowserViewModel.job().id(id);
+      jobBrowserViewModel.job().fetchJob();
+    };
+
+    ko.applyBindings(jobBrowserViewModel, $('#jobbrowserComponents')[0]);
+
+    const loadHash = () => {
+      if (window.location.pathname.indexOf('jobbrowser') > -1) {
+        jobBrowserViewModel.load();
+      }
+    };
+
+    window.onhashchange = () => loadHash();
+
+    huePubSub.subscribe(
+      'oozie.action.logs.click',
+      widget => {
+        $.get(
+          widget.logsURL(),
+          {
+            format: 'link'
+          },
+          data => {
+            const id = data.job || data.attemptid;
+            if (id) {
+              openJob(id);
+            } else {
+              huePubSub.publish('hue.global.error', { message: I18n('No log available') });
+            }
+          }
+        );
+      },
+      'jobbrowser'
+    );
+
+    huePubSub.subscribe(
+      'oozie.action.click',
+      widget => {
+        openJob(widget.externalId());
+      },
+      'jobbrowser'
+    );
+
+    huePubSub.subscribe(
+      'browser.job.open.link',
+      id => {
+        openJob(id);
+      },
+      'jobbrowser'
+    );
+
+    huePubSub.subscribe(
+      'app.gained.focus',
+      app => {
+        if (app === 'jobbrowser') {
+          huePubSub.publish('graph.draw.arrows');
+          loadHash();
+        }
+      },
+      'jobbrowser'
+    );
+
+    const configUpdated = clusterConfig => {
+      jobBrowserViewModel.appConfig(clusterConfig && clusterConfig['app_config']);
+      jobBrowserViewModel.clusterType(clusterConfig && clusterConfig['cluster_type']);
+      loadHash();
+    };
+
+    huePubSub.subscribe('cluster.config.set.config', configUpdated);
+    huePubSub.publish('cluster.config.get.config', configUpdated);
+
+    huePubSub.subscribe(
+      'submit.rerun.popup.return',
+      data => {
+        huePubSub.publish('hue.global.info', { message: I18n('Rerun submitted.') });
+        $('#rerun-modal').modal('hide');
+
+        jobBrowserViewModel.job().apiStatus('RUNNING');
+        jobBrowserViewModel.monitorJob(jobBrowserViewModel.job());
+      },
+      'jobbrowser'
+    );
+  });
 });

desktop/core/src/desktop/js/apps/jobBrowser/eventListeners.js

@@ -0,0 +1,70 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import $ from 'jquery';
+import huePubSub from '../../utils/huePubSub';
+
+$(document).off('shown', '.jb-logs-link');
+$(document).on('shown', '.jb-logs-link', e => {
+  const dest = $(e.target).attr('href');
+  if (dest.indexOf('logs') > -1 && $(dest).find('pre:visible').length > 0) {
+    $(dest)
+      .find('pre')
+      .css('overflow-y', 'auto')
+      .height(
+        Math.max(
+          200,
+          $(window).height() -
+            $(dest).find('pre').offset().top -
+            $('.page-content').scrollTop() -
+            75
+        )
+      );
+  }
+});
+
+$(document).off('showSubmitPopup');
+$(document).on('showSubmitPopup', (event, data) => {
+  const syncWorkflowModal = $('#syncWorkflowModal');
+  syncWorkflowModal.empty();
+  syncWorkflowModal.html(data);
+  syncWorkflowModal.modal('show');
+  syncWorkflowModal.on('hidden', () => {
+    huePubSub.publish('hide.datepicker');
+  });
+
+  syncWorkflowModal.find('.submit-form').on('submit', function (e) {
+    e.preventDefault();
+    $.ajax({
+      type: 'POST',
+      cache: false,
+      url: $(this).attr('action'),
+      data: $(this).serialize(),
+      success: function (data) {
+        $('#syncWorkflowModal').modal('hide');
+        if (data && data.status === 0) {
+          huePubSub.publish('hue.global.info', data);
+        } else {
+          huePubSub.publish('hue.global.error', data);
+        }
+      },
+      error: function (data) {
+        $('#syncWorkflowModal').modal('hide');
+        huePubSub.publish('hue.global.error', data);
+      }
+    });
+  });
+});