| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522 |
- ## 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.
- <%
- from desktop import conf
- from desktop.views import commonheader, commonfooter, _ko
- from django.utils.translation import ugettext as _
- %>
- % if not is_embeddable:
- ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
- <%namespace name="assist" file="/assist.mako" />
- % endif
- <span class="notebook">
- <link rel="stylesheet" href="${ static('desktop/ext/css/basictable.css') }">
- <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
- % if not is_embeddable:
- <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">
- <style type="text/css">
- % if conf.CUSTOM.BANNER_TOP_HTML.get():
- .show-assist {
- top: 110px!important;
- }
- .main-content {
- top: 112px!important;
- }
- % endif
- </style>
- % endif
- <link rel="stylesheet" href="${ static('jobbrowser/css/jobbrowser-embeddable.css') }">
- <script src="${ static('oozie/js/dashboard-utils.js') }" type="text/javascript" charset="utf-8"></script>
- <script src="${ static('desktop/ext/js/jquery/plugins/jquery.basictable.min.js') }"></script>
- <script src="${ static('desktop/ext/js/jquery/plugins/jquery-ui-1.10.4.custom.min.js') }"></script>
- <script src="${ static('desktop/js/apiHelper.js') }"></script>
- <script src="${ static('desktop/js/ko.charts.js') }"></script>
- <script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
- <script src="${ static('desktop/js/ko.editable.js') }"></script>
- <script src="${ static('oozie/js/list-oozie-coordinator.ko.js') }"></script>
- <script src="${ static('desktop/js/ace/ace.js') }"></script>
- % if not is_mini:
- <div id="jobbrowserComponents" class="jobbrowser-components">
- % else:
- <div id="jobbrowserMiniComponents" class="jobbrowserComponents">
- % endif
- % if not is_embeddable:
- ${ 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>
- % endif
- % if not is_mini:
- <div class="navbar hue-title-bar">
- <div class="navbar-inner">
- <div class="container-fluid">
- <div class="nav-collapse">
- <ul class="nav">
- <li class="app-header">
- <a href="/${app_name}">
- <img src="${ static('jobbrowser/art/icon_jobbrowser_48.png') }" class="app-icon" alt="${ _('Job browser icon') }"/>
- ${ _('Job Browser') }
- </a>
- </li>
- <li data-bind="css: {'active': interface() === 'jobs'}"><a class="pointer" data-bind="click: function(){ selectInterface('jobs'); }">${ _('Jobs') }</a></li>
- <li data-bind="css: {'active': interface() === 'workflows'}"><a class="pointer" data-bind="click: function(){ selectInterface('workflows'); }">${ _('Workflows') }</a></li>
- <li data-bind="css: {'active': interface() === 'schedules'}"><a class="pointer" data-bind="click: function(){ selectInterface('schedules'); }">${ _('Schedules') }</a></li>
- <li data-bind="css: {'active': interface() === 'bundles'}"><a class="pointer" data-bind="click: function(){ selectInterface('bundles'); }">${ _('Bundles') }</a></li>
- <li data-bind="css: {'active': interface() === 'slas'}"><a class="pointer" data-bind="click: function(){ selectInterface('slas'); }">${ _('SLAs') }</a></li>
- </ul>
- % 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
- </div>
- </div>
- </div>
- </div>
- % endif
- <div class="main-content">
- <div class="vertical-full container-fluid" data-bind="style: { 'padding-left' : $root.isLeftPanelVisible() ? '0' : '20px' }">
- <div class="vertical-full">
- <div class="vertical-full row-fluid panel-container">
- % if not is_embeddable:
- <div class="assist-container left-panel" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable()">
- <a title="${_('Toggle Assist')}" class="pointer hide-assist" data-bind="click: function() { $root.isLeftPanelVisible(false) }">
- <i class="fa fa-chevron-left"></i>
- </a>
- <div class="assist" data-bind="component: {
- name: 'assist-panel',
- params: {
- user: '${user.username}',
- sql: {
- navigationSettings: {
- openItem: false,
- showStats: true
- }
- },
- visibleAssistPanels: ['sql']
- }
- }"></div>
- </div>
- <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }"><div class="resize-bar"> </div></div>
- % endif
- <div class="content-panel">
- <div class="content-panel-inner">
- <div data-bind="template: { name: 'breadcrumbs' }"></div>
- <!-- ko if: ! $root.job() -->
- ${_('Filter')} <input type="text" class="input-xlarge search-query" data-bind="textInput: jobs.textFilter" placeholder="${_('Filter by id, name, user...')}" />
- <div class="btn-group">
- <select data-bind="options: jobs.statesValuesFilter, selectedOptions: jobs.statesFilter, optionsText: 'name', optionsValue: 'value'" size="3" multiple="true"></select>
- <a class="btn btn-status btn-success" data-value="completed">${ _('Succeeded') }</a>
- <a class="btn btn-status btn-warning" data-value="running">${ _('Running') }</a>
- <a class="btn btn-status btn-danger disable-feedback" data-value="failed">${ _('Failed') }</a>
- </div>
- ${_('in the last')} <input class="input-mini no-margin" type="number" min="1" max="3650" data-bind="value: jobs.timeValueFilter">
- <select class="input-small no-margin" data-bind="value: jobs.timeUnitFilter, options: jobs.timeUnitFilterUnits, optionsText: 'name', optionsValue: 'value'">
- <option value="days">${_('days')}</option>
- <option value="hours">${_('hours')}</option>
- <option value="minutes">${_('minutes')}</option>
- </select>
- <div class="btn-toolbar pull-right" 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="runningJobsTable" class="datatables table table-condensed">
- <thead>
- <tr>
- <th width="1%"><div class="select-all hueCheckbox fa" data-bind="hueCheckAll: { allValues: jobs.runningApps, selectedValues: jobs.selectedJobs }"></div></th>
- <th>${_('Duration')}</th>
- <th>${_('Started')}</th>
- <th>${_('Type')}</th>
- <th>${_('Status')}</th>
- <th>${_('Progress')}</th>
- <th>${_('Name')}</th>
- <th>${_('User')}</th>
- <th>${_('Id')}</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: jobs.runningApps">
- <tr data-bind="click: fetchJob">
- <td><div class="hueCheckbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#runningJobsTable', value: $data, hueChecked: $parent.jobs.selectedJobs"></div></td>
- <td data-bind="text: duration"></td>
- <td data-bind="text: submitted></td>
- <td data-bind="text: type"></td>
- <td data-bind="text: status"></td>
- <td data-bind="text: progress"></td>
- <td data-bind="text: name"></td>
- <td data-bind="text: user"></td>
- <td data-bind="text: id"></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="card card-small">
- <table id="finishedJobsTable" class="datatables table table-condensed">
- <thead>
- <tr>
- <th width="1%"><div class="select-all hueCheckbox fa" data-bind="hueCheckAll: { allValues: jobs.finishedApps, selectedValues: jobs.selectedJobs }"></div></th>
- <th>${_('Duration')}</th>
- <th>${_('Started')}</th>
- <th>${_('Type')}</th>
- <th>${_('Status')}</th>
- <th>${_('Progress')}</th>
- <th>${_('Name')}</th>
- <th>${_('User')}</th>
- <th>${_('Id')}</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: jobs.finishedApps">
- <tr data-bind="click: fetchJob">
- <td><div class="hueCheckbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#finishedJobsTable', value: $data, hueChecked: $parent.jobs.selectedJobs"></div></td>
- <td data-bind="text: duration"></td>
- <td data-bind="text: submitted"></td>
- <td data-bind="text: type"></td>
- <td data-bind="text: status"></td>
- <td data-bind="text: progress"></td>
- <td data-bind="text: name"></td>
- <td data-bind="text: user"></td>
- <td data-bind="text: id"></td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- /ko -->
- <!-- ko if: $root.job() -->
- <!-- ko with: $root.job() -->
- <!-- ko if: mainType() == 'jobs' -->
- <div data-bind="template: { name: 'job-page' }"></div>
- <!-- /ko -->
- <!-- ko if: mainType() == 'workflows' -->
- <!-- ko if: type() == 'workflow' -->
- <div data-bind="template: { name: 'workflow-page' }"></div>
- <!-- /ko -->
- <!-- ko if: type() == 'workflow-action' -->
- <div data-bind="template: { name: 'workflow-action-page' }"></div>
- <!-- /ko -->
- <!-- /ko -->
- <!-- ko if: mainType() == 'schedules' -->
- <div data-bind="template: { name: 'schedule-page' }"></div>
- <!-- /ko -->
- <!-- ko if: mainType() == 'bundles' -->
- <div data-bind="template: { name: 'bundle-page' }"></div>
- <!-- /ko -->
- <!-- ko if: mainType() == 'sla' -->
- <div data-bind="template: { name: 'sla-page' }"></div>
- <!-- /ko -->
- <!-- /ko -->
- <!-- /ko -->
- <div data-bind="template: { name: 'pagination', data: $root.jobs }, visible: ! $root.job()"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/html" id="breadcrumbs-icons">
- <!-- ko switch: type -->
- <!-- ko case: 'workflow' -->
- <img src="${ static('oozie/art/icon_oozie_workflow_48.png') }" class="app-icon" alt="${ _('Oozie workflow icon') }"/>
- <!-- /ko -->
- <!-- ko case: 'workflow-action' -->
- <i class="fa fa-fw fa-code-fork"></i>
- <!-- /ko -->
- <!-- ko case: 'schedule' -->
- <img src="${ static('oozie/art/icon_oozie_coordinator_48.png') }" class="app-icon" alt="${ _('Oozie coordinator icon') }"/>
- <!-- /ko -->
- <!-- ko case: 'bundle' -->
- <img src="${ static('oozie/art/icon_oozie_bundle_48.png') }" class="app-icon" alt="${ _('Oozie bundle icon') }"/>
- <!-- /ko -->
- <!-- /ko -->
- </script>
- <script type="text/html" id="breadcrumbs">
- <h3>
- <ul class="inline hue-breadcrumbs-bar" data-bind="foreach: breadcrumbs">
- <li>
- <!-- ko if: $index() > 0 -->
- <span class="divider">></span>
- <!-- /ko -->
- <!-- ko if: $index() == 0 -->
- <a href="javascript:void(0)" data-bind="text: name, click: function() { $root.selectInterface(name); }" style="text-transform: capitalize"></a>
- <!-- /ko -->
- <!-- ko if: $index() != 0 -->
- <!-- ko if: $index() != $parent.breadcrumbs().length - 1 -->
- <a href="javascript:void(0)" data-bind="click: function() { $parent.breadcrumbs.splice($index()); $root.job().id(id); $root.job().fetchJob(); }">
- <span data-bind="template: 'breadcrumbs-icons'"></span>
- <span data-bind="text: id"></span></a>
- <!-- /ko -->
- <!-- ko if: $index() == $parent.breadcrumbs().length - 1 -->
- <span data-bind="template: 'breadcrumbs-icons'"></span>
- <span data-bind="text: id, attr: {title: id}"></span>
- <!-- /ko -->
- <!-- /ko -->
- </li>
- </ul>
- </h3>
- </script>
- <script type="text/html" id="pagination">
- <!-- ko ifnot: hasPagination -->
- <div class="inline">
- <span data-bind="text: paginationResultCounts()"></span>
- ${ _('jobs') }
- </div>
- <!-- /ko -->
- <!-- ko if: hasPagination -->
- <div class="inline">
- <div class="inline">
- ${ _('Showing') }
- <span data-bind="text: Math.min((paginationPage() - 1) * paginationResultPage() + 1, paginationResultCounts())"></span>
- ${ _('to')}
- <span data-bind="text: Math.min(paginationPage() * paginationResultPage(), paginationResultCounts())"></span>
- ${ _('of') }
- <span data-bind="text: paginationResultCounts"></span>
- ##${ _('Show')}
- ##<span data-bind="text: paginationResultPage"></span>
- ##${ _('results by page.') }
- </div>
- <ul class="inline">
- <li class="previous-page" data-bind="visible: showPreviousPage">
- <a href="javascript:void(0);" data-bind="click: previousPage" title="${_('Previous page')}"><i class="fa fa-backward"></i></a>
- </li>
- <li class="next-page" data-bind="visible: showNextPage">
- <a href="javascript:void(0);" data-bind="click: nextPage" title="${_('Next page')}"><i class="fa fa-forward"></i></a>
- </li>
- </ul>
- </div>
- <!-- /ko -->
- </script>
- <script type="text/html" id="job-page">
- <!-- ko if: type() == 'MAPREDUCE' -->
- <div data-bind="template: { name: 'job-mapreduce-page', data: $root.job() }"></div>
- <!-- /ko -->
- <!-- ko if: type() == 'MAP' || type() == 'REDUCE' -->
- <div data-bind="template: { name: 'job-mapreduce-task-page', data: $root.job() }"></div>
- <!-- /ko -->
- <!-- ko if: type() == 'MAP_ATTEMPT' || type() == 'REDUCE_ATTEMPT' -->
- <div data-bind="template: { name: 'job-mapreduce-task-attempt-page', data: $root.job() }"></div>
- <!-- /ko -->
- <!-- ko if: type() == 'YARN' -->
- <div data-bind="template: { name: 'job-yarn-page', data: $root.job() }"></div>
- <!-- /ko -->
- <!-- ko if: type() == 'IMPALA' -->
- <div data-bind="template: { name: 'job-impala-page', data: $root.job() }"></div>
- <!-- /ko -->
- <!-- ko if: type() == 'SPARK' -->
- <div data-bind="template: { name: 'job-spark-page', data: $root.job() }"></div>
- <!-- /ko -->
- </script>
- <script type="text/html" id="job-yarn-page">
- <h2>YARN</h2>
- <br>
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Name') } <span data-bind="text: name"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('Status') } <span data-bind="text: status"></span>
- ${ _('User') } <span data-bind="text: user"></span>
- ${ _('Progress') } <span data-bind="text: progress"></span>
- ${ _('Duration') } <span data-bind="text: duration"></span>
- ${ _('Submitted') } <span data-bind="text: submitted"></span>
- </script>
- <script type="text/html" id="job-mapreduce-page">
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Name') } <span data-bind="text: name"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('Status') } <span data-bind="text: status"></span>
- ${ _('User') } <span data-bind="text: user"></span>
- ${ _('Progress') } <span data-bind="text: progress"></span>
- ${ _('Duration') } <span data-bind="text: duration"></span>
- ${ _('Submitted') } <span data-bind="text: submitted"></span>
- <br><br>
- <!-- ko with: properties -->
- Map <span data-bind="text: maps_percent_complete"></span> <span data-bind="text: finishedMaps"></span> /<span data-bind="text: desiredMaps"></span>
- Reduce <span data-bind="text: reduces_percent_complete"></span> <span data-bind="text: finishedReduces"></span> / <span data-bind="text: desiredReduces"></span><br>
- Duration <span data-bind="text: $parent.duration"></span><br>
- <!-- /ko -->
- <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>
- <a href="javascript:void(0)" data-bind="click: function() { control('kill'); }">Stop</a>
- <ul class="nav nav-tabs margin-top-20">
- <li class="active"><a href="#job-mapreduce-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
- <li><a href="#job-mapreduce-page-tasks" data-bind="click: function(){ fetchProfile('tasks'); $('a[href=\'#job-mapreduce-page-tasks\']').tab('show'); }">${ _('Tasks') }</a></li>
- <li><a href="#job-mapreduce-page-metadata" data-bind="click: function(){ fetchProfile('metadata'); $('a[href=\'#job-mapreduce-page-metadata\']').tab('show'); }">${ _('Metadata') }</a></li>
- <li><a href="#job-mapreduce-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="job-mapreduce-page-logs">
- % for name in ['stdout', 'stderr', 'syslog']:
- <a href="javascript:void(0)" data-bind="click: function() { fetchLogs('${ name }'); }, text: '${ name }'"></a>
- % endfor
- <br>
- <pre data-bind="html: logs"></pre>
- </div>
- <div class="tab-pane" id="job-mapreduce-page-tasks">
- ${_('Filter')} <input 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">${ _('MAP') }</a>
- <a class="btn btn-status btn-warning" data-value="running">${ _('REDUCE') }</a>
- </span>
- </span>
- <div class="btn-toolbar pull-right" 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"> ${ _('View') }</span></button>
- </div>
- <table class="table table-condensed">
- <thead>
- <tr>
- <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
- <th>${_('Type')}</th>
- <th>${_('Id')}</th>
- <th>${_('elapsedTime')}</th>
- <th>${_('progress')}</th>
- <th>${_('state')}</th>
- <th>${_('startTime')}</th>
- <th>${_('successfulAttempt')}</th>
- <th>${_('finishTime')}</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: properties['tasks']()['task_list']">
- <tr data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }">
- <td><div class="hueCheckbox fa"></div></td>
- <td data-bind="text: type"></td>
- <td data-bind="text: id"></td>
- <td data-bind="text: elapsedTime"></td>
- <td data-bind="text: progress"></td>
- <td data-bind="text: state"></td>
- <td data-bind="text: startTime"></td>
- <td data-bind="text: successfulAttempt"></td>
- <td data-bind="text: finishTime"></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="tab-pane" id="job-mapreduce-page-metadata">
- <pre data-bind="text: ko.toJSON(properties['metadata'], null, 2)"></pre>
- </div>
- <div class="tab-pane" id="job-mapreduce-page-counters">
- <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
- </div>
- </div>
- </script>
- <script type="text/html" id="job-mapreduce-task-page">
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('progress') } <span data-bind="text: progress"></span>
- <br><br>
- <!-- ko with: properties -->
- ${ _('state') } <span data-bind="text: state"></span>
- ${ _('startTime') } <span data-bind="text: startTime"></span>
- ${ _('successfulAttempt') } <span data-bind="text: successfulAttempt"></span>
- ${ _('finishTime') } <span data-bind="text: finishTime"></span>
- ${ _('elapsedTime') } <span data-bind="text: elapsedTime"></span>
- <!-- /ko -->
- <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>
- <ul class="nav nav-tabs margin-top-20">
- <li class="active"><a href="#job-mapreduce-task-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
- <li><a href="#job-mapreduce-task-page-attempts" data-bind="click: function(){ fetchProfile('attempts'); $('a[href=\'#job-mapreduce-task-page-attempts\']').tab('show'); }">${ _('Attempts') }</a></li>
- <li><a href="#job-mapreduce-task-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="job-mapreduce-task-page-logs">
- % for name in ['stdout', 'stderr', 'syslog']:
- <a href="javascript:void(0)" data-bind="click: function() { fetchLogs('${ name }'); }, text: '${ name }'"></a>
- % endfor
- <br>
- <pre data-bind="html: logs"></pre>
- </div>
- <div class="tab-pane" id="job-mapreduce-task-page-attempts">
- ${_('Filter')} <input 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>
- <a class="btn btn-status btn-warning" data-value="running">${ _('Running') }</a>
- <a class="btn btn-status btn-danger disable-feedback" data-value="failed">${ _('Failed') }</a>
- </span>
- </span>
- <div class="btn-toolbar pull-right" 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"> ${ _('View') }</span></button>
- </div>
- <table class="table table-condensed">
- <thead>
- <tr>
- <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
- <th>${_('assignedContainerId')}</th>
- <th>${_('progress')}</th>
- <th>${_('elapsedTime')}</th>
- <th>${_('state')}</th>
- <th>${_('rack')}</th>
- <th>${_('nodeHttpAddress')}</th>
- <th>${_('type')}</th>
- <th>${_('startTime')}</th>
- <th>${_('id')}</th>
- <th>${_('finishTime')}</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: properties['attempts']()['task_list']">
- <tr data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }">
- <td><div class="hueCheckbox fa"></div></td>
- <td data-bind="text: assignedContainerId"></td>
- <td data-bind="text: progress"></td>
- <td data-bind="text: elapsedTime"></td>
- <td data-bind="text: state"></td>
- <td data-bind="text: rack"></td>
- <td data-bind="text: nodeHttpAddress"></td>
- <td data-bind="text: type"></td>
- <td data-bind="text: startTime"></td>
- <td data-bind="text: id"></td>
- <td data-bind="text: finishTime"></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="tab-pane" id="job-mapreduce-task-page-counters">
- <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
- </div>
- </div>
- </script>
- <script type="text/html" id="job-mapreduce-task-attempt-page">
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('progress') } <span data-bind="text: progress"></span>
- ${ _('type') } <span data-bind="text: type"></span>
- <br><br>
- <!-- ko with: properties -->
- ${ _('assignedContainerId') } <span data-bind="text: assignedContainerId"></span>
- ${ _('elapsedTime') } <span data-bind="text: elapsedTime"></span>
- ${ _('rack') } <span data-bind="text: rack"></span>
- ${ _('nodeHttpAddress') } <span data-bind="text: nodeHttpAddress"></span>
- ${ _('state') } <span data-bind="text: state"></span>
- ${ _('startTime') } <span data-bind="text: startTime"></span>
- ${ _('finishTime') } <span data-bind="text: finishTime"></span>
- <!-- /ko -->
- <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>
- <ul class="nav nav-tabs margin-top-20">
- <li class="active"><a href="#job-mapreduce-task-attempt-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
- <li><a href="#job-mapreduce-task-attempt-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-attempt-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="job-mapreduce-task-attempt-page-logs">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#job-mapreduce-task-attempt-page-logs-attempts" data-toggle="tab">${ _('Attempts') }</a></li>
- <li><a href="#job-mapreduce-task-attempt-page-logs-container" data-toggle="tab">${ _('Container') }</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="job-mapreduce-task-attempt-page-logs-attempts">
- % for name in ['stdout', 'stderr', 'syslog']:
- <a href="javascript:void(0)" data-bind="click: function() { fetchLogs('${ name }'); }, text: '${ name }'"></a>
- % endfor
- <br>
- <pre data-bind="html: logs"></pre>
- </div>
- <div class="tab-pane" id="job-mapreduce-task-attempt-page-logs-container">
- % for name in ['stdout', 'stderr', 'syslog']:
- <a href="javascript:void(0)" data-bind="click: function() { fetchLogs('${ name }'); }, text: '${ name }'"></a>
- % endfor
- <br>
- <pre data-bind="html: logs"></pre>
- </div>
- </div>
- </div>
- <div class="tab-pane" id="job-mapreduce-task-attempt-page-counters">
- <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
- </div>
- </div>
- </script>
- <script type="text/html" id="job-impala-page">
- <h2>Impala</h2>
- <br>
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Name') } <span data-bind="text: name"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('Status') } <span data-bind="text: status"></span>
- ${ _('User') } <span data-bind="text: user"></span>
- ${ _('Progress') } <span data-bind="text: progress"></span>
- ${ _('Duration') } <span data-bind="text: duration"></span>
- ${ _('Submitted') } <span data-bind="text: submitted"></span>
- </script>
- <script type="text/html" id="job-spark-page">
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Name') } <span data-bind="text: name"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('Status') } <span data-bind="text: status"></span>
- ${ _('User') } <span data-bind="text: user"></span>
- ${ _('Progress') } <span data-bind="text: progress"></span>
- ${ _('Duration') } <span data-bind="text: duration"></span>
- ${ _('Submitted') } <span data-bind="text: submitted"></span>
- </script>
- <script type="text/html" id="workflow-page">
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Name') } <span data-bind="text: name"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('Status') } <span data-bind="text: status"></span>
- ${ _('User') } <span data-bind="text: user"></span>
- ${ _('Progress') } <span data-bind="text: progress"></span>
- ${ _('Duration') } <span data-bind="text: duration"></span>
- ${ _('Submitted') } <span data-bind="text: submitted"></span>
- <br><br>
- Variables? Workspace<br>
- Duration 8s<br>
- <br><br>
- <div class="progress-job progress pull-left" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': isRunning(), 'progress-success': apiStatus() === 'SUCCEEDED', 'progress-danger': apiStatus() === 'FAILED'}">
- <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
- </div>
- <div class="btn-group">
- <!-- ko if: $root.job().hasKill -->
- <button class="btn btn-danger" title="${_('Stop selected')}" data-bind="click: function() { control('kill'); }, enable: killEnabled">
- ## TODO confirmation
- <i class="fa fa-times"></i> ${_('Kill')}
- </button>
- <!-- /ko -->
- <!-- ko if: $root.job().hasResume -->
- <button class="btn" title="${ _('Resume selected') }" data-bind="click: function() { control('resume'); }, enable: resumeEnabled">
- <i class="fa fa-play"></i> ${ _('Resume') }
- </button>
- <!-- /ko -->
- <!-- ko if: $root.job().hasSuspend -->
- <button class="btn" title="${ _('Suspend selected') }" data-bind="click: function() { control('resume'); }, enable: suspendEnabled">
- <i class="fa fa-pause"></i> ${ _('Suspend') }
- </button>
- <!-- /ko -->
- <!-- ko if: $root.job().hasRerun -->
- <button class="btn" title="${ _('Rerun selected') }" data-bind="click: function() { control('rerun'); }, enable: rerunEnabled">
- <i class="fa fa-repeat"></i> ${ _('Rerun') }
- </button>
- <!-- /ko -->
- </div>
- <ul class="nav nav-tabs margin-top-20">
- <li class="active"><a href="#workflow-page-graph" data-toggle="tab">${ _('Graph') }</a></li>
- <li><a href="#workflow-page-metadata" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#workflow-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
- <li><a href="#workflow-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
- <li><a href="#workflow-page-tasks" data-toggle="tab">${ _('Tasks') }</a></li>
- <li><a href="#workflow-page-xml" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#workflow-page-xml\']').tab('show'); }">${ _('XML') }</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="workflow-page-graph">
- </div>
- <div class="tab-pane" id="workflow-page-logs">
- <pre data-bind="html: logs"></pre>
- </div>
- <div class="tab-pane" id="workflow-page-tasks">
- <table id="jobsTable" class="datatables table table-condensed">
- <thead>
- <tr>
- <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
- <th>${_('log')}</th>
- <th>${_('status')}</th>
- <th>${_('errorMessage')}</th>
- <th>${_('errorCode')}</th>
- <th>${_('externalId')}</th>
- <th>${_('id')}</th>
- <th>${_('startTime')}</th>
- <th>${_('endTime')}</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: properties['actions']">
- <tr data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }">
- <td><div class="hueCheckbox fa"></div></td>
- <td data-bind="text: 'logs'"></td>
- <td data-bind="text: status"></td>
- <td data-bind="text: errorMessage"></td>
- <td data-bind="text: errorCode"></td>
- <td data-bind="text: externalId"></td>
- <td data-bind="text: id"></td>
- <td data-bind="text: startTime"></td>
- <td data-bind="text: endTime"></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="tab-pane" id="workflow-page-metadata">
- <pre data-bind="text: ko.toJSON(properties['properties'], null, 2)"></pre>
- </div>
- <div class="tab-pane" id="workflow-page-xml">
- <div data-bind="readonlyXML: properties['xml'], path: 'xml'"></div>
- </div>
- </div>
- </script>
- <script type="text/html" id="workflow-action-page">
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Name') } <span data-bind="text: name"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('Status') } <span data-bind="text: status"></span>
- ${ _('User') } <span data-bind="text: user"></span>
- ${ _('Progress') } <span data-bind="text: progress"></span>
- ${ _('Duration') } <span data-bind="text: duration"></span>
- ${ _('Submitted') } <span data-bind="text: submitted"></span>
- <br><br>
- Job ID ....<br>
- Duration 8s<br>
- <br><br>
- Log (if external id) | Child jobs
- </script>
- <script type="text/html" id="schedule-page">
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Name') } <span data-bind="text: name"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('Status') } <span data-bind="text: status"></span>
- ${ _('User') } <span data-bind="text: user"></span>
- ${ _('Progress') } <span data-bind="text: progress"></span>
- ${ _('Duration') } <span data-bind="text: duration"></span>
- ${ _('Submitted') } <span data-bind="text: submitted"></span>
- <br><br>
- Variables, Workspace<br>
- Duration 8s<br>
- nextTime<span data-bind="text: properties['nextTime']"></span><br>
- total_actions<span data-bind="text: properties['total_actions']"></span><br>
- endTime<span data-bind="text: properties['endTime']"></span><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>
- <a href="javascript:void(0)" data-bind="click: function() { control('kill'); }">${ _('Stop') }</a> |
- <a href="javascript:void(0)" data-bind="click: function() { control('resume'); }">${ _('Resume')}</a> |
- <a href="javascript:void(0)" data-bind="click: function() { control('rerun'); }">${ _('Rerun') }</a>
- <br>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#schedule-page-calendar" data-toggle="tab">${ _('Calendar') }</a></li>
- <li><a href="#schedule-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
- <li><a href="#schedule-page-tasks" data-toggle="tab">${ _('Tasks') }</a></li>
- <li><a href="#schedule-page-metadata" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#schedule-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
- <li><a href="#schedule-page-xml" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#schedule-page-xml\']').tab('show'); }">${ _('XML') }</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="schedule-page-calendar">
- <pre data-bind="text: ko.toJSON(properties['actions'], null, 2)"></pre>
- </div>
- <div class="tab-pane" id="schedule-page-logs">
- <pre data-bind="html: logs"></pre>
- </div>
- <div class="tab-pane" id="schedule-page-tasks">
- <table id="jobsTable" class="datatables table table-condensed">
- <thead>
- <tr>
- <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
- <th>${_('Status')}</th>
- <th>${_('Title')}</th>
- <th>${_('type')}</th>
- <th>${_('errorMessage')}</th>
- <th>${_('missingDependencies')}</th>
- <th>${_('number')}</th>
- <th>${_('errorCode')}</th>
- <th>${_('externalId')}</th>
- <th>${_('id')}</th>
- <th>${_('lastModifiedTime')}</th>
- </tr>
- </thead>
- <tbody data-bind="foreach: properties['actions']">
- <tr data-bind="click: function() { if (externalId()) { $root.job().id(externalId()); $root.job().fetchJob();} }">
- <td><div class="hueCheckbox fa"></div></td>
- <td data-bind="text: status"></td>
- <td data-bind="text: title"></td>
- <td data-bind="text: type"></td>
- <td data-bind="text: errorMessage"></td>
- <td data-bind="text: missingDependencies"></td>
- <td data-bind="text: number"></td>
- <td data-bind="text: errorCode"></td>
- <td data-bind="text: externalId"></td>
- <td data-bind="text: id"></td>
- <td data-bind="text: lastModifiedTime"></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="tab-pane" id="schedule-page-metadata">
- <pre data-bind="text: ko.toJSON(properties['properties'], null, 2)"></pre>
- </div>
- <div class="tab-pane" id="schedule-page-xml">
- <div data-bind="readonlyXML: properties['xml'], path: 'xml'"></div>
- </div>
- </div>
- </script>
- <script type="text/html" id="bundle-page">
- ${ _('Id') } <span data-bind="text: id"></span>
- ${ _('Name') } <span data-bind="text: name"></span>
- ${ _('Type') } <span data-bind="text: type"></span>
- ${ _('Status') } <span data-bind="text: status"></span>
- ${ _('User') } <span data-bind="text: user"></span>
- ${ _('Progress') } <span data-bind="text: progress"></span>
- ${ _('Duration') } <span data-bind="text: duration"></span>
- ${ _('Submitted') } <span data-bind="text: submitted"></span>
- </script>
- <script type="text/html" id="slas-page">
- <div class="container-fluid">
- <div class="card card-small">
- <div class="card-body">
- <p>
- <div class="search-something center empty-wrapper">
- <a href="http://gethue.com/hadoop-tutorial-monitor-and-get-alerts-for-your-workflows-with-the-oozie-slas/" target="_blank" title="${ _('Click to learn more') }">
- <i class="fa fa-exclamation"></i>
- </a>
- <h1>${_('Oozie is not setup to create SLAs')}</h1>
- <br/>
- </div>
- </p>
- </div>
- <h1 class="card-heading simple">
- <div class="pull-left" style="margin-right: 20px;margin-top: 2px">${_('Search')}</div>
- <form class="form-inline" id="searchForm" method="GET" action="." style="margin-bottom: 4px">
- <label>
- ${_('Name or Id')}
- <input type="text" name="job_name" class="searchFilter input-xlarge search-query" placeholder="${_('Job Name or Id (required)')}">
- </label>
- <span style="padding-left:25px">
- <label class="label-with-margin">
- ${ _('Start') }
- <input type="text" name="start_0" class="input-small date" value="" placeholder="${_('Date in GMT')}" data-bind="enable: useDates">
- <input type="text" name="start_1" class="input-small time" value="" data-bind="enable: useDates">
- </label>
- <label>
- ${ _('End') }
- <input type="text" name="end_0" class="input-small date" value="" placeholder="${_('Date in GMT')}" data-bind="enable: useDates">
- <input type="text" name="end_1" class="input-small time" value="" data-bind="enable: useDates">
- </label>
- </span>
- <label class="checkbox label-with-margin">
- <input type="checkbox" name="useDates" class="searchFilter" data-bind="checked: useDates, click: performSearch()">
- ${ _('Date filter') }
- </label>
- </form>
- </h1>
- <div class="card-body">
- <p>
- <div class="loader hide" style="text-align: center;margin-top: 20px">
- <i class="fa fa-spinner fa-spin big-spinner"></i>
- </div>
- <div class="search-something center empty-wrapper">
- <i class="fa fa-search"></i>
- <h1>${_('Use the form above to search for SLAs.')}</h1>
- <br/>
- </div>
- <div class="no-results center empty-wrapper hide">
- <h1>${_('The server returned no results.')}</h1>
- <br/>
- </div>
- <div class="results hide">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#slaListTab" data-toggle="tab">${ _('List') }</a></li>
- <li><a href="#chartTab" data-toggle="tab">${ _('Chart') }</a></li>
- </ul>
- <div class="tab-content" style="padding-bottom:200px">
- <div class="tab-pane active" id="slaListTab">
- <div class="tabbable">
- <div class="tab-content">
- <table id="slaTable" class="table table-striped table-condensed">
- <thead>
- <th>${_('Status')}</th>
- <th>${_('Name')}</th>
- <th>${_('Type')}</th>
- <th>${_('ID')}</th>
- <th>${_('Nominal Time')}</th>
- <th>${_('Expected Start')}</th>
- <th>${_('Actual Start')}</th>
- <th>${_('Expected End')}</th>
- <th>${_('Actual End')}</th>
- <th>${_('Expected Duration')}</th>
- <th>${_('Actual Duration')}</th>
- <th>${_('Job Status')}</th>
- <th>${_('User')}</th>
- <th>${_('Last Modified')}</th>
- </thead>
- <tbody>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- <div class="tab-pane" id="chartTab" style="padding-left: 20px">
- <div id="yAxisLabel" class="hide">${_('Time since Nominal Time in min')}</div>
- <div id="slaChart"></div>
- </div>
- </div>
- </div>
- </p>
- </div>
- </div>
- </div>
- </script>
- <script type="text/javascript">
- (function () {
- /** cf. updateWorkflowGraph()
- var Workflow = function(vm, job) {
- var lastPosition = {
- top: 0,
- left: 0
- }
- var updateArrowPosition = function () {
- huePubSub.publish('draw.graph.arrows');
- if ($('canvas').position().top !== lastPosition.top && $('canvas').position().left !== lastPosition.left) {
- lastPosition = $('canvas').position();
- window.setTimeout(updateArrowPosition, 100);
- }
- }
- var arrowsPolling = function () {
- if ($('#workflow-page-graph').is(':visible')){
- window.setTimeout(arrowsPolling, 100);
- }
- else {
- $('canvas').remove();
- }
- }
- $('canvas').remove();
- if (vm.job().type() === 'workflow') {
- $('#workflow-page-graph').empty();
- $.ajax({
- url: "/oozie/list_oozie_workflow/" + vm.job().id(),
- data: {
- 'graph': true,
- 'element': 'workflow-page-graph'
- },
- beforeSend: function (xhr) {
- xhr.setRequestHeader("X-Requested-With", "Hue");
- },
- dataType: "html",
- success: function (response) {
- $('#workflow-page-graph').html(response);
- updateArrowPosition();
- arrowsPolling();
- }
- });
- }
- }
- */
- var Job = function (vm, job) {
- var self = this;
- self.id = ko.observableDefault(job.id);
- self.name = ko.observableDefault(job.name);
- self.type = ko.observableDefault(job.type);
- self.status = ko.observableDefault(job.status);
- self.apiStatus = ko.observableDefault(job.apiStatus);
- self.progress = ko.observableDefault(job.progress);
- self.isRunning = ko.computed(function() {
- return self.apiStatus() != 'SUCCEEDED' && self.apiStatus() != 'FAILED';
- });
- self.user = ko.observableDefault(job.user);
- self.cluster = ko.observableDefault(job.cluster);
- self.duration = ko.observableDefault(job.duration);
- self.submitted = ko.observableDefault(job.submitted);
- self.logs = ko.observable('');
- //self.coordVM = new RunningCoordinatorModel([]);
- self.properties = ko.mapping.fromJS(job.properties || {});
- self.mainType = ko.observable(vm.interface());
- self.isKill = ko.computed(function() {
- return ['workflow'].indexOf(self.type()) != -1;
- });
- self.hasKill = ko.computed(function() {
- return ['workflow'].indexOf(self.type()) != -1;
- });
- self.killEnabled = ko.computed(function() {
- return self.hasKill() && self.apiStatus() == 'RUNNING';
- });
- self.hasResume = ko.computed(function() {
- return ['workflow'].indexOf(self.type()) != -1;
- });
- self.resumeEnabled = ko.computed(function() {
- return self.hasResume() && self.apiStatus() == 'PAUSED';
- });
- self.hasRerun = ko.computed(function() {
- return ['workflow'].indexOf(self.type()) != -1;
- });
- self.rerunEnabled = ko.computed(function() {
- return self.hasRerun() && ! self.isRunning();
- });
- self.hasPause = ko.computed(function() {
- return ['workflow'].indexOf(self.type()) != -1;
- });
- self.pauseEnabled = ko.computed(function() {
- return self.hasPause() && self.apiStatus() == 'RUNNING';
- });
- self.loadingJob = ko.observable(false);
- var lastFetchJobRequest = null;
- var lastUpdateJobRequest = null;
- self._fetchJob = function (callback) {
- return $.post("/jobbrowser/api/job", {
- app_id: ko.mapping.toJSON(self.id),
- interface: ko.mapping.toJSON(vm.interface)
- }, function (data) {
- if (data.status == 0) {
- if (callback) {
- callback(data);
- };
- } else {
- $(document).trigger("error", data.message);
- }
- });
- };
- self.fetchJob = function () {
- vm.apiHelper.cancelActiveRequest(lastFetchJobRequest);
- vm.apiHelper.cancelActiveRequest(lastUpdateJobRequest);
- self.loadingJob(true);
- var interface = vm.interface();
- if (/oozie-oozi-W/.test(self.id())) {
- interface = 'workflows';
- }
- else if (/oozie-oozi-C/.test(self.id())) {
- interface = 'schedules';
- }
- else if (/oozie-oozi-B/.test(self.id())) {
- interface = 'bundles';
- }
- vm.interface(interface);
- lastFetchJobRequest = self._fetchJob(function (data) {
- if (data.status == 0) {
- vm.interface(interface);
- vm.job(new Job(vm, data.app));
- hueUtils.changeURL('#!' + vm.job().id());
- var crumbs = [];
- if (/^attempt_/.test(vm.job().id())) {
- crumbs.push({'id': vm.job().properties['app_id'], 'name': vm.job().properties['app_id'], 'type': 'app'});
- crumbs.push({'id': vm.job().properties['task_id'], 'name': vm.job().properties['task_id'], 'type': 'task'});
- }
- if (/^task_/.test(vm.job().id())) {
- crumbs.push({'id': vm.job().properties['app_id'], 'name': vm.job().properties['app_id'], 'type': 'app'});
- }
- if (/-oozie-oozi-W@/.test(vm.job().id())) {
- crumbs.push({'id': vm.job().properties['workflow_id'], 'name': vm.job().properties['workflow_id'], 'type': 'workflow'});
- }
- else if (/-oozie-oozi-W/.test(vm.job().id())) {
- if (vm.job().properties['bundle_id']()) {
- crumbs.push({'id': vm.job().properties['bundle_id'](), 'name': vm.job().properties['bundle_id'](), 'type': 'bundle'});
- }
- if (vm.job().properties['coordinator_id']()) {
- crumbs.push({'id': vm.job().properties['coordinator_id'](), 'name': vm.job().properties['coordinator_id'](), 'type': 'schedule'});
- }
- }
- else if (/-oozie-oozi-C/.test(vm.job().id())) {
- if (vm.job().properties['bundle_id']()) {
- crumbs.push({'id': vm.job().properties['bundle_id'](), 'name': vm.job().properties['bundle_id'](), 'type': 'bundle'});
- }
- }
- crumbs.push({'id': vm.job().id(), 'name': vm.job().name(), 'type': vm.job().type()});
- vm.resetBreadcrumbs(crumbs);
- vm.job().fetchLogs();
- } else {
- $(document).trigger("error", data.message);
- }
- }).always(function () {
- self.loadingJob(false);
- });
- };
- self.updateJob = function () {console.log('update job');
- vm.apiHelper.cancelActiveRequest(lastUpdateJobRequest);
- if (vm.job() == self && self.apiStatus() == 'RUNNING') {
- lastFetchJobRequest = self._fetchJob(function (data) {
- // vm.job(new Job(vm, data.app)); // Updates everything but redraw the page
- vm.job().fetchStatus();
- vm.job().fetchLogs();
- // vm.job().fetchProfile(); // Get name of active tab?
- // updateWorkflowGraph() // If workflow
- });
- }
- };
- self.fetchLogs = function (name) {
- $.post("/jobbrowser/api/job/logs", {
- app_id: ko.mapping.toJSON(self.id),
- interface: ko.mapping.toJSON(vm.interface),
- type: ko.mapping.toJSON(self.type),
- name: ko.mapping.toJSON(name ? name : 'default')
- }, function (data) {
- if (data.status == 0) {
- self.logs(data.logs.logs)
- } else {
- $(document).trigger("error", data.message);
- }
- });
- };
- self.fetchProfile = function (name) {
- $.post("/jobbrowser/api/job/profile", {
- app_id: ko.mapping.toJSON(self.id),
- interface: ko.mapping.toJSON(vm.interface),
- app_type: ko.mapping.toJSON(self.type),
- app_property: ko.mapping.toJSON(name)
- }, function (data) {
- if (data.status == 0) {
- self.properties[name](data[name]);
- } else {
- $(document).trigger("error", data.message);
- }
- });
- };
- self.fetchStatus = function () {
- $.post("/jobbrowser/api/job", {
- app_id: ko.mapping.toJSON(self.id),
- interface: ko.mapping.toJSON(self.mainType)
- }, function (data) {
- if (data.status == 0) {
- self.status(data.app.status);
- self.apiStatus(data.app.apiStatus);
- self.progress(data.app.progress);
- } else {
- $(document).trigger("error", data.message);
- }
- });
- };
- self.control = function (action) {
- $.post("/jobbrowser/api/job/action", {
- app_id: ko.mapping.toJSON(self.id),
- interface: ko.mapping.toJSON(vm.interface),
- app_type: ko.mapping.toJSON(self.type),
- operation: ko.mapping.toJSON({action: action})
- }, function (data) {
- if (data.status == 0) {
- $(document).trigger("info", data.message);
- self.fetchStatus();
- } else {
- $(document).trigger("error", data.message);
- }
- });
- };
- };
- var Jobs = function (vm) {
- var self = this;
- self.apps = ko.observableArray().extend({ rateLimit: 50 });
- self.totalApps = ko.observable(null);
- self.runningApps = ko.computed(function(job) {
- return $.grep(self.apps(), function(job) { return job.isRunning(); });
- });
- self.finishedApps = ko.computed(function(job) {
- return $.grep(self.apps(), function(job) { return ! job.isRunning(); });
- });
- self.loadingJobs = ko.observable(false);
- self.selectedJobs = ko.observableArray();
- self.textFilter = ko.observable('user:${ user.username } ').extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 1000 } });
- self.statesFilter = ko.observable('');
- self.statesValuesFilter = ko.observable([
- {'value': 'completed', 'name': '${_("Succeeded")}'},
- {'value': 'running', 'name': '${_("Running")}'},
- {'value': 'failed', 'name': '${_("Failed")}'},
- ]);
- self.timeValueFilter = ko.observable(7).extend({ throttle: 500 });
- self.timeUnitFilter = ko.observable('days').extend({ throttle: 500 });
- self.timeUnitFilterUnits = ko.observable([
- {'value': 'days', 'name': '${_("days")}'},
- {'value': 'hours', 'name': '${_("hours")}'},
- {'value': 'minutes', 'name': '${_("minutes")}'},
- ]);
- self.hasPagination = ko.computed(function() {
- return ['workflows', 'schedules', 'bundles'].indexOf(vm.interface()) != -1;
- });
- self.paginationPage = ko.observable(1);
- self.paginationOffset = ko.observable(1);
- self.paginationResultPage = ko.observable(100);
- self.paginationResultCounts = ko.computed(function() {
- return self.apps().length;
- });
- self.pagination = ko.computed(function() {
- return {
- 'page': self.paginationPage(),
- 'offset': self.paginationOffset(),
- 'limit': self.paginationResultPage()
- };
- });
- self.showPreviousPage = ko.computed(function() {
- return self.paginationOffset() > 1;
- });
- self.showNextPage = ko.computed(function() {
- return self.totalApps() != null && (self.paginationOffset() + self.paginationResultPage()) < self.totalApps();
- });
- self.previousPage = function() {
- self.paginationOffset(self.paginationOffset() - self.paginationResultPage());
- };
- self.nextPage = function() {
- self.paginationOffset(self.paginationOffset() + self.paginationResultPage());
- };
- self.filters = ko.computed(function() {
- return [
- {'text': self.textFilter()},
- {'time': {'time_value': self.timeValueFilter(), 'time_unit': self.timeUnitFilter()}},
- {'states': self.statesFilter()},
- {'pagination': self.pagination()},
- ];
- });
- self.filters.subscribe(function(value) {
- self.fetchJobs();
- });
- self._fetchJobs = function (callback) {
- return $.post("/jobbrowser/api/jobs", {
- interface: ko.mapping.toJSON(vm.interface),
- filters: ko.mapping.toJSON(self.filters),
- }, function (data) {
- if (data.status == 0) {
- if (callback) {
- callback(data);
- };
- } else {
- $(document).trigger("error", data.message);
- }
- });
- };
- var lastFetchJobsRequest = null;
- var lastUpdateJobsRequest = null;
- self.fetchJobs = function () {
- vm.apiHelper.cancelActiveRequest(lastUpdateJobsRequest);
- vm.apiHelper.cancelActiveRequest(lastFetchJobsRequest);
- self.loadingJobs(true);
- vm.job(null);
- lastFetchJobsRequest = self._fetchJobs(function(data) {
- var apps = [];
- if (data && data.apps) {
- data.apps.forEach(function (job) {
- apps.push(new Job(vm, job));
- });
- }
- self.apps(apps);
- self.totalApps(data.total);
- }).always(function () {
- self.loadingJobs(false);
- });
- }
- self.updateJobs = function () {console.log('update jobs');
- vm.apiHelper.cancelActiveRequest(lastUpdateJobsRequest);
- lastFetchJobsRequest = self._fetchJobs(function(data) {
- var apps = [];
- if (data && data.apps) {
- var i = 0, j = 0;
- var newJobs = [];
- while (i < self.apps().length && j < data.apps.length) {
- if (self.apps()[i].id() != data.apps[j].id) {
- // New Job
- newJobs.push(new Job(vm, data.apps[j]));
- j++;
- } else {
- // Updated jobs
- if (self.apps()[i].status() != data.apps[j].status) {
- self.apps()[i].status(data.apps[j].status);
- self.apps()[i].apiStatus(data.apps[j].apiStatus);
- }
- i++;
- j++;
- }
- }
- if (i < self.apps().length) {
- self.apps().splice(i, self.apps().length - i);
- }
- newJobs.forEach(function (job) {
- self.apps.push(job);
- });
- self.totalApps(data.total);
- }
- });
- };
- self.control = function (action) {
- $.post("/jobbrowser/api/job/action", {
- app_id: ko.mapping.toJSON(self.id), // CSV list
- interface: ko.mapping.toJSON(vm.interface),
- operation: ko.mapping.toJSON({action: action})
- }, function (data) {
- if (data.status == 0) {
- $(document).trigger("info", data.message);
- } else {
- $(document).trigger("error", data.message);
- }
- }).always(function () {
- });
- };
- };
- var JobBrowserViewModel = function (RunningCoordinatorModel) {
- var self = this;
- self.apiHelper = ApiHelper.getInstance();
- self.assistAvailable = ko.observable(true);
- self.isLeftPanelVisible = ko.observable();
- self.apiHelper.withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
- self.interface = ko.observable('jobs');
- self.selectInterface = function(interface) {
- self.interface(interface);
- self.resetBreadcrumbs();
- hueUtils.changeURL('#!' + interface);
- self.jobs.fetchJobs();
- self.job(null);
- };
- self.jobs = new Jobs(self);
- self.job = ko.observable();
- var clock;
- self.job.subscribe(function(val) {
- clearInterval(clock);
- if (val) {
- clock = setInterval(val.updateJob, 5000, 'jobbrowser');
- } else {
- clock = setInterval(self.jobs.updateJobs, 20000, 'jobbrowser');
- }
- });
- self.breadcrumbs = ko.observableArray([]);
- self.resetBreadcrumbs = function(extraCrumbs) {
- var crumbs = [{'id': '', 'name': self.interface(), 'type': self.interface()}]
- if (extraCrumbs) {
- crumbs = crumbs.concat(extraCrumbs);
- }
- self.breadcrumbs(crumbs);
- }
- self.resetBreadcrumbs();
- };
- var viewModel;
- huePubSub.subscribe('oozie.action.logs.click', function (widget) {
- viewModel.job().id(widget.externalId());
- viewModel.job().fetchJob();
- });
- huePubSub.subscribe('oozie.action.click', function (widget) {
- viewModel.job().id(widget.externalId());
- viewModel.job().fetchJob();
- });
- $(document).ready(function () {
- viewModel = new JobBrowserViewModel(RunningCoordinatorModel);
- % if not is_mini:
- ko.applyBindings(viewModel, $('#jobbrowserComponents')[0]);
- % else:
- ko.applyBindings(viewModel, $('#jobbrowserMiniComponents')[0]);
- % endif
- var loadHash = function () {
- var h = window.location.hash;
- if (h.indexOf('#!') === 0) {
- h = h.substr(2);
- }
- switch (h) {
- case '':
- break;
- case 'jobs':
- case 'workflows':
- case 'schedules':
- case 'bundles':
- viewModel.selectInterface(h);
- break;
- default:
- new Job(viewModel, {id: h}).fetchJob();
- }
- };
- window.onhashchange = function () {
- loadHash();
- }
- loadHash();
- console.log('JB2 ready Triggered');
- });
- })();
- </script>
- </span>
- % if not is_embeddable:
- ${ commonfooter(request, messages) | n,unicode }
- % endif
|