job_browser.mako 99 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392
  1. ## Licensed to Cloudera, Inc. under one
  2. ## or more contributor license agreements. See the NOTICE file
  3. ## distributed with this work for additional information
  4. ## regarding copyright ownership. Cloudera, Inc. licenses this file
  5. ## to you under the Apache License, Version 2.0 (the
  6. ## "License"); you may not use this file except in compliance
  7. ## with the License. You may obtain a copy of the License at
  8. ##
  9. ## http://www.apache.org/licenses/LICENSE-2.0
  10. ##
  11. ## Unless required by applicable law or agreed to in writing, software
  12. ## distributed under the License is distributed on an "AS IS" BASIS,
  13. ## WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. ## See the License for the specific language governing permissions and
  15. ## limitations under the License.
  16. <%
  17. from django.utils.translation import ugettext as _
  18. from desktop import conf
  19. from desktop.views import commonheader, commonfooter, _ko
  20. from jobbrowser.conf import MAX_JOB_FETCH
  21. %>
  22. <%
  23. SUFFIX = is_mini and "-mini" or ""
  24. %>
  25. % if not is_embeddable:
  26. ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
  27. <%namespace name="assist" file="/assist.mako" />
  28. % endif
  29. <span class="notebook">
  30. <link rel="stylesheet" href="${ static('desktop/ext/css/basictable.css') }">
  31. % if not is_embeddable:
  32. <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
  33. <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">
  34. <style type="text/css">
  35. % if conf.CUSTOM.BANNER_TOP_HTML.get():
  36. .show-assist {
  37. top: 110px!important;
  38. }
  39. .main-content {
  40. top: 112px!important;
  41. }
  42. % endif
  43. </style>
  44. % endif
  45. <link rel="stylesheet" href="${ static('jobbrowser/css/jobbrowser-embeddable.css') }">
  46. <script src="${ static('oozie/js/dashboard-utils.js') }" type="text/javascript" charset="utf-8"></script>
  47. <script src="${ static('desktop/ext/js/jquery/plugins/jquery.basictable.min.js') }"></script>
  48. <script src="${ static('desktop/ext/js/jquery/plugins/jquery-ui-1.10.4.custom.min.js') }"></script>
  49. <script src="${ static('desktop/js/ko.charts.js') }"></script>
  50. <script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
  51. <script src="${ static('desktop/js/ko.editable.js') }"></script>
  52. % if not is_mini:
  53. <div id="jobbrowserComponents" class="jobbrowser-components jobbrowser-full jb-panel">
  54. % else:
  55. <div id="jobbrowserMiniComponents" class="jobbrowser-components jobbrowser-mini jb-panel">
  56. % endif
  57. % if not is_embeddable:
  58. ${ assist.assistJSModels() }
  59. ${ assist.assistPanel() }
  60. <a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isLeftPanelVisible() && $root.assistAvailable(), click: function() { $root.isLeftPanelVisible(true); }">
  61. <i class="fa fa-chevron-right"></i>
  62. </a>
  63. % endif
  64. % if not is_mini:
  65. <div class="navbar hue-title-bar">
  66. <div class="navbar-inner">
  67. <div class="container-fluid">
  68. <div class="nav-collapse">
  69. <ul class="nav">
  70. <li class="app-header">
  71. <a href="/${app_name}">
  72. <img src="${ static('jobbrowser/art/icon_jobbrowser_48.png') }" class="app-icon" alt="${ _('Job browser icon') }"/>
  73. ${ _('Job Browser') }
  74. </a>
  75. </li>
  76. <!-- ko foreach: availableInterfaces -->
  77. <li data-bind="css: {'active': $parent.interface() === interface}, visible: condition()">
  78. <a class="pointer" data-bind="click: function(){ $parent.selectInterface(interface); }, text: label"></a>
  79. </li>
  80. <!-- /ko -->
  81. </ul>
  82. % if not hiveserver2_impersonation_enabled:
  83. <div class="pull-right label label-warning" style="margin-top: 16px">${ _("Hive jobs are running as the 'hive' user") }</div>
  84. % endif
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. % endif
  90. <div class="main-content">
  91. <div class="vertical-full container-fluid" data-bind="style: { 'padding-left' : $root.isLeftPanelVisible() ? '0' : '20px' }">
  92. <div class="vertical-full">
  93. <div class="vertical-full row-fluid panel-container">
  94. % if not is_embeddable:
  95. <div class="assist-container left-panel" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable()">
  96. <a title="${_('Toggle Assist')}" class="pointer hide-assist" data-bind="click: function() { $root.isLeftPanelVisible(false) }">
  97. <i class="fa fa-chevron-left"></i>
  98. </a>
  99. <div class="assist" data-bind="component: {
  100. name: 'assist-panel',
  101. params: {
  102. user: '${user.username}',
  103. sql: {
  104. navigationSettings: {
  105. openItem: false,
  106. showStats: true
  107. }
  108. },
  109. visibleAssistPanels: ['sql']
  110. }
  111. }"></div>
  112. </div>
  113. <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }"><div class="resize-bar">&nbsp;</div></div>
  114. % endif
  115. <div class="content-panel">
  116. <div class="content-panel-inner">
  117. <!-- ko if: $root.job() -->
  118. <div data-bind="template: { name: 'breadcrumbs${ SUFFIX }' }"></div>
  119. <!-- /ko -->
  120. <!-- ko if: interface() !== 'slas' && interface() !== 'oozie-info' -->
  121. <!-- ko if: !$root.job() -->
  122. <form class="form-inline">
  123. <input type="text" class="input-large" data-bind="clearable: jobs.textFilter, valueUpdate: 'afterkeydown'" placeholder="${_('Filter by id, name, user...')}" />
  124. <!-- ko if: jobs.statesValuesFilter -->
  125. <span data-bind="foreach: jobs.statesValuesFilter">
  126. <label class="checkbox">
  127. <div class="pull-left margin-left-5 status-border status-content" data-bind="css: value, hueCheckbox: checked"></div>
  128. <div class="inline-block" data-bind="text: name, toggle: checked"></div>
  129. </label>
  130. </span>
  131. <!-- /ko -->
  132. <!-- ko ifnot: $root.isMini -->
  133. ${_('in the last')} <input class="input-mini no-margin" type="number" min="1" max="3650" data-bind="value: jobs.timeValueFilter">
  134. <select class="input-small no-margin" data-bind="value: jobs.timeUnitFilter, options: jobs.timeUnitFilterUnits, optionsText: 'name', optionsValue: 'value'">
  135. <option value="days">${_('days')}</option>
  136. <option value="hours">${_('hours')}</option>
  137. <option value="minutes">${_('minutes')}</option>
  138. </select>
  139. <a class="btn" title="${ _('Refresh') }" data-bind="click: jobs.updateJobs">
  140. <i class="fa fa-refresh"></i>
  141. </a>
  142. <div data-bind="template: { name: 'job-actions${ SUFFIX }', 'data': jobs }" class="pull-right"></div>
  143. <!-- /ko -->
  144. </form>
  145. <div data-bind="visible: jobs.showJobCountBanner" class="pull-center alert alert-warning">${ _("Showing oldest %s jobs. Use days filter to get the recent ones.") % MAX_JOB_FETCH.get() }</div>
  146. <div class="card card-small">
  147. <!-- ko hueSpinner: { spin: jobs.loadingJobs(), center: true, size: 'xlarge' } --><!-- /ko -->
  148. <!-- ko ifnot: jobs.loadingJobs() -->
  149. <!-- ko if: $root.isMini -->
  150. <ul class="unstyled status-border-container" id="jobsTable" data-bind="foreach: jobs.apps">
  151. <li class="status-border pointer" data-bind="css: {'completed': apiStatus() == 'SUCCEEDED', 'running': isRunning(), 'failed': apiStatus() == 'FAILED'}, click: fetchJob">
  152. <span class="muted pull-left" data-bind="momentFromNow: {data: submitted, interval: 10000, titleFormat: 'LLL'}"></span><span class="muted">&nbsp;-&nbsp;</span><span class="muted" data-bind="text: status"></span></td>
  153. <span class="muted pull-right" data-bind="text: duration().toHHMMSS()"></span>
  154. <div class="clearfix"></div>
  155. <strong class="pull-left" data-bind="text: type"></strong>
  156. <div class="inline-block pull-right"><i class="fa fa-user muted"></i> <span data-bind="text: user"></span></div>
  157. <div class="clearfix"></div>
  158. <div class="pull-left" data-bind="ellipsis: {data: name(), length: 40 }"></div>
  159. <div class="pull-right muted" data-bind="text: id"></div>
  160. <div class="clearfix"></div>
  161. </li>
  162. <div class="status-bar status-background" data-bind="css: {'running': isRunning()}, style: {'width': progress() + '%'}"></div>
  163. </ul>
  164. <!-- /ko -->
  165. <!-- ko ifnot: $root.isMini -->
  166. <table id="jobsTable" class="datatables table table-condensed status-border-container">
  167. <thead>
  168. <tr>
  169. <th width="1%"><div class="select-all hueCheckbox fa" data-bind="hueCheckAll: { allValues: jobs.apps, selectedValues: jobs.selectedJobs }"></div></th>
  170. <th width="15%">${_('Id')}</th>
  171. <th width="20%">${_('Name')}</th>
  172. <th width="6%">${_('User')}</th>
  173. <th width="6%">${_('Type')}</th>
  174. <th width="5%">${_('Status')}</th>
  175. <th width="3%">${_('Progress')}</th>
  176. <th width="5%">${_('Group')}</th>
  177. <th width="10%">${_('Started')}</th>
  178. <th width="6%">${_('Duration')}</th>
  179. </tr>
  180. </thead>
  181. <tbody data-bind="foreach: jobs.apps">
  182. <tr class="status-border pointer" data-bind="css: {'completed': apiStatus() == 'SUCCEEDED', 'running': isRunning(), 'failed': apiStatus() == 'FAILED'}, click: fetchJob">
  183. <td>
  184. <div class="hueCheckbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#jobsTable', value: $data, hueChecked: $parent.jobs.selectedJobs"></div>
  185. </td>
  186. <td data-bind="text: id"></td>
  187. <td data-bind="text: name"></td>
  188. <td data-bind="text: user"></td>
  189. <td data-bind="text: type"></td>
  190. <td data-bind="text: status"></td>
  191. <td data-bind="text: $root.formatProgress(progress)"></td>
  192. <td data-bind="text: queue"></td>
  193. <td data-bind="moment: {data: submitted, format: 'LLL'}"></td>
  194. <td data-bind="text: duration().toHHMMSS()"></td>
  195. </tr>
  196. </tbody>
  197. </table>
  198. <!-- /ko -->
  199. <!-- /ko -->
  200. </div>
  201. <!-- /ko -->
  202. <!-- ko if: $root.job() -->
  203. <!-- ko with: $root.job() -->
  204. <!-- ko if: mainType() == 'jobs' -->
  205. <div class="jb-panel" data-bind="template: { name: 'job-page${ SUFFIX }' }"></div>
  206. <!-- /ko -->
  207. <!-- ko if: mainType() == 'workflows' -->
  208. <!-- ko if: type() == 'workflow' -->
  209. <div class="jb-panel" data-bind="template: { name: 'workflow-page${ SUFFIX }' }"></div>
  210. <!-- /ko -->
  211. <!-- ko if: type() == 'workflow-action' -->
  212. <div class="jb-panel" data-bind="template: { name: 'workflow-action-page${ SUFFIX }' }"></div>
  213. <!-- /ko -->
  214. <!-- /ko -->
  215. <!-- ko if: mainType() == 'schedules' -->
  216. <div class="jb-panel" data-bind="template: { name: 'schedule-page${ SUFFIX }' }"></div>
  217. <!-- /ko -->
  218. <!-- ko if: mainType() == 'bundles' -->
  219. <div class="jb-panel" data-bind="template: { name: 'bundle-page${ SUFFIX }' }"></div>
  220. <!-- /ko -->
  221. <!-- ko if: mainType().startsWith('dataeng-job') -->
  222. <div data-bind="template: { name: 'dataeng-job-page${ SUFFIX }' }"></div>
  223. <!-- /ko -->
  224. <!-- /ko -->
  225. <!-- /ko -->
  226. <div data-bind="template: { name: 'pagination${ SUFFIX }', data: $root.jobs }, visible: !$root.job() && !jobs.loadingJobs()"></div>
  227. <!-- /ko -->
  228. % if not is_mini:
  229. <!-- ko if: interface() === 'slas' -->
  230. <!-- ko hueSpinner: { spin: slasLoading(), center: true, size: 'xlarge' } --><!-- /ko -->
  231. <!-- /ko -->
  232. <div id="slas" data-bind="visible: interface() === 'slas'"></div>
  233. <!-- ko if: interface() === 'oozie-info' -->
  234. <!-- ko hueSpinner: { spin: oozieInfoLoading(), center: true, size: 'xlarge' } --><!-- /ko -->
  235. <!-- /ko -->
  236. <div id="oozieInfo" data-bind="visible: interface() === 'oozie-info'"></div>
  237. %endif
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. <!-- ko if: $root.job() -->
  245. <div id="rerun-modal${ SUFFIX }" class="modal hide" data-bind="html: $root.job().rerunModalContent"></div>
  246. <!-- /ko -->
  247. </div>
  248. <script type="text/html" id="breadcrumbs-icons${ SUFFIX }">
  249. <!-- ko switch: type -->
  250. <!-- ko case: 'workflow' -->
  251. <img src="${ static('oozie/art/icon_oozie_workflow_48.png') }" class="app-icon" alt="${ _('Oozie workflow icon') }"/>
  252. <!-- /ko -->
  253. <!-- ko case: 'workflow-action' -->
  254. <i class="fa fa-fw fa-code-fork"></i>
  255. <!-- /ko -->
  256. <!-- ko case: 'schedule' -->
  257. <img src="${ static('oozie/art/icon_oozie_coordinator_48.png') }" class="app-icon" alt="${ _('Oozie coordinator icon') }"/>
  258. <!-- /ko -->
  259. <!-- ko case: 'bundle' -->
  260. <img src="${ static('oozie/art/icon_oozie_bundle_48.png') }" class="app-icon" alt="${ _('Oozie bundle icon') }"/>
  261. <!-- /ko -->
  262. <!-- /ko -->
  263. </script>
  264. <script type="text/html" id="breadcrumbs${ SUFFIX }">
  265. <h3 class="jb-breadcrumbs">
  266. <ul class="inline hue-breadcrumbs-bar">
  267. <!-- ko foreach: breadcrumbs -->
  268. <li>
  269. <!-- ko if: $index() > 1 -->
  270. <span class="divider">&gt;</span>
  271. <!-- /ko -->
  272. <!-- ko if: $index() != 0 -->
  273. <!-- ko if: $index() != $parent.breadcrumbs().length - 1 -->
  274. <a href="javascript:void(0)" data-bind="click: function() { $parent.breadcrumbs.splice($index()); $root.job().id(id); $root.job().fetchJob(); }">
  275. <span data-bind="template: 'breadcrumbs-icons${ SUFFIX }'"></span>
  276. <span data-bind="text: name"></span></a>
  277. <!-- /ko -->
  278. <!-- ko if: $index() == $parent.breadcrumbs().length - 1 -->
  279. <span data-bind="template: 'breadcrumbs-icons${ SUFFIX }'"></span>
  280. <span data-bind="text: name, attr: { title: id }"></span>
  281. <!-- /ko -->
  282. <!-- /ko -->
  283. </li>
  284. <!-- /ko -->
  285. <!-- ko if: !$root.isMini() -->
  286. <!-- ko if: ['workflows', 'schedules', 'bundles', 'slas'].indexOf(interface()) > -1 -->
  287. <li class="pull-right">
  288. <a href="javascript:void(0)" data-bind="click: function() { $root.selectInterface('oozie-info') }">${ _('Configuration') }</a>
  289. </li>
  290. <!-- /ko -->
  291. <!-- /ko -->
  292. </ul>
  293. </h3>
  294. </script>
  295. <script type="text/html" id="pagination${ SUFFIX }">
  296. <!-- ko ifnot: hasPagination -->
  297. <div class="inline">
  298. <span data-bind="text: totalApps()"></span>
  299. ${ _('jobs') }
  300. </div>
  301. <!-- /ko -->
  302. <!-- ko if: hasPagination -->
  303. <div class="inline">
  304. <div class="inline">
  305. ${ _('Showing') }
  306. <span data-bind="text: Math.min(paginationOffset(), totalApps())"></span>
  307. ${ _('to')}
  308. <span data-bind="text: Math.min(paginationOffset() - 1 + paginationResultPage(), totalApps())"></span>
  309. ${ _('of') }
  310. <span data-bind="text: totalApps"></span>
  311. ##${ _('Show')}
  312. ##<span data-bind="text: paginationResultPage"></span>
  313. ##${ _('results by page.') }
  314. </div>
  315. <ul class="inline">
  316. <li class="previous-page" data-bind="visible: showPreviousPage">
  317. <a href="javascript:void(0);" data-bind="click: previousPage" title="${_('Previous page')}"><i class="fa fa-backward"></i></a>
  318. </li>
  319. <li class="next-page" data-bind="visible: showNextPage">
  320. <a href="javascript:void(0);" data-bind="click: nextPage" title="${_('Next page')}"><i class="fa fa-forward"></i></a>
  321. </li>
  322. </ul>
  323. </div>
  324. <!-- /ko -->
  325. </script>
  326. <script type="text/html" id="job-page${ SUFFIX }">
  327. <!-- ko if: type() == 'MAPREDUCE' -->
  328. <div data-bind="template: { name: 'job-mapreduce-page${ SUFFIX }', data: $root.job() }"></div>
  329. <!-- /ko -->
  330. <!-- ko if: type() == 'MAP' || type() == 'REDUCE' -->
  331. <div data-bind="template: { name: 'job-mapreduce-task-page${ SUFFIX }', data: $root.job() }"></div>
  332. <!-- /ko -->
  333. <!-- ko if: type() == 'MAP_ATTEMPT' || type() == 'REDUCE_ATTEMPT' -->
  334. <div data-bind="template: { name: 'job-mapreduce-task-attempt-page${ SUFFIX }', data: $root.job() }"></div>
  335. <!-- /ko -->
  336. <!-- ko if: type() == 'YARN' -->
  337. <div data-bind="template: { name: 'job-yarn-page${ SUFFIX }', data: $root.job() }"></div>
  338. <!-- /ko -->
  339. <!-- ko if: type() == 'IMPALA' -->
  340. <div data-bind="template: { name: 'job-impala-page${ SUFFIX }', data: $root.job() }"></div>
  341. <!-- /ko -->
  342. <!-- ko if: type() == 'SPARK' -->
  343. <div data-bind="template: { name: 'job-spark-page${ SUFFIX }', data: $root.job() }"></div>
  344. <!-- /ko -->
  345. </script>
  346. <script type="text/html" id="job-yarn-page${ SUFFIX }">
  347. <div class="row-fluid">
  348. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  349. <div class="sidebar-nav">
  350. <ul class="nav nav-list">
  351. <li class="nav-header">${ _('Id') }</li>
  352. <li><span data-bind="text: id"></span></li>
  353. <li class="nav-header">${ _('Name') }</li>
  354. <li><span data-bind="text: name"></span></li>
  355. <li class="nav-header">${ _('Type') }</li>
  356. <li><span data-bind="text: type"></span></li>
  357. <li class="nav-header">${ _('Status') }</li>
  358. <li><span data-bind="text: status"></span></li>
  359. <li class="nav-header">${ _('User') }</li>
  360. <li><span data-bind="text: user"></span></li>
  361. <li class="nav-header">${ _('Progress') }</li>
  362. <li><span data-bind="text: progress"></span>%</li>
  363. <li>
  364. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': apiStatus() !== 'FAILED' && progress() < 100, 'progress-success': apiStatus() !== 'FAILED' && progress() === 100, 'progress-danger': apiStatus() === 'FAILED'}">
  365. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  366. </div>
  367. </li>
  368. <li class="nav-header">${ _('Duration') }</li>
  369. <li><span data-bind="text: duration"></span></li>
  370. <li class="nav-header">${ _('Submitted') }</li>
  371. <li><span data-bind="text: submitted"></span></li>
  372. </ul>
  373. </div>
  374. </div>
  375. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  376. <div class="pull-right" data-bind="template: { name: 'job-actions${ SUFFIX }' }"></div>
  377. </div>
  378. </div>
  379. </script>
  380. <script type="text/html" id="job-mapreduce-page${ SUFFIX }">
  381. <div class="row-fluid">
  382. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  383. <div class="sidebar-nav">
  384. <ul class="nav nav-list">
  385. <li class="nav-header">${ _('Id') }</li>
  386. <li><span data-bind="text: id"></span></li>
  387. <li data-bind="visible: id() != name()" class="nav-header">${ _('Name') }</li>
  388. <li data-bind="visible: id() != name()"><span data-bind="text: name"></span></li>
  389. <li class="nav-header">${ _('Type') }</li>
  390. <li><span data-bind="text: type"></span></li>
  391. <li class="nav-header">${ _('Status') }</li>
  392. <li><span data-bind="text: status"></span></li>
  393. <li class="nav-header">${ _('User') }</li>
  394. <li><span data-bind="text: user"></span></li>
  395. <li class="nav-header">${ _('Progress') }</li>
  396. <li><span data-bind="text: progress"></span>%</li>
  397. <li>
  398. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': apiStatus() !== 'FAILED' && progress() < 100, 'progress-success': apiStatus() !== 'FAILED' && progress() === 100, 'progress-danger': apiStatus() === 'FAILED'}">
  399. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  400. </div>
  401. </li>
  402. <!-- ko with: properties -->
  403. <li class="nav-header">${ _('Map') }</li>
  404. <li><span data-bind="text: maps_percent_complete"></span>% <span data-bind="text: finishedMaps"></span> /<span data-bind="text: desiredMaps"></span></li>
  405. <li class="nav-header">${ _('Reduce') }</li>
  406. <li><span data-bind="text: reduces_percent_complete"></span>% <span data-bind="text: finishedReduces"></span> / <span data-bind="text: desiredReduces"></span></li>
  407. <li class="nav-header">${ _('Duration') }</li>
  408. <li><span data-bind="text: durationFormatted"></span></li>
  409. <li class="nav-header">${ _('Submitted') }</li>
  410. <li><span data-bind="text: startTimeFormatted"></span></li>
  411. <!-- /ko -->
  412. </ul>
  413. </div>
  414. </div>
  415. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  416. <ul class="nav nav-pills margin-top-20">
  417. <li class="active"><a class="jb-logs-link" href="#job-mapreduce-page-logs${ SUFFIX }" data-toggle="tab">${ _('Logs') }</a></li>
  418. <li><a href="#job-mapreduce-page-tasks${ SUFFIX }" data-bind="click: function(){ fetchProfile('tasks'); $('a[href=\'#job-mapreduce-page-tasks${ SUFFIX }\']').tab('show'); }">${ _('Tasks') }</a></li>
  419. <li><a href="#job-mapreduce-page-metadata${ SUFFIX }" data-bind="click: function(){ fetchProfile('metadata'); $('a[href=\'#job-mapreduce-page-metadata${ SUFFIX }\']').tab('show'); }">${ _('Metadata') }</a></li>
  420. <li><a href="#job-mapreduce-page-counters${ SUFFIX }" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-page-counters${ SUFFIX }\']').tab('show'); }">${ _('Counters') }</a></li>
  421. <li class="pull-right" data-bind="template: { name: 'job-actions${ SUFFIX }' }"></li>
  422. </ul>
  423. <div class="clearfix"></div>
  424. <div class="tab-content">
  425. <div class="tab-pane active" id="job-mapreduce-page-logs${ SUFFIX }">
  426. <ul class="nav nav-tabs">
  427. % for name in ['default', 'stdout', 'stderr', 'syslog']:
  428. <li class="${ name == 'default' and 'active' or '' }"><a href="javascript:void(0)" data-bind="click: function(data, e) { $(e.currentTarget).parent().siblings().removeClass('active'); $(e.currentTarget).parent().addClass('active'); fetchLogs('${ name }'); }, text: '${ name }'"></a></li>
  429. % endfor
  430. </ul>
  431. <pre data-bind="html: logs, logScroller: logs"></pre>
  432. </div>
  433. <div class="tab-pane" id="job-mapreduce-page-tasks${ SUFFIX }">
  434. <form class="form-inline">
  435. <input data-bind="textFilter: textFilter, clearable: {value: textFilter}" type="text" class="input-xlarge search-query" placeholder="${_('Filter by name')}">
  436. <span data-bind="foreach: statesValuesFilter">
  437. <label class="checkbox">
  438. <div class="pull-left margin-left-5 status-border status-content" data-bind="css: value, hueCheckbox: checked"></div>
  439. <div class="inline-block" data-bind="text: name, toggle: checked"></div>
  440. </label>
  441. </span>
  442. <span data-bind="foreach: typesValuesFilter" class="margin-left-30">
  443. <label class="checkbox">
  444. <div class="pull-left margin-left-5" data-bind="css: value, hueCheckbox: checked"></div>
  445. <div class="inline-block" data-bind="text: name, toggle: checked"></div>
  446. </label>
  447. </span>
  448. </form>
  449. <table class="table table-condensed">
  450. <thead>
  451. <tr>
  452. <th>${_('Type')}</th>
  453. <th>${_('Id')}</th>
  454. <th>${_('Elapsed Time')}</th>
  455. <th>${_('Progress')}</th>
  456. <th>${_('State')}</th>
  457. <th>${_('Start Time')}</th>
  458. <th>${_('Successful Attempt')}</th>
  459. <th>${_('Finish Time')}</th>
  460. </tr>
  461. </thead>
  462. <tbody data-bind="foreach: properties['tasks']()['task_list']">
  463. <tr data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }" class="pointer">
  464. <td data-bind="text: type"></td>
  465. <td data-bind="text: id"></td>
  466. <td data-bind="text: elapsedTime"></td>
  467. <td data-bind="text: progress"></td>
  468. <td data-bind="text: state"></td>
  469. <td data-bind="text: startTime"></td>
  470. <td data-bind="text: successfulAttempt"></td>
  471. <td data-bind="text: finishTime"></td>
  472. </tr>
  473. </tbody>
  474. </table>
  475. </div>
  476. <div class="tab-pane" id="job-mapreduce-page-metadata${ SUFFIX }">
  477. <div data-bind="template: { name: 'render-metadata${ SUFFIX }', data: properties['metadata'] }"></div>
  478. </div>
  479. <div class="tab-pane" id="job-mapreduce-page-counters${ SUFFIX }">
  480. <div data-bind="template: { name: 'render-page-counters${ SUFFIX }', data: properties['counters'] }"></div>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. </script>
  486. <script type="text/html" id="job-mapreduce-task-page${ SUFFIX }">
  487. <div class="row-fluid">
  488. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  489. <div class="sidebar-nav">
  490. <ul class="nav nav-list">
  491. <li class="nav-header">${ _('Id') }</li>
  492. <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
  493. <li class="nav-header">${ _('Type') }</li>
  494. <li><span data-bind="text: type"></span></li>
  495. <li class="nav-header">${ _('Progress') }</li>
  496. <li><span data-bind="text: progress"></span>%</li>
  497. <li>
  498. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': apiStatus() !== 'FAILED' && progress() < 100, 'progress-success': apiStatus() !== 'FAILED' && progress() === 100, 'progress-danger': apiStatus() === 'FAILED'}">
  499. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  500. </div>
  501. </li>
  502. <!-- ko with: properties -->
  503. <li class="nav-header">${ _('State') }</li>
  504. <li><span data-bind="text: state"></span></li>
  505. <li class="nav-header">${ _('Start time') }</li>
  506. <li><span data-bind="moment: {data: startTime, format: 'LLL'}"></span></li>
  507. <li class="nav-header">${ _('Successful attempt') }</li>
  508. <li><span data-bind="text: successfulAttempt"></span></li>
  509. <li class="nav-header">${ _('Finish time') }</li>
  510. <li><span data-bind="moment: {data: finishTime, format: 'LLL'}"></span></li>
  511. <li class="nav-header">${ _('Elapsed time') }</li>
  512. <li><span data-bind="text: elapsedTime().toHHMMSS()"></span></li>
  513. <!-- /ko -->
  514. </ul>
  515. </div>
  516. </div>
  517. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  518. <ul class="nav nav-pills margin-top-20">
  519. <li class="active"><a class="jb-logs-link" href="#job-mapreduce-task-page-logs${ SUFFIX }" data-toggle="tab">${ _('Logs') }</a></li>
  520. <li><a href="#job-mapreduce-task-page-attempts${ SUFFIX }" data-bind="click: function(){ fetchProfile('attempts'); $('a[href=\'#job-mapreduce-task-page-attempts${ SUFFIX }\']').tab('show'); }">${ _('Attempts') }</a></li>
  521. <li><a href="#job-mapreduce-task-page-counters${ SUFFIX }" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-page-counters${ SUFFIX }\']').tab('show'); }">${ _('Counters') }</a></li>
  522. </ul>
  523. <div class="tab-content">
  524. <div class="tab-pane active" id="job-mapreduce-task-page-logs${ SUFFIX }">
  525. <ul class="nav nav-tabs">
  526. % for name in ['stdout', 'stderr', 'syslog']:
  527. <li class="${ name == 'syslog' and 'active' or '' }"><a href="javascript:void(0)" data-bind="click: function(data, e) { $(e.currentTarget).parent().siblings().removeClass('active'); $(e.currentTarget).parent().addClass('active'); fetchLogs('${ name }'); }, text: '${ name }'"></a></li>
  528. % endfor
  529. </ul>
  530. <pre data-bind="html: logs, logScroller: logs"></pre>
  531. </div>
  532. <div class="tab-pane" id="job-mapreduce-task-page-attempts${ SUFFIX }">
  533. <table class="table table-condensed">
  534. <thead>
  535. <tr>
  536. <th>${_('Assigned Container Id')}</th>
  537. <th>${_('Progress')}</th>
  538. <th>${_('Elapsed Time')}</th>
  539. <th>${_('State')}</th>
  540. <th>${_('Rack')}</th>
  541. <th>${_('Node Http Address')}</th>
  542. <th>${_('Type')}</th>
  543. <th>${_('Start Time')}</th>
  544. <th>${_('Id')}</th>
  545. <th>${_('Finish Time')}</th>
  546. </tr>
  547. </thead>
  548. <tbody data-bind="foreach: properties['attempts']()['task_list']">
  549. <tr class="pointer" data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }">
  550. <td data-bind="text: assignedContainerId"></td>
  551. <td data-bind="text: progress"></td>
  552. <td data-bind="text: elapsedTime.toHHMMSS()"></td>
  553. <td data-bind="text: state"></td>
  554. <td data-bind="text: rack"></td>
  555. <td data-bind="text: nodeHttpAddress"></td>
  556. <td data-bind="text: type"></td>
  557. <td data-bind="moment: {data: startTime, format: 'LLL'}"></td>
  558. <td data-bind="text: id"></td>
  559. <td data-bind="moment: {data: finishTime, format: 'LLL'}"></td>
  560. </tr>
  561. </tbody>
  562. </table>
  563. </div>
  564. <div class="tab-pane" id="job-mapreduce-task-page-counters${ SUFFIX }">
  565. <div data-bind="template: { name: 'render-task-counters${ SUFFIX }', data: properties['counters'] }"></div>
  566. </div>
  567. </div>
  568. </div>
  569. </div>
  570. </script>
  571. <script type="text/html" id="job-mapreduce-task-attempt-page${ SUFFIX }">
  572. <div class="row-fluid">
  573. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  574. <div class="sidebar-nav">
  575. <ul class="nav nav-list">
  576. <li class="nav-header">${ _('Id') }</li>
  577. <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
  578. <li class="nav-header">${ _('Type') }</li>
  579. <li><span data-bind="text: type"></span></li>
  580. <li class="nav-header">${ _('Progress') }</li>
  581. <li><span data-bind="text: progress"></span>%</li>
  582. <li>
  583. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': apiStatus() !== 'FAILED' && progress() < 100, 'progress-success': apiStatus() !== 'FAILED' && progress() === 100, 'progress-danger': apiStatus() === 'FAILED'}">
  584. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  585. </div>
  586. </li>
  587. <!-- ko with: properties -->
  588. <li class="nav-header">${ _('State') }</li>
  589. <li><span data-bind="text: state"></span></li>
  590. <li class="nav-header">${ _('Assigned Container ID') }</li>
  591. <li><span data-bind="text: assignedContainerId"></span></li>
  592. <li class="nav-header">${ _('Rack') }</li>
  593. <li><span data-bind="text: rack"></span></li>
  594. <li class="nav-header">${ _('Node HTTP address') }</li>
  595. <li><span data-bind="text: nodeHttpAddress"></span></li>
  596. <li class="nav-header">${ _('Start time') }</li>
  597. <li><span data-bind="moment: {data: startTime, format: 'LLL'}"></span></li>
  598. <li class="nav-header">${ _('Finish time') }</li>
  599. <li><span data-bind="moment: {data: finishTime, format: 'LLL'}"></span></li>
  600. <li class="nav-header">${ _('Elapsed time') }</li>
  601. <li><span data-bind="text: elapsedTime().toHHMMSS()"></span></li>
  602. <!-- /ko -->
  603. </ul>
  604. </div>
  605. </div>
  606. <div data-bind="css: {'span10': !$root.isMini(), 'span12': $root.isMini() }">
  607. <ul class="nav nav-pills margin-top-20">
  608. <li class="active"><a class="jb-logs-link" href="#job-mapreduce-task-attempt-page-logs${ SUFFIX }" data-toggle="tab">${ _('Logs') }</a></li>
  609. <li><a href="#job-mapreduce-task-attempt-page-counters${ SUFFIX }" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-attempt-page-counters${ SUFFIX }\']').tab('show'); }">${ _('Counters') }</a></li>
  610. </ul>
  611. <div class="tab-content">
  612. <div class="tab-pane active" id="job-mapreduce-task-attempt-page-logs${ SUFFIX }">
  613. <ul class="nav nav-tabs">
  614. % for name in ['stdout', 'stderr', 'syslog']:
  615. <li class="${ name == 'syslog' and 'active' or '' }"><a href="javascript:void(0)" data-bind="click: function(data, e) { $(e.currentTarget).parent().siblings().removeClass('active'); $(e.currentTarget).parent().addClass('active'); fetchLogs('${ name }'); }, text: '${ name }'"></a></li>
  616. % endfor
  617. </ul>
  618. <pre data-bind="html: logs, logScroller: logs"></pre>
  619. </div>
  620. <div class="tab-pane" id="job-mapreduce-task-attempt-page-counters${ SUFFIX }">
  621. <div data-bind="template: { name: 'render-attempt-counters${ SUFFIX }', data: properties['counters'] }"></div>
  622. </div>
  623. </div>
  624. </div>
  625. </div>
  626. </script>
  627. <script type="text/html" id="job-impala-page${ SUFFIX }">
  628. <div class="row-fluid">
  629. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  630. <div class="sidebar-nav">
  631. <ul class="nav nav-list">
  632. <li class="nav-header">${ _('Id') }</li>
  633. <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
  634. <li class="nav-header">${ _('Name') }</li>
  635. <li><span data-bind="text: name"></span></li>
  636. <li class="nav-header">${ _('Type') }</li>
  637. <li><span data-bind="text: type"></span></li>
  638. <li class="nav-header">${ _('Status') }</li>
  639. <li><span data-bind="text: status"></span></li>
  640. <li class="nav-header">${ _('User') }</li>
  641. <li><span data-bind="text: user"></span></li>
  642. <li class="nav-header">${ _('Progress') }</li>
  643. <li><span data-bind="text: progress"></span>%</li>
  644. <li>
  645. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': apiStatus() !== 'FAILED' && progress() < 100, 'progress-success': apiStatus() !== 'FAILED' && progress() === 100, 'progress-danger': apiStatus() === 'FAILED'}">
  646. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  647. </div>
  648. </li>
  649. <li class="nav-header">${ _('Duration') }</li>
  650. <li><span data-bind="text: duration"></span></li>
  651. <li class="nav-header">${ _('Submitted') }</li>
  652. <li><span data-bind="text: submitted"></span></li>
  653. </ul>
  654. </div>
  655. </div>
  656. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  657. <div class="pull-right" data-bind="template: { name: 'job-actions${ SUFFIX }' }"></div>
  658. </div>
  659. </div>
  660. </script>
  661. <script type="text/html" id="job-spark-page${ SUFFIX }">
  662. <div class="row-fluid">
  663. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  664. <div class="sidebar-nav">
  665. <ul class="nav nav-list">
  666. <li class="nav-header">${ _('Id') }</li>
  667. <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
  668. <li class="nav-header">${ _('Name') }</li>
  669. <li><span data-bind="text: name"></span></li>
  670. <li class="nav-header">${ _('Type') }</li>
  671. <li><span data-bind="text: type"></span></li>
  672. <li class="nav-header">${ _('Status') }</li>
  673. <li><span data-bind="text: status"></span></li>
  674. <li class="nav-header">${ _('User') }</li>
  675. <li><span data-bind="text: user"></span></li>
  676. <li class="nav-header">${ _('Progress') }</li>
  677. <li><span data-bind="text: progress"></span>%</li>
  678. <li>
  679. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': apiStatus() !== 'FAILED' && progress() < 100, 'progress-success': apiStatus() !== 'FAILED' && progress() === 100, 'progress-danger': apiStatus() === 'FAILED'}">
  680. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  681. </div>
  682. </li>
  683. <li class="nav-header">${ _('Duration') }</li>
  684. <li><span data-bind="text: duration"></span></li>
  685. <li class="nav-header">${ _('Submitted') }</li>
  686. <li><span data-bind="text: submitted"></span></li>
  687. </ul>
  688. </div>
  689. </div>
  690. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  691. <ul class="nav nav-pills margin-top-20">
  692. <li class="active"><a href="#job-spark-page-properties${ SUFFIX }" data-toggle="tab">${ _('Properties') }</a></li>
  693. <li class="pull-right" data-bind="template: { name: 'job-actions${ SUFFIX }' }"></li>
  694. </ul>
  695. <div class="clearfix"></div>
  696. <div class="tab-content">
  697. <div class="tab-pane active" id="job-spark-page-properties${ SUFFIX }">
  698. <table class="datatables table table-condensed">
  699. <thead>
  700. <tr>
  701. <th>${_('Name')}</th>
  702. <th>${_('Value')}</th>
  703. </tr>
  704. </thead>
  705. <tbody data-bind="foreach: properties['metadata']">
  706. <tr>
  707. <td data-bind="text: name"></td>
  708. <td><!-- ko template: { name: 'link-or-text', data: { name: name(), value: value() } } --><!-- /ko --></td>
  709. </tr>
  710. </tbody>
  711. </table>
  712. </div>
  713. </div>
  714. </div>
  715. </div>
  716. </script>
  717. <script type="text/html" id="dataeng-job-page${ SUFFIX }">
  718. <!-- ko if: type() == 'dataeng-job-HIVE' -->
  719. <div data-bind="template: { name: 'dataeng-job-hive-page${ SUFFIX }', data: $root.job() }"></div>
  720. <!-- /ko -->
  721. </script>
  722. <script type="text/html" id="dataeng-job-hive-page${ SUFFIX }">
  723. ${ _('Id') } <span data-bind="text: id"></span>
  724. ${ _('Name') } <span data-bind="text: name"></span>
  725. ${ _('Type') } <span data-bind="text: type"></span>
  726. ${ _('Status') } <span data-bind="text: status"></span>
  727. ${ _('User') } <span data-bind="text: user"></span>
  728. ${ _('Progress') } <span data-bind="text: progress"></span>
  729. ${ _('Duration') } <span data-bind="text: duration"></span>
  730. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  731. <div data-bind="template: { name: 'render-properties${ SUFFIX }', data: properties['properties'] }"></div>
  732. </script>
  733. <script type="text/html" id="job-actions${ SUFFIX }">
  734. <div class="btn-group">
  735. <!-- ko if: hasResume -->
  736. <button class="btn" title="${ _('Resume selected') }" data-bind="click: function() { control('resume'); }, enable: resumeEnabled">
  737. <i class="fa fa-play"></i> <!-- ko ifnot: $root.isMini -->${ _('Resume') }<!-- /ko -->
  738. </button>
  739. <!-- /ko -->
  740. <!-- ko if: hasPause -->
  741. <button class="btn" title="${ _('Suspend selected') }" data-bind="click: function() { control('suspend'); }, enable: pauseEnabled">
  742. <i class="fa fa-pause"></i> <!-- ko ifnot: $root.isMini -->${ _('Suspend') }<!-- /ko -->
  743. </button>
  744. <!-- /ko -->
  745. <!-- ko if: hasRerun -->
  746. <button class="btn" title="${ _('Rerun selected') }" data-bind="click: function() { control('rerun'); }, enable: rerunEnabled">
  747. <i class="fa fa-repeat"></i> <!-- ko ifnot: $root.isMini -->${ _('Rerun') }<!-- /ko -->
  748. </button>
  749. <!-- /ko -->
  750. <!-- ko if: hasKill -->
  751. <button class="btn btn-danger" title="${_('Stop selected')}" data-bind="click: function() { control('kill'); }, enable: killEnabled">
  752. ## TODO confirmation
  753. <i class="fa fa-times"></i> <!-- ko ifnot: $root.isMini -->${_('Kill')}<!-- /ko -->
  754. </button>
  755. <!-- /ko -->
  756. <!-- ko if: hasIgnore -->
  757. <button class="btn btn-danger" title="${_('Ignore selected')}" data-bind="click: function() { control('ignore'); }, enable: ignoreEnabled">
  758. ## TODO confirmation
  759. <i class="fa fa-eraser"></i> <!-- ko ifnot: $root.isMini -->${_('Ignore')}<!-- /ko -->
  760. </button>
  761. <!-- /ko -->
  762. </div>
  763. </script>
  764. <script type="text/html" id="workflow-page${ SUFFIX }">
  765. <div class="row-fluid">
  766. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  767. <div class="sidebar-nav">
  768. <ul class="nav nav-list">
  769. <li class="nav-header">${ _('Id') }</li>
  770. <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
  771. <!-- ko if: doc_url -->
  772. <li class="nav-header">${ _('Document') }</li>
  773. <li>
  774. <a data-bind="hueLink: doc_url" href="javascript: void(0);" title="${ _('Open in editor') }">
  775. <span data-bind="text: name"></span>
  776. </a>
  777. </li>
  778. <!-- /ko -->
  779. <!-- ko ifnot: doc_url -->
  780. <li class="nav-header">${ _('Name') }</li>
  781. <li><span data-bind="text: name"></span></li>
  782. <!-- /ko -->
  783. <li class="nav-header">${ _('Status') }</li>
  784. <li><span data-bind="text: status"></span></li>
  785. <li class="nav-header">${ _('User') }</li>
  786. <li><span data-bind="text: user"></span></li>
  787. <li class="nav-header">${ _('Progress') }</li>
  788. <li><span data-bind="text: progress"></span>%</li>
  789. <li>
  790. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-danger': apiStatus() === 'FAILED', 'progress-warning': isRunning(), 'progress-success': apiStatus() === 'SUCCEEDED' }">
  791. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  792. </div>
  793. </li>
  794. <li class="nav-header">${ _('Duration') }</li>
  795. <li><span data-bind="text: duration"></span></li>
  796. <li class="nav-header">${ _('Submitted') }</li>
  797. <li><span data-bind="moment: {data: submitted, format: 'LLL'}"></span></li>
  798. <li class="nav-header">${ _('Variables') }</li>
  799. <li>
  800. <ul class="unstyled" data-bind="foreach: properties['parameters']">
  801. <li class="margin-top-5">
  802. <span data-bind="text: name, attr: { title: value }" class="muted"></span><br>
  803. &nbsp;
  804. <!-- ko if: link -->
  805. <a data-bind="hueLink: link, text: value, attr: { title: value }" href="javascript: void(0);">
  806. </a>
  807. <!-- /ko -->
  808. <!-- ko ifnot: link -->
  809. <span data-bind="text: value, attr: { title: value }"></span>
  810. <!-- /ko -->
  811. </li>
  812. </ul>
  813. </li>
  814. </ul>
  815. </div>
  816. </div>
  817. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  818. <ul class="nav nav-pills margin-top-20">
  819. %if not is_mini:
  820. <li class="active"><a href="#workflow-page-graph${ SUFFIX }" data-toggle="tab">${ _('Graph') }</a></li>
  821. %endif
  822. <li><a href="#workflow-page-metadata${ SUFFIX }" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#workflow-page-metadata${ SUFFIX }\']').tab('show'); }">${ _('Properties') }</a></li>
  823. <li><a class="jb-logs-link" href="#workflow-page-logs${ SUFFIX }" data-toggle="tab">${ _('Logs') }</a></li>
  824. <li><a href="#workflow-page-tasks${ SUFFIX }" data-toggle="tab">${ _('Tasks') }</a></li>
  825. <li><a href="#workflow-page-xml${ SUFFIX }" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#workflow-page-xml${ SUFFIX }\']').tab('show'); }">${ _('XML') }</a></li>
  826. <li class="pull-right" data-bind="template: { name: 'job-actions${ SUFFIX }' }"></li>
  827. </ul>
  828. <div class="clearfix"></div>
  829. <div class="tab-content">
  830. %if not is_mini:
  831. <div class="tab-pane active dashboard-container" id="workflow-page-graph${ SUFFIX }"></div>
  832. %endif
  833. <div class="tab-pane" id="workflow-page-logs${ SUFFIX }">
  834. <pre data-bind="html: logs, logScroller: logs"></pre>
  835. </div>
  836. <div class="tab-pane" id="workflow-page-tasks${ SUFFIX }">
  837. <table id="actionsTable" class="datatables table table-condensed">
  838. <thead>
  839. <tr>
  840. <th>${_('Log')}</th>
  841. <th>${_('Status')}</th>
  842. <th>${_('Error message')}</th>
  843. <th>${_('Error code')}</th>
  844. <th>${_('External id')}</th>
  845. <th>${_('Id')}</th>
  846. <th>${_('Start time')}</th>
  847. <th>${_('End time')}</th>
  848. </tr>
  849. </thead>
  850. <tbody data-bind="foreach: properties['actions']">
  851. <tr data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }" class="pointer">
  852. <td>
  853. <a data-bind="hueLink: '/jobbrowser/jobs/' + externalId(), clickBubble: false">
  854. <i class="fa fa-tasks"></i>
  855. </a>
  856. </td>
  857. <td data-bind="text: status"></td>
  858. <td data-bind="text: errorMessage"></td>
  859. <td data-bind="text: errorCode"></td>
  860. <td data-bind="text: externalId"></td>
  861. <td data-bind="text: id"></td>
  862. <td data-bind="text: startTime"></td>
  863. <td data-bind="text: endTime"></td>
  864. </tr>
  865. </tbody>
  866. </table>
  867. </div>
  868. <div class="tab-pane" id="workflow-page-metadata${ SUFFIX }">
  869. <div data-bind="template: { name: 'render-properties${ SUFFIX }', data: properties['properties'] }"></div>
  870. </div>
  871. <div class="tab-pane" id="workflow-page-xml${ SUFFIX }">
  872. <div data-bind="readonlyXML: properties['xml'], path: 'xml'"></div>
  873. </div>
  874. </div>
  875. </div>
  876. </div>
  877. </script>
  878. <script type="text/html" id="workflow-action-page${ SUFFIX }">
  879. <div class="row-fluid">
  880. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  881. <div class="sidebar-nav">
  882. <ul class="nav nav-list">
  883. <li class="nav-header">${ _('Id') }</li>
  884. <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
  885. <li class="nav-header">${ _('Name') }</li>
  886. <li><span data-bind="text: name"></span></li>
  887. <li class="nav-header">${ _('Type') }</li>
  888. <li><span data-bind="text: type"></span></li>
  889. <li class="nav-header">${ _('Job') }</li>
  890. <li>
  891. <a data-bind="hueLink: '/jobbrowser/jobs/' + properties['externalId']()" href="javascript: void(0);">
  892. <span data-bind="text: properties['externalId']"></span>
  893. </a>
  894. </li>
  895. <li class="nav-header">${ _('Status') }</li>
  896. <li><span data-bind="text: status"></span></li>
  897. </ul>
  898. </div>
  899. </div>
  900. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  901. <ul class="nav nav-pills margin-top-20">
  902. <li class="active"><a href="#workflow-action-page-metadata${ SUFFIX }" data-toggle="tab">${ _('Properties') }</a></li>
  903. <li><a href="#workflow-action-page-tasks${ SUFFIX }" data-toggle="tab">${ _('Child jobs') }</a></li>
  904. <li><a href="#workflow-action-page-xml${ SUFFIX }" data-toggle="tab">${ _('XML') }</a></li>
  905. </ul>
  906. <div class="tab-content">
  907. <div class="tab-pane" id="workflow-action-page-metadata${ SUFFIX }">
  908. <table class="datatables table table-condensed">
  909. <thead>
  910. <tr>
  911. <th>${_('Name')}</th>
  912. <th>${_('Value')}</th>
  913. </tr>
  914. </thead>
  915. <tbody data-bind="foreach: properties['properties']">
  916. <tr>
  917. <td data-bind="text: name"></td>
  918. <td data-bind="text: value"></td>
  919. </tr>
  920. </tbody>
  921. </table>
  922. </div>
  923. <div class="tab-pane" id="workflow-action-page-tasks${ SUFFIX }">
  924. <table class="table table-condensed datatables">
  925. <thead>
  926. <tr>
  927. <th>${ _('Ids') }</th>
  928. </tr>
  929. </thead>
  930. <tbody data-bind="foreach: properties['externalChildIDs']">
  931. <tr>
  932. <td>
  933. <a data-bind="hueLink: '/jobbrowser/jobs/' + $data, text: $data" href="javascript: void(0);">
  934. </a>
  935. </td>
  936. </tr>
  937. </tbody>
  938. </table>
  939. </div>
  940. <div class="tab-pane" id="workflow-action-page-xml${ SUFFIX }">
  941. <div data-bind="readonlyXML: properties['conf']"></div>
  942. </div>
  943. </div>
  944. </div>
  945. </div>
  946. </script>
  947. <script type="text/html" id="schedule-page${ SUFFIX }">
  948. <div class="row-fluid">
  949. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  950. <div class="sidebar-nav">
  951. <ul class="nav nav-list">
  952. <li class="nav-header">${ _('Id') }</li>
  953. <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
  954. <!-- ko if: doc_url -->
  955. <li class="nav-header">${ _('Document') }</li>
  956. <li>
  957. <a data-bind="hueLink: doc_url" href="javascript: void(0);" title="${ _('Open in editor') }">
  958. <span data-bind="text: name"></span>
  959. </a>
  960. </li>
  961. <!-- /ko -->
  962. <!-- ko ifnot: doc_url -->
  963. <li class="nav-header">${ _('Name') }</li>
  964. <li><span data-bind="text: name"></span></li>
  965. <!-- /ko -->
  966. <li class="nav-header">${ _('Type') }</li>
  967. <li><span data-bind="text: type"></span></li>
  968. <li class="nav-header">${ _('Status') }</li>
  969. <li><span data-bind="text: status"></span></li>
  970. <li class="nav-header">${ _('User') }</li>
  971. <li><span data-bind="text: user"></span></li>
  972. <li class="nav-header">${ _('Progress') }</li>
  973. <li><span data-bind="text: progress"></span>%</li>
  974. <li>
  975. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': apiStatus() !== 'FAILED' && progress() < 100, 'progress-success': apiStatus() !== 'FAILED' && progress() === 100, 'progress-danger': apiStatus() === 'FAILED'}">
  976. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  977. </div>
  978. </li>
  979. <li class="nav-header">${ _('Submitted') }</li>
  980. <li><span data-bind="text: submitted"></span></li>
  981. <li class="nav-header">${ _('Next Run') }</li>
  982. <li><span data-bind="text: properties['nextTime']"></span></li>
  983. <li class="nav-header">${ _('Total Actions') }</li>
  984. <li><span data-bind="text: properties['total_actions']"></span></li>
  985. <li class="nav-header">${ _('End time') }</li>
  986. <li><span data-bind="text: properties['endTime']"></span></li>
  987. </ul>
  988. </div>
  989. </div>
  990. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  991. <ul class="nav nav-pills margin-top-20">
  992. <li class="active"><a href="#schedule-page-task${ SUFFIX }" data-toggle="tab">${ _('Tasks') }</a></li>
  993. <li><a class="jb-logs-link" href="#schedule-page-logs${ SUFFIX }" data-toggle="tab">${ _('Logs') }</a></li>
  994. <li><a href="#schedule-page-metadata${ SUFFIX }" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#schedule-page-metadata${ SUFFIX }\']').tab('show'); }">${ _('Properties') }</a></li>
  995. <li><a href="#schedule-page-xml${ SUFFIX }" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#schedule-page-xml${ SUFFIX }\']').tab('show'); }">${ _('XML') }</a></li>
  996. <li class="pull-right" data-bind="template: { name: 'job-actions${ SUFFIX }' }"></li>
  997. </ul>
  998. <div class="clearfix"></div>
  999. <div class="tab-content">
  1000. <div class="tab-pane active" id="schedule-page-calendar${ SUFFIX }">
  1001. <!-- ko with: coordinatorActions() -->
  1002. <form class="form-inline">
  1003. ##<input data-bind="value: textFilter" type="text" class="input-xlarge search-query" placeholder="${_('Filter by name')}">
  1004. ##<span data-bind="foreach: statesValuesFilter">
  1005. ## <label class="checkbox">
  1006. ## <div class="pull-left margin-left-5 status-border status-content" data-bind="css: value, hueCheckbox: checked"></div>
  1007. ## <div class="inline-block" data-bind="text: name, toggle: checked"></div>
  1008. ## </label>
  1009. ##</span>
  1010. <div data-bind="template: { name: 'job-actions${ SUFFIX }' }" class="pull-right"></div>
  1011. </form>
  1012. <table id="schedulesTable" class="datatables table table-condensed status-border-container">
  1013. <thead>
  1014. <tr>
  1015. <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
  1016. <th>${_('Status')}</th>
  1017. <th>${_('Title')}</th>
  1018. <th>${_('type')}</th>
  1019. <th>${_('errorMessage')}</th>
  1020. <th>${_('missingDependencies')}</th>
  1021. <th>${_('number')}</th>
  1022. <th>${_('errorCode')}</th>
  1023. <th>${_('externalId')}</th>
  1024. <th>${_('id')}</th>
  1025. <th>${_('lastModifiedTime')}</th>
  1026. </tr>
  1027. </thead>
  1028. <tbody data-bind="foreach: apps">
  1029. <tr class="status-border pointer" data-bind="css: {'completed': properties.status() == 'SUCCEEDED', 'running': ['SUCCEEDED', 'FAILED', 'KILLED'].indexOf(properties.status()) != -1, 'failed': properties.status() == 'FAILED' || properties.status() == 'KILLED'}, click: function() { if (properties.externalId() && properties.externalId() != '-') { $root.job().id(properties.externalId()); $root.job().fetchJob();} }">
  1030. <td>
  1031. <div class="hueCheckbox fa" data-bind="click: function() {}, clickBubble: false, multiCheck: '#schedulesTable', value: $data, hueChecked: $parent.selectedJobs"></div>
  1032. </td>
  1033. <td data-bind="text: properties.status"></td>
  1034. <td data-bind="text: properties.title"></td>
  1035. <td data-bind="text: properties.type"></td>
  1036. <td data-bind="text: properties.errorMessage"></td>
  1037. <td data-bind="text: properties.missingDependencies"></td>
  1038. <td data-bind="text: properties.number"></td>
  1039. <td data-bind="text: properties.errorCode"></td>
  1040. <td data-bind="text: properties.externalId"></td>
  1041. <td data-bind="text: properties.id"></td>
  1042. <td data-bind="text: properties.lastModifiedTime"></td>
  1043. </tr>
  1044. </tbody>
  1045. </table>
  1046. <!-- /ko -->
  1047. </div>
  1048. <div class="tab-pane" id="schedule-page-logs${ SUFFIX }">
  1049. <pre data-bind="html: logs, logScroller: logs"></pre>
  1050. </div>
  1051. <div class="tab-pane" id="schedule-page-metadata${ SUFFIX }">
  1052. <div data-bind="template: { name: 'render-properties${ SUFFIX }', data: properties['properties'] }"></div>
  1053. </div>
  1054. <div class="tab-pane" id="schedule-page-xml${ SUFFIX }">
  1055. <div data-bind="readonlyXML: properties['xml'], path: 'xml'"></div>
  1056. </div>
  1057. </div>
  1058. </div>
  1059. </div>
  1060. </script>
  1061. <script type="text/html" id="bundle-page${ SUFFIX }">
  1062. <div class="row-fluid">
  1063. <div data-bind="css:{'span2': !$root.isMini(), 'span12': $root.isMini() }">
  1064. <div class="sidebar-nav">
  1065. <ul class="nav nav-list">
  1066. <li class="nav-header">${ _('Id') }</li>
  1067. <li><span data-bind="text: id, attr: { 'title': id }"></span></li>
  1068. <!-- ko if: doc_url -->
  1069. <li class="nav-header">${ _('Document') }</li>
  1070. <li>
  1071. <a data-bind="hueLink: doc_url" href="javascript: void(0);" title="${ _('Open in editor') }">
  1072. <span data-bind="text: name"></span>
  1073. </a>
  1074. </li>
  1075. <!-- /ko -->
  1076. <!-- ko ifnot: doc_url -->
  1077. <li class="nav-header">${ _('Name') }</li>
  1078. <li><span data-bind="text: name"></span></li>
  1079. <!-- /ko -->
  1080. <li class="nav-header">${ _('Type') }</li>
  1081. <li><span data-bind="text: type"></span></li>
  1082. <li class="nav-header">${ _('Status') }</li>
  1083. <li><span data-bind="text: status"></span></li>
  1084. <li class="nav-header">${ _('User') }</li>
  1085. <li><span data-bind="text: user"></span></li>
  1086. <li class="nav-header">${ _('Progress') }</li>
  1087. <li><span data-bind="text: progress"></span>%</li>
  1088. <li>
  1089. <div class="progress-job progress" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-danger': apiStatus() === 'FAILED', 'progress-warning': apiStatus() !== 'FAILED' && progress() < 100, 'progress-success': apiStatus() !== 'FAILED' && progress() === 100}">
  1090. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  1091. </div>
  1092. </li>
  1093. ##<li class="nav-header">${ _('Duration') }</li>
  1094. ##<li><span data-bind="text: duration"></span></li>
  1095. <li class="nav-header">${ _('Submitted') }</li>
  1096. <li><span data-bind="text: submitted"></span></li>
  1097. ##<li class="nav-header">${ _('Next Run') }</li>
  1098. ##<li><span data-bind="text: properties['nextTime']"></span></li>
  1099. ##<li class="nav-header">${ _('Total Actions') }</li>
  1100. ##<li><span data-bind="text: properties['total_actions']"></span></li>
  1101. ##<li class="nav-header">${ _('End time') }</li>
  1102. ##<li><span data-bind="text: properties['endTime']"></span></li>
  1103. </ul>
  1104. </div>
  1105. </div>
  1106. <div data-bind="css:{'span10': !$root.isMini(), 'span12 no-margin': $root.isMini() }">
  1107. <ul class="nav nav-pills margin-top-20">
  1108. <li class="active"><a href="#bundle-page-coordinators${ SUFFIX }" data-toggle="tab">${ _('Tasks') }</a></li>
  1109. <li><a class="jb-logs-link" href="#bundle-page-logs${ SUFFIX }" data-toggle="tab">${ _('Logs') }</a></li>
  1110. <li><a href="#bundle-page-metadata${ SUFFIX }" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#bundle-page-metadata${ SUFFIX }\']').tab('show'); }">${ _('Properties') }</a></li>
  1111. <li><a href="#bundle-page-xml${ SUFFIX }" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#bundle-page-xml${ SUFFIX }\']').tab('show'); }">${ _('XML') }</a></li>
  1112. <li class="pull-right" data-bind="template: { name: 'job-actions${ SUFFIX }' }"></li>
  1113. </ul>
  1114. <div class="clearfix"></div>
  1115. <div class="tab-content">
  1116. <div class="tab-pane active" id="bundle-page-coordinators${ SUFFIX }">
  1117. <table id="coordsTable" class="datatables table table-condensed status-border-container">
  1118. <thead>
  1119. <tr>
  1120. <th>${_('Status')}</th>
  1121. <th>${_('Name')}</th>
  1122. <th>${_('Type')}</th>
  1123. <th>${_('nextMaterializedTime')}</th>
  1124. <th>${_('lastAction')}</th>
  1125. <th>${_('frequency')}</th>
  1126. <th>${_('timeUnit')}</th>
  1127. <th>${_('externalId')}</th>
  1128. <th>${_('id')}</th>
  1129. <th>${_('pauseTime')}</th>
  1130. </tr>
  1131. </thead>
  1132. <tbody data-bind="foreach: properties['actions']">
  1133. <tr class="status-border pointer" data-bind="css: {'completed': status() == 'SUCCEEDED', 'running': ['SUCCEEDED', 'FAILED', 'KILLED'].indexOf(status()) != -1, 'failed': status() == 'FAILED' || status() == 'KILLED'}, click: function() { if (id()) { $root.job().id(id()); $root.job().fetchJob();} }">
  1134. <td data-bind="text: status"></td>
  1135. <td data-bind="text: name"></td>
  1136. <td data-bind="text: type"></td>
  1137. <td data-bind="text: nextMaterializedTime"></td>
  1138. <td data-bind="text: lastAction"></td>
  1139. <td data-bind="text: frequency"></td>
  1140. <td data-bind="text: timeUnit"></td>
  1141. <td data-bind="text: externalId"></td>
  1142. <td data-bind="text: id"></td>
  1143. <td data-bind="text: pauseTime"></td>
  1144. </tr>
  1145. </tbody>
  1146. </table>
  1147. </div>
  1148. <div class="tab-pane" id="bundle-page-logs${ SUFFIX }">
  1149. <pre data-bind="html: logs, logScroller: logs"></pre>
  1150. </div>
  1151. <div class="tab-pane" id="bundle-page-metadata${ SUFFIX }">
  1152. <div data-bind="template: { name: 'render-properties${ SUFFIX }', data: properties['properties'] }"></div>
  1153. </div>
  1154. <div class="tab-pane" id="bundle-page-xml${ SUFFIX }">
  1155. <div data-bind="readonlyXML: properties['xml'], path: 'xml'"></div>
  1156. </div>
  1157. </div>
  1158. </div>
  1159. </div>
  1160. </script>
  1161. <script type="text/html" id="render-properties${ SUFFIX }">
  1162. <!-- ko hueSpinner: { spin: !$data.properties, center: true, size: 'xlarge' } --><!-- /ko -->
  1163. <!-- ko if: $data.properties -->
  1164. <table class="table table-condensed">
  1165. <thead>
  1166. <tr>
  1167. <th>${ _('Name') }</th>
  1168. <th>${ _('Value') }</th>
  1169. </tr>
  1170. </thead>
  1171. <tbody data-bind="foreach: Object.keys($data.properties)">
  1172. <tr>
  1173. <td data-bind="text: $data"></td>
  1174. <td>
  1175. <!-- ko template: { name: 'link-or-text${ SUFFIX }', data: { name: $data, value: $parent.properties[$data] } } --><!-- /ko -->
  1176. </td>
  1177. </tr>
  1178. </tbody>
  1179. </table>
  1180. <!-- /ko -->
  1181. </script>
  1182. <script type="text/html" id="render-page-counters${ SUFFIX }">
  1183. <!-- ko hueSpinner: { spin: !$data.id, center: true, size: 'xlarge' } --><!-- /ko -->
  1184. <!-- ko if: $data.id -->
  1185. <!-- ko ifnot: $data.counterGroup -->
  1186. <span class="muted">${ _('There are currently no counters to be displayed.') }</span>
  1187. <!-- /ko -->
  1188. <!-- ko if: $data.counterGroup -->
  1189. <!-- ko foreach: $data.counterGroup -->
  1190. <h3 data-bind="text: counterGroupName"></h3>
  1191. <table class="table table-condensed">
  1192. <thead>
  1193. <tr>
  1194. <th>${ _('Name') }</th>
  1195. <th width="15%">${ _('Maps total') }</th>
  1196. <th width="15%">${ _('Reduces total') }</th>
  1197. <th width="15%">${ _('Total') }</th>
  1198. </tr>
  1199. </thead>
  1200. <tbody data-bind="foreach: counter">
  1201. <tr>
  1202. <td data-bind="text: name"></td>
  1203. <td data-bind="text: mapCounterValue"></td>
  1204. <td data-bind="text: reduceCounterValue"></td>
  1205. <td data-bind="text: totalCounterValue"></td>
  1206. </tr>
  1207. </tbody>
  1208. </table>
  1209. <!-- /ko -->
  1210. <!-- /ko -->
  1211. <!-- /ko -->
  1212. </script>
  1213. <script type="text/html" id="render-task-counters${ SUFFIX }">
  1214. <!-- ko hueSpinner: { spin: !$data.id, center: true, size: 'xlarge' } --><!-- /ko -->
  1215. <!-- ko if: $data.id -->
  1216. <!-- ko ifnot: $data.taskCounterGroup -->
  1217. <span class="muted">${ _('There are currently no counters to be displayed.') }</span>
  1218. <!-- /ko -->
  1219. <!-- ko if: $data.taskCounterGroup -->
  1220. <!-- ko foreach: $data.taskCounterGroup -->
  1221. <h3 data-bind="text: counterGroupName"></h3>
  1222. <table class="table table-condensed">
  1223. <thead>
  1224. <tr>
  1225. <th>${ _('Name') }</th>
  1226. <th width="30%">${ _('Value') }</th>
  1227. </tr>
  1228. </thead>
  1229. <tbody data-bind="foreach: counter">
  1230. <tr>
  1231. <td data-bind="text: name"></td>
  1232. <td data-bind="text: value"></td>
  1233. </tr>
  1234. </tbody>
  1235. </table>
  1236. <!-- /ko -->
  1237. <!-- /ko -->
  1238. <!-- /ko -->
  1239. </script>
  1240. <script type="text/html" id="render-attempt-counters${ SUFFIX }">
  1241. <!-- ko hueSpinner: { spin: !$data.id, center: true, size: 'xlarge' } --><!-- /ko -->
  1242. <!-- ko if: $data.id -->
  1243. <!-- ko ifnot: $data.taskAttemptCounterGroup -->
  1244. <span class="muted">${ _('There are currently no counters to be displayed.') }</span>
  1245. <!-- /ko -->
  1246. <!-- ko if: $data.taskAttemptCounterGroup -->
  1247. <!-- ko foreach: $data.taskAttemptCounterGroup -->
  1248. <h3 data-bind="text: counterGroupName"></h3>
  1249. <table class="table table-condensed">
  1250. <thead>
  1251. <tr>
  1252. <th>${ _('Name') }</th>
  1253. <th width="30%">${ _('Value') }</th>
  1254. </tr>
  1255. </thead>
  1256. <tbody data-bind="foreach: counter">
  1257. <tr>
  1258. <td data-bind="text: name"></td>
  1259. <td data-bind="text: value"></td>
  1260. </tr>
  1261. </tbody>
  1262. </table>
  1263. <!-- /ko -->
  1264. <!-- /ko -->
  1265. <!-- /ko -->
  1266. </script>
  1267. <script type="text/html" id="render-metadata${ SUFFIX }">
  1268. <!-- ko hueSpinner: { spin: !$data.property, center: true, size: 'xlarge' } --><!-- /ko -->
  1269. <!-- ko if: $data.property -->
  1270. <table class="table table-condensed">
  1271. <thead>
  1272. <tr>
  1273. <th>${ _('Name') }</th>
  1274. <th width="50%">${ _('Value') }</th>
  1275. </tr>
  1276. </thead>
  1277. <tbody data-bind="foreach: property">
  1278. <tr>
  1279. <td data-bind="text: name"></td>
  1280. <td>
  1281. <!-- ko template: { name: 'link-or-text${ SUFFIX }', data: { name: name, value: value } } --><!-- /ko -->
  1282. </td>
  1283. </tr>
  1284. </tbody>
  1285. </table>
  1286. <!-- /ko -->
  1287. </script>
  1288. <script type="text/html" id="link-or-text${ SUFFIX }">
  1289. <!-- ko if: typeof $data.value === 'string' -->
  1290. <!-- ko if: $data.name.indexOf('dir') > -1 || $data.name.indexOf('path') > -1 || $data.name.indexOf('output') > -1 || $data.name.indexOf('input') > -1 || $data.value.startsWith('/') || $data.value.startsWith('hdfs://') -->
  1291. <a href="javascript:void(0)" data-bind="hueLink: '/filebrowser/view=' + $root.getHDFSPath($data.value) , text: $data.value"></a>
  1292. <!-- /ko -->
  1293. <!-- ko ifnot: $data.name.indexOf('dir') > -1 || $data.name.indexOf('path') > -1 || $data.name.indexOf('output') > -1 || $data.name.indexOf('input') > -1 || $data.value.startsWith('/') || $data.value.startsWith('hdfs://') -->
  1294. <span data-bind="text: $data.value"></span>
  1295. <!-- /ko -->
  1296. <!-- /ko -->
  1297. <!-- ko ifnot: typeof $data.value === 'string' -->
  1298. <span data-bind="text: $data.value"></span>
  1299. <!-- /ko -->
  1300. </script>
  1301. <script type="text/javascript">
  1302. (function () {
  1303. var Job = function (vm, job) {
  1304. var self = this;
  1305. self.id = ko.observableDefault(job.id);
  1306. %if not is_mini:
  1307. self.id.subscribe(function () {
  1308. huePubSub.publish('graph.stop.refresh.view');
  1309. });
  1310. %endif
  1311. self.doc_url = ko.observableDefault(job.doc_url);
  1312. self.name = ko.observableDefault(job.name || job.id);
  1313. self.type = ko.observableDefault(job.type);
  1314. self.status = ko.observableDefault(job.status);
  1315. self.apiStatus = ko.observableDefault(job.apiStatus);
  1316. self.progress = ko.observableDefault(job.progress);
  1317. self.isRunning = ko.computed(function() {
  1318. return self.apiStatus() == 'RUNNING' || self.apiStatus() == 'PAUSED';
  1319. });
  1320. self.user = ko.observableDefault(job.user);
  1321. self.queue = ko.observableDefault(job.queue);
  1322. self.cluster = ko.observableDefault(job.cluster);
  1323. self.duration = ko.observableDefault(job.duration);
  1324. self.submitted = ko.observableDefault(job.submitted);
  1325. self.logs = ko.observable('');
  1326. self.properties = ko.mapping.fromJS(job.properties || {});
  1327. self.mainType = ko.observable(vm.interface());
  1328. self.coordinatorActions = ko.pureComputed(function() {
  1329. if (self.mainType() == 'schedules' && self.properties['tasks']) {
  1330. var apps = [];
  1331. self.properties['tasks']().forEach(function (instance) {
  1332. var job = new Job(vm, ko.mapping.toJS(instance));
  1333. job.resumeEnabled = function() { return false };
  1334. job.properties = instance;
  1335. apps.push(job);
  1336. });
  1337. var instances = new Jobs(vm);
  1338. instances.apps(apps)
  1339. instances.isCoordinator(true);
  1340. return instances;
  1341. }
  1342. });
  1343. self.textFilter = ko.observable('').extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 1000 } });
  1344. self.statesValuesFilter = ko.observableArray([
  1345. ko.mapping.fromJS({'value': 'completed', 'name': '${_("Succeeded")}', 'checked': false, 'klass': 'green'}),
  1346. ko.mapping.fromJS({'value': 'running', 'name': '${_("Running")}', 'checked': false, 'klass': 'orange'}),
  1347. ko.mapping.fromJS({'value': 'failed', 'name': '${_("Failed")}', 'checked': false, 'klass': 'red'}),
  1348. ]);
  1349. self.statesFilter = ko.computed(function () {
  1350. var checkedStates = ko.utils.arrayFilter(self.statesValuesFilter(), function (state) {
  1351. return state.checked();
  1352. });
  1353. return ko.utils.arrayMap(checkedStates, function(state){
  1354. return state.value()
  1355. });
  1356. });
  1357. self.typesValuesFilter = ko.observableArray([
  1358. ko.mapping.fromJS({'value': 'map', 'name': '${_("Map")}', 'checked': false, 'klass': 'green'}),
  1359. ko.mapping.fromJS({'value': 'reduce', 'name': '${_("Reduce")}', 'checked': false, 'klass': 'orange'}),
  1360. ]);
  1361. self.typesFilter = ko.computed(function () {
  1362. var checkedTypes = ko.utils.arrayFilter(self.typesValuesFilter(), function (type) {
  1363. return type.checked();
  1364. });
  1365. return ko.utils.arrayMap(checkedTypes, function(type){
  1366. return type.value()
  1367. });
  1368. });
  1369. self.filters = ko.pureComputed(function() {
  1370. return [
  1371. {'text': self.textFilter()},
  1372. {'states': ko.mapping.toJS(self.statesFilter())},
  1373. {'types': ko.mapping.toJS(self.typesFilter())},
  1374. ];
  1375. });
  1376. self.filters.subscribe(function(value) {
  1377. self.fetchProfile('tasks');
  1378. });
  1379. self.rerunModalContent = ko.observable('');
  1380. self.hasKill = ko.pureComputed(function() {
  1381. return ['MAPREDUCE', 'SPARK', 'workflow', 'schedule', 'bundle'].indexOf(self.type()) != -1;
  1382. });
  1383. self.killEnabled = ko.pureComputed(function() {
  1384. return self.hasKill() && (self.apiStatus() == 'RUNNING' || self.apiStatus() == 'PAUSED');
  1385. });
  1386. self.hasResume = ko.pureComputed(function() {
  1387. return ['workflow', 'schedule', 'bundle'].indexOf(self.type()) != -1;
  1388. });
  1389. self.resumeEnabled = ko.pureComputed(function() {
  1390. return self.hasResume() && self.apiStatus() == 'PAUSED';
  1391. });
  1392. self.hasRerun = ko.pureComputed(function() {
  1393. return ['workflow', 'schedule-task'].indexOf(self.type()) != -1;
  1394. });
  1395. self.rerunEnabled = ko.pureComputed(function() {
  1396. return self.hasRerun() && ! self.isRunning();
  1397. });
  1398. self.hasPause = ko.pureComputed(function() {
  1399. return ['workflow', 'schedule', 'bundle'].indexOf(self.type()) != -1;
  1400. });
  1401. self.pauseEnabled = ko.pureComputed(function() {
  1402. return self.hasPause() && self.apiStatus() == 'RUNNING';
  1403. });
  1404. self.hasIgnore = ko.pureComputed(function() {
  1405. return ['schedule-task'].indexOf(self.type()) != -1;
  1406. });
  1407. self.ignoreEnabled = ko.pureComputed(function() {
  1408. return self.hasIgnore() && ! self.isRunning();
  1409. });
  1410. self.loadingJob = ko.observable(false);
  1411. var lastFetchJobRequest = null;
  1412. var lastUpdateJobRequest = null;
  1413. self._fetchJob = function (callback) {
  1414. return $.post("/jobbrowser/api/job", {
  1415. app_id: ko.mapping.toJSON(self.id),
  1416. interface: ko.mapping.toJSON(vm.interface)
  1417. }, function (data) {
  1418. if (data.status == 0) {
  1419. if (callback) {
  1420. callback(data);
  1421. };
  1422. } else {
  1423. $(document).trigger("error", data.message);
  1424. }
  1425. });
  1426. };
  1427. self.fetchJob = function () {
  1428. vm.apiHelper.cancelActiveRequest(lastFetchJobRequest);
  1429. vm.apiHelper.cancelActiveRequest(lastUpdateJobRequest);
  1430. self.loadingJob(true);
  1431. var interface = vm.interface();
  1432. if (/application_/.test(self.id()) || /job_/.test(self.id())) {
  1433. interface = 'jobs';
  1434. }
  1435. if (/oozie-oozi-W/.test(self.id())) {
  1436. interface = 'workflows';
  1437. }
  1438. else if (/oozie-oozi-C/.test(self.id())) {
  1439. interface = 'schedules';
  1440. }
  1441. else if (/oozie-oozi-B/.test(self.id())) {
  1442. interface = 'bundles';
  1443. }
  1444. else if (/[a-z0-9]{8}\-[a-z0-9]{4}\-[a-z0-9]{4}\-[a-z0-9]{4}\-[a-z0-9]{12}/.test(self.id())) {
  1445. interface = 'dataeng-jobs';
  1446. }
  1447. interface = vm.isValidInterface(interface);
  1448. vm.interface(interface);
  1449. lastFetchJobRequest = self._fetchJob(function (data) {
  1450. if (data.status == 0) {
  1451. vm.interface(interface);
  1452. vm.job(new Job(vm, data.app));
  1453. hueUtils.changeURL('#!id=' + vm.job().id());
  1454. var crumbs = [];
  1455. if (/^attempt_/.test(vm.job().id())) {
  1456. crumbs.push({'id': vm.job().properties['app_id'], 'name': vm.job().properties['app_id'], 'type': 'app'});
  1457. crumbs.push({'id': vm.job().properties['task_id'], 'name': vm.job().properties['task_id'], 'type': 'task'});
  1458. }
  1459. if (/^task_/.test(vm.job().id())) {
  1460. crumbs.push({'id': vm.job().properties['app_id'], 'name': vm.job().properties['app_id'], 'type': 'app'});
  1461. }
  1462. if (/-oozie-oozi-W@/.test(vm.job().id())) {
  1463. crumbs.push({'id': vm.job().properties['workflow_id'], 'name': vm.job().properties['workflow_id'], 'type': 'workflow'});
  1464. }
  1465. else if (/-oozie-oozi-W/.test(vm.job().id())) {
  1466. if (vm.job().properties['bundle_id']()) {
  1467. crumbs.push({'id': vm.job().properties['bundle_id'](), 'name': vm.job().properties['bundle_id'](), 'type': 'bundle'});
  1468. }
  1469. if (vm.job().properties['coordinator_id']()) {
  1470. crumbs.push({'id': vm.job().properties['coordinator_id'](), 'name': vm.job().properties['coordinator_id'](), 'type': 'schedule'});
  1471. }
  1472. }
  1473. else if (/-oozie-oozi-C/.test(vm.job().id())) {
  1474. if (vm.job().properties['bundle_id']()) {
  1475. crumbs.push({'id': vm.job().properties['bundle_id'](), 'name': vm.job().properties['bundle_id'](), 'type': 'bundle'});
  1476. }
  1477. }
  1478. crumbs.push({'id': vm.job().id(), 'name': vm.job().name(), 'type': vm.job().type()});
  1479. vm.resetBreadcrumbs(crumbs);
  1480. %if not is_mini:
  1481. if (vm.job().type() === 'workflow' && !vm.job().workflowGraphLoaded) {
  1482. vm.job().updateWorkflowGraph();
  1483. }
  1484. %else:
  1485. if (vm.job().type() === 'workflow') {
  1486. vm.job().fetchProfile('properties');
  1487. $('a[href="#workflow-page-metadata${ SUFFIX }"]').tab('show');
  1488. }
  1489. %endif
  1490. vm.job().fetchLogs();
  1491. } else {
  1492. $(document).trigger("error", data.message);
  1493. }
  1494. }).always(function () {
  1495. self.loadingJob(false);
  1496. });
  1497. };
  1498. self.updateJob = function () {
  1499. vm.apiHelper.cancelActiveRequest(lastUpdateJobRequest);
  1500. huePubSub.publish('graph.refresh.view');
  1501. if (vm.job() == self && self.apiStatus() == 'RUNNING') {
  1502. lastFetchJobRequest = self._fetchJob(function (data) {
  1503. if (vm.job().type() == 'schedule') {
  1504. vm.job(new Job(vm, data.app)); // Updates everything but redraw the page
  1505. } else {
  1506. vm.job().fetchStatus();
  1507. vm.job().fetchLogs();
  1508. }
  1509. // vm.job().fetchProfile(); // Get name of active tab?
  1510. });
  1511. }
  1512. };
  1513. self.fetchLogs = function (name) {
  1514. $.post("/jobbrowser/api/job/logs", {
  1515. app_id: ko.mapping.toJSON(self.id),
  1516. interface: ko.mapping.toJSON(vm.interface),
  1517. type: ko.mapping.toJSON(self.type),
  1518. name: ko.mapping.toJSON(name ? name : 'default')
  1519. }, function (data) {
  1520. if (data.status == 0) {
  1521. self.logs(data.logs.logs);
  1522. if ($('.jb-panel pre:visible').length > 0){
  1523. $('.jb-panel pre:visible').css('overflow-y', 'auto').height(Math.max(200, $(window).height() - $('.jb-panel pre:visible').offset().top - $('.page-content').scrollTop() - 30));
  1524. }
  1525. } else {
  1526. $(document).trigger("error", data.message);
  1527. }
  1528. });
  1529. };
  1530. self.fetchProfile = function (name) {
  1531. $.post("/jobbrowser/api/job/profile", {
  1532. app_id: ko.mapping.toJSON(self.id),
  1533. interface: ko.mapping.toJSON(vm.interface),
  1534. app_type: ko.mapping.toJSON(self.type),
  1535. app_property: ko.mapping.toJSON(name),
  1536. app_filters: ko.mapping.toJSON(self.filters),
  1537. }, function (data) {
  1538. if (data.status == 0) {
  1539. self.properties[name](data[name]);
  1540. } else {
  1541. $(document).trigger("error", data.message);
  1542. }
  1543. });
  1544. };
  1545. self.fetchStatus = function () {
  1546. $.post("/jobbrowser/api/job", {
  1547. app_id: ko.mapping.toJSON(self.id),
  1548. interface: ko.mapping.toJSON(self.mainType)
  1549. }, function (data) {
  1550. if (data.status == 0) {
  1551. self.status(data.app.status);
  1552. self.apiStatus(data.app.apiStatus);
  1553. self.progress(data.app.progress);
  1554. } else {
  1555. $(document).trigger("error", data.message);
  1556. }
  1557. });
  1558. };
  1559. self.control = function (action) {
  1560. if (action == 'rerun') {
  1561. $.get('/oozie/rerun_oozie_job/' + self.id() + '/?format=json', function(response) {
  1562. $('#rerun-modal${ SUFFIX }').modal('show');
  1563. self.rerunModalContent(response);
  1564. });
  1565. } else {
  1566. vm.jobs._control([self.id()], action, function(data) {
  1567. $(document).trigger("info", data.message);
  1568. self.fetchStatus();
  1569. });
  1570. }
  1571. }
  1572. self.workflowGraphLoaded = false;
  1573. self.lastArrowsPosition = {
  1574. top: 0,
  1575. left: 0
  1576. }
  1577. self.initialArrowsDrawingCount = 0;
  1578. self.initialArrowsDrawing = function() {
  1579. if (self.initialArrowsDrawingCount < 20) {
  1580. self.initialArrowsDrawingCount++;
  1581. huePubSub.publish('graph.draw.arrows');
  1582. window.setTimeout(self.initialArrowsDrawing, 100);
  1583. }
  1584. else if (self.initialArrowsDrawingCount < 30){
  1585. self.initialArrowsDrawingCount++;
  1586. huePubSub.publish('graph.draw.arrows');
  1587. window.setTimeout(self.initialArrowsDrawing, 500);
  1588. }
  1589. else {
  1590. self.initialArrowsDrawingCount = 0;
  1591. }
  1592. }
  1593. self.updateArrowsInterval = -1;
  1594. self.updateArrows = function() {
  1595. if ($('canvas').length > 0 && $('canvas').position().top !== self.lastArrowsPosition.top && $('canvas').position().left !== self.lastArrowsPosition.left) {
  1596. self.lastArrowsPosition = $('canvas').position();
  1597. }
  1598. if ($('#workflow-page-graph${ SUFFIX }').is(':visible')){
  1599. if ($('canvas').length === 0){
  1600. huePubSub.publish('graph.draw.arrows');
  1601. }
  1602. }
  1603. else {
  1604. $('canvas').remove();
  1605. }
  1606. }
  1607. self.updateWorkflowGraph = function() {
  1608. huePubSub.publish('graph.stop.refresh.view');
  1609. $('canvas').remove();
  1610. if (!IS_HUE_4) {
  1611. huePubSub.subscribe('hue4.process.headers', function (opts) {
  1612. opts.callback(opts.response);
  1613. });
  1614. }
  1615. if (vm.job().type() === 'workflow') {
  1616. $('#workflow-page-graph${ SUFFIX }').html('<div class="hue-spinner"><i class="fa fa-spinner fa-spin hue-spinner-center hue-spinner-xlarge"></i></div>');
  1617. $.ajax({
  1618. url: "/oozie/list_oozie_workflow/" + vm.job().id(),
  1619. data: {
  1620. 'graph': true,
  1621. 'element': 'workflow-page-graph${ SUFFIX }',
  1622. 'is_jb2': true
  1623. },
  1624. beforeSend: function (xhr) {
  1625. xhr.setRequestHeader("X-Requested-With", "Hue");
  1626. },
  1627. dataType: "html",
  1628. success: function (response) {
  1629. self.workflowGraphLoaded = true;
  1630. huePubSub.publish('hue4.process.headers', {
  1631. response: response,
  1632. callback: function (r) {
  1633. $('#workflow-page-graph${ SUFFIX }').html(r);
  1634. window.clearInterval(self.updateArrowsInterval);
  1635. self.initialArrowsDrawing();
  1636. self.updateArrowsInterval = window.setInterval(self.updateArrows, 100, 'jobbrowser');
  1637. }
  1638. });
  1639. }
  1640. });
  1641. }
  1642. };
  1643. };
  1644. var Jobs = function (vm) {
  1645. var self = this;
  1646. self.apps = ko.observableArray().extend({ rateLimit: 50 });
  1647. self.totalApps = ko.observable(null);
  1648. self.isCoordinator = ko.observable(false);
  1649. self.loadingJobs = ko.observable(false);
  1650. self.selectedJobs = ko.observableArray();
  1651. self.hasKill = ko.pureComputed(function() {
  1652. return ['jobs', 'workflows', 'schedules', 'bundles'].indexOf(vm.interface()) != -1 && ! self.isCoordinator();
  1653. });
  1654. self.killEnabled = ko.pureComputed(function() {
  1655. return self.hasKill() && self.selectedJobs().length > 0 && $.grep(self.selectedJobs(), function(job) {
  1656. return job.killEnabled();
  1657. }).length == self.selectedJobs().length;
  1658. });
  1659. self.hasResume = ko.pureComputed(function() {
  1660. return ['workflows', 'schedules', 'bundles'].indexOf(vm.interface()) != -1 && ! self.isCoordinator();
  1661. });
  1662. self.resumeEnabled = ko.pureComputed(function() {
  1663. return self.hasResume() && self.selectedJobs().length > 0 && $.grep(self.selectedJobs(), function(job) {
  1664. return job.resumeEnabled();
  1665. }).length == self.selectedJobs().length;
  1666. });
  1667. self.hasRerun = ko.pureComputed(function() {
  1668. return self.isCoordinator();
  1669. });
  1670. self.rerunEnabled = ko.pureComputed(function() {
  1671. return self.hasRerun() && self.selectedJobs().length == 1 && $.grep(self.selectedJobs(), function(job) {
  1672. return job.rerunEnabled();
  1673. }).length == self.selectedJobs().length;
  1674. });
  1675. self.hasPause = ko.pureComputed(function() {
  1676. return ['workflows', 'schedules', 'bundles'].indexOf(vm.interface()) != -1 && ! self.isCoordinator();
  1677. });
  1678. self.pauseEnabled = ko.pureComputed(function() {
  1679. return self.hasPause() && self.selectedJobs().length > 0 && $.grep(self.selectedJobs(), function(job) {
  1680. return job.pauseEnabled();
  1681. }).length == self.selectedJobs().length;
  1682. });
  1683. self.hasIgnore = ko.pureComputed(function() {
  1684. return self.isCoordinator();
  1685. });
  1686. self.ignoreEnabled = ko.pureComputed(function() {
  1687. return self.hasIgnore() && self.selectedJobs().length > 0 && $.grep(self.selectedJobs(), function(job) {
  1688. return job.ignoreEnabled();
  1689. }).length == self.selectedJobs().length;
  1690. });
  1691. self.textFilter = ko.observable('user:${ user.username } ').extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 1000 } });
  1692. self.statesValuesFilter = ko.observableArray([
  1693. ko.mapping.fromJS({'value': 'completed', 'name': '${_("Succeeded")}', 'checked': false, 'klass': 'green'}),
  1694. ko.mapping.fromJS({'value': 'running', 'name': '${_("Running")}', 'checked': false, 'klass': 'orange'}),
  1695. ko.mapping.fromJS({'value': 'failed', 'name': '${_("Failed")}', 'checked': false, 'klass': 'red'}),
  1696. ]);
  1697. self.statesFilter = ko.computed(function () {
  1698. var checkedStates = ko.utils.arrayFilter(self.statesValuesFilter(), function (state) {
  1699. return state.checked();
  1700. });
  1701. return ko.utils.arrayMap(checkedStates, function(state){
  1702. return state.value()
  1703. });
  1704. });
  1705. self.timeValueFilter = ko.observable(7).extend({ throttle: 500 });
  1706. self.timeUnitFilter = ko.observable('days').extend({ throttle: 500 });
  1707. self.timeUnitFilterUnits = ko.observable([
  1708. {'value': 'days', 'name': '${_("days")}'},
  1709. {'value': 'hours', 'name': '${_("hours")}'},
  1710. {'value': 'minutes', 'name': '${_("minutes")}'},
  1711. ]);
  1712. self.hasPagination = ko.computed(function() {
  1713. return ['workflows', 'schedules', 'bundles'].indexOf(vm.interface()) != -1;
  1714. });
  1715. self.paginationPage = ko.observable(1);
  1716. self.paginationOffset = ko.observable(1); // Starting index
  1717. self.paginationResultPage = ko.observable(100);
  1718. self.pagination = ko.computed(function() {
  1719. return {
  1720. 'page': self.paginationPage(),
  1721. 'offset': self.paginationOffset(),
  1722. 'limit': self.paginationResultPage()
  1723. };
  1724. });
  1725. self.showPreviousPage = ko.computed(function() {
  1726. return self.paginationOffset() > 1;
  1727. });
  1728. self.showNextPage = ko.computed(function() {
  1729. return self.totalApps() != null && (self.paginationOffset() + self.paginationResultPage()) < self.totalApps();
  1730. });
  1731. self.previousPage = function() {
  1732. self.paginationOffset(self.paginationOffset() - self.paginationResultPage());
  1733. };
  1734. self.nextPage = function() {
  1735. self.paginationOffset(self.paginationOffset() + self.paginationResultPage());
  1736. };
  1737. self.searchFilters = ko.pureComputed(function() {
  1738. return [
  1739. {'text': self.textFilter()},
  1740. {'time': {'time_value': self.timeValueFilter(), 'time_unit': self.timeUnitFilter()}},
  1741. {'states': ko.mapping.toJS(self.statesFilter())},
  1742. ];
  1743. });
  1744. self.searchFilters.subscribe(function() {
  1745. self.paginationOffset(1);
  1746. });
  1747. self.paginationFilters = ko.pureComputed(function() {
  1748. return [
  1749. {'pagination': self.pagination()},
  1750. ];
  1751. });
  1752. self.filters = ko.pureComputed(function() {
  1753. return self.searchFilters().concat(self.paginationFilters());
  1754. });
  1755. self.filters.subscribe(function(value) {
  1756. self.fetchJobs();
  1757. });
  1758. self._fetchJobs = function (callback) {
  1759. return $.post("/jobbrowser/api/jobs", {
  1760. interface: ko.mapping.toJSON(vm.interface),
  1761. filters: ko.mapping.toJSON(self.filters),
  1762. }, function (data) {
  1763. if (data.status == 0) {
  1764. if (callback) {
  1765. callback(data);
  1766. };
  1767. } else {
  1768. $(document).trigger("error", data.message);
  1769. }
  1770. });
  1771. };
  1772. var lastFetchJobsRequest = null;
  1773. var lastUpdateJobsRequest = null;
  1774. self.showJobCountBanner = ko.pureComputed(function() {
  1775. return self.apps().length == ${ MAX_JOB_FETCH.get() };
  1776. });
  1777. self.fetchJobs = function () {
  1778. vm.apiHelper.cancelActiveRequest(lastUpdateJobsRequest);
  1779. vm.apiHelper.cancelActiveRequest(lastFetchJobsRequest);
  1780. self.loadingJobs(true);
  1781. vm.job(null);
  1782. lastFetchJobsRequest = self._fetchJobs(function(data) {
  1783. var apps = [];
  1784. if (data && data.apps) {
  1785. data.apps.forEach(function (job) {
  1786. apps.push(new Job(vm, job));
  1787. });
  1788. }
  1789. self.apps(apps);
  1790. self.totalApps(data.total);
  1791. }).always(function () {
  1792. self.loadingJobs(false);
  1793. });
  1794. }
  1795. self.updateJobs = function () {
  1796. vm.apiHelper.cancelActiveRequest(lastUpdateJobsRequest);
  1797. lastFetchJobsRequest = self._fetchJobs(function(data) {
  1798. var apps = [];
  1799. if (data && data.apps) {
  1800. var i = 0, j = 0;
  1801. var newJobs = [];
  1802. while (i < self.apps().length && j < data.apps.length) {
  1803. if (self.apps()[i].id() != data.apps[j].id) {
  1804. // New Job
  1805. newJobs.push(new Job(vm, data.apps[j]));
  1806. j++;
  1807. } else {
  1808. // Updated jobs
  1809. if (self.apps()[i].status() != data.apps[j].status) {
  1810. self.apps()[i].status(data.apps[j].status);
  1811. self.apps()[i].apiStatus(data.apps[j].apiStatus);
  1812. }
  1813. i++;
  1814. j++;
  1815. }
  1816. }
  1817. if (i < self.apps().length) {
  1818. self.apps().splice(i, self.apps().length - i);
  1819. }
  1820. newJobs.forEach(function (job) {
  1821. self.apps.unshift(job);
  1822. });
  1823. self.totalApps(data.total);
  1824. }
  1825. });
  1826. };
  1827. self.control = function (action) {
  1828. if (action == 'rerun') {
  1829. $.get('/oozie/rerun_oozie_coord/' + vm.job().id() + '/?format=json', function(response) {
  1830. $('#rerun-modal${ SUFFIX }').modal('show');
  1831. vm.job().rerunModalContent(response);
  1832. var frag = document.createDocumentFragment();
  1833. vm.job().coordinatorActions().selectedJobs().forEach(function (item) {
  1834. var option = $('<option>', {
  1835. value: item.properties.number(),
  1836. selected: true
  1837. });
  1838. option.appendTo($(frag));
  1839. });
  1840. $('#id_actions').find('option').remove();
  1841. $(frag).appendTo('#id_actions');
  1842. });
  1843. } else if (action == 'ignore') {
  1844. $.post('/oozie/manage_oozie_jobs/' + vm.job().id() + '/ignore', {
  1845. actions: $.map(vm.job().coordinatorActions().selectedJobs(), function(wf) {
  1846. return wf.properties.number();
  1847. }).join(' ')
  1848. }, function(response) {
  1849. vm.job().apiStatus('RUNNING');
  1850. vm.job().updateJob();
  1851. });
  1852. } else {
  1853. self._control(
  1854. $.map(self.selectedJobs(), function(job) {
  1855. return job.id();
  1856. }),
  1857. action,
  1858. function(data) {
  1859. $(document).trigger("info", data.message);
  1860. self.updateJobs();
  1861. }
  1862. )
  1863. }
  1864. }
  1865. self._control = function (app_ids, action, callback) {
  1866. $.post("/jobbrowser/api/job/action", {
  1867. app_ids: ko.mapping.toJSON(app_ids),
  1868. interface: ko.mapping.toJSON(vm.interface),
  1869. operation: ko.mapping.toJSON({action: action})
  1870. }, function (data) {
  1871. if (data.status == 0) {
  1872. if (callback) {
  1873. callback(data);
  1874. }
  1875. } else {
  1876. $(document).trigger("error", data.message);
  1877. }
  1878. }).always(function () {
  1879. });
  1880. };
  1881. };
  1882. var JobBrowserViewModel = function () {
  1883. var self = this;
  1884. self.apiHelper = ApiHelper.getInstance();
  1885. self.assistAvailable = ko.observable(true);
  1886. self.isLeftPanelVisible = ko.observable();
  1887. self.apiHelper.withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
  1888. self.appConfig = ko.observable();
  1889. self.isMini = ko.observable(false);
  1890. self.availableInterfaces = ko.pureComputed(function () {
  1891. var jobsInterfaceCondition = function () {
  1892. return self.appConfig() && self.appConfig()['browser'] && self.appConfig()['browser']['interpreter_names'].indexOf('yarn') != -1;
  1893. }
  1894. var dataEngInterfaceCondition = function () {
  1895. return self.appConfig() && self.appConfig()['browser'] && self.appConfig()['browser']['interpreter_names'].indexOf('dataeng') != -1;
  1896. }
  1897. var schedulerInterfaceCondition = function () {
  1898. return self.appConfig() && self.appConfig()['scheduler'] && self.appConfig()['scheduler']['interpreters'].length > 0;
  1899. }
  1900. var interfaces = [
  1901. {'interface': 'jobs', 'label': '${ _ko('Jobs') }', 'condition': jobsInterfaceCondition},
  1902. {'interface': 'dataeng-jobs', 'label': '${ _ko('Jobs') }', 'condition': dataEngInterfaceCondition},
  1903. {'interface': 'workflows', 'label': '${ _ko('Workflows') }', 'condition': schedulerInterfaceCondition},
  1904. {'interface': 'schedules', 'label': '${ _ko('Schedules') }', 'condition': schedulerInterfaceCondition},
  1905. {'interface': 'bundles', 'label': '${ _ko('Bundles') }', 'condition': schedulerInterfaceCondition},
  1906. {'interface': 'slas', 'label': '${ _ko('SLAs') }', 'condition': schedulerInterfaceCondition},
  1907. {'interface': 'dataeng-clusters', 'label': '${ _ko('Clusters') }', 'condition': dataEngInterfaceCondition},
  1908. ];
  1909. return interfaces.filter(function (i) {
  1910. return i.condition();
  1911. });
  1912. });
  1913. self.slasLoadedOnce = false;
  1914. self.slasLoading = ko.observable(true);
  1915. self.loadSlaPage = function(){
  1916. if (!self.slasLoadedOnce) {
  1917. $.ajax({
  1918. url: '/oozie/list_oozie_sla/?is_embeddable=true',
  1919. beforeSend: function (xhr) {
  1920. xhr.setRequestHeader('X-Requested-With', 'Hue');
  1921. },
  1922. dataType: 'html',
  1923. success: function (response) {
  1924. self.slasLoading(false);
  1925. $('#slas').html(response);
  1926. }
  1927. });
  1928. }
  1929. }
  1930. self.oozieInfoLoadedOnce = false;
  1931. self.oozieInfoLoading = ko.observable(true);
  1932. self.loadOozieInfoPage = function(){
  1933. if (!self.oozieInfoLoadedOnce) {
  1934. self.oozieInfoLoadedOnce = true;
  1935. $.ajax({
  1936. url: '/oozie/list_oozie_info/?is_embeddable=true',
  1937. beforeSend: function (xhr) {
  1938. xhr.setRequestHeader('X-Requested-With', 'Hue');
  1939. },
  1940. dataType: 'html',
  1941. success: function (response) {
  1942. self.oozieInfoLoading(false);
  1943. $('#oozieInfo').html(response);
  1944. }
  1945. });
  1946. }
  1947. }
  1948. self.interface = ko.observable();
  1949. self.isValidInterface = function(name) {
  1950. var flatAvailableInterfaces = self.availableInterfaces().map(function (i) {
  1951. return i.interface;
  1952. });
  1953. if (flatAvailableInterfaces.indexOf(name) != -1 || name == 'oozie-info') {
  1954. return name;
  1955. } else {
  1956. return flatAvailableInterfaces[0];
  1957. }
  1958. };
  1959. self.selectInterface = function(interface) {
  1960. interface = self.isValidInterface(interface);
  1961. self.interface(interface);
  1962. self.resetBreadcrumbs();
  1963. % if not is_mini:
  1964. huePubSub.publish('graph.stop.refresh.view');
  1965. hueUtils.changeURL('#!' + interface);
  1966. % endif
  1967. self.job(null);
  1968. if (interface === 'slas'){
  1969. % if not is_mini:
  1970. self.loadSlaPage();
  1971. % endif
  1972. }
  1973. else if (interface === 'oozie-info') {
  1974. % if not is_mini:
  1975. self.loadOozieInfoPage();
  1976. % endif
  1977. }
  1978. else {
  1979. self.jobs.fetchJobs();
  1980. }
  1981. };
  1982. self.jobs = new Jobs(self);
  1983. self.job = ko.observable();
  1984. var updateJobInterval = -1;
  1985. var updateJobsInterval = -1;
  1986. self.job.subscribe(function(val) {
  1987. window.clearInterval(updateJobInterval);
  1988. window.clearInterval(updateJobsInterval);
  1989. if (self.interface() && self.interface() !== 'slas' && self.interface() !== 'oozie-info'){
  1990. if (val) {
  1991. if (val.apiStatus() == 'RUNNING') {
  1992. updateJobInterval = setInterval(val.updateJob, 5000, 'jobbrowser');
  1993. }
  1994. }
  1995. else {
  1996. updateJobsInterval = setInterval(self.jobs.updateJobs, 20000, 'jobbrowser');
  1997. }
  1998. }
  1999. });
  2000. self.breadcrumbs = ko.observableArray([]);
  2001. self.resetBreadcrumbs = function(extraCrumbs) {
  2002. var crumbs = [{'id': '', 'name': self.interface(), 'type': self.interface()}]
  2003. if (extraCrumbs) {
  2004. crumbs = crumbs.concat(extraCrumbs);
  2005. }
  2006. self.breadcrumbs(crumbs);
  2007. }
  2008. self.resetBreadcrumbs();
  2009. self.getHDFSPath = function (path) {
  2010. if (path.startsWith('hdfs://')) {
  2011. var bits = path.substr(7).split('/');
  2012. bits.shift();
  2013. return '/' + bits.join('/');
  2014. }
  2015. return path;
  2016. }
  2017. self.formatProgress = function (progress) {
  2018. if (typeof progress === 'function') {
  2019. progress = progress();
  2020. }
  2021. if (!isNaN(progress)) {
  2022. return Math.round(progress*100)/100 + '%';
  2023. }
  2024. return progress;
  2025. }
  2026. self.load = function() {
  2027. var h = window.location.hash;
  2028. %if not is_mini:
  2029. huePubSub.publish('graph.stop.refresh.view');
  2030. %endif
  2031. h = h.indexOf('#!') === 0 ? h.substr(2) : '';
  2032. switch (h) {
  2033. case '':
  2034. h = 'jobs';
  2035. case 'slas':
  2036. case 'oozie-info':
  2037. case 'jobs':
  2038. case 'workflows':
  2039. case 'schedules':
  2040. case 'bundles':
  2041. case 'dataeng-clusters':
  2042. case 'dataeng-jobs':
  2043. self.selectInterface(h);
  2044. break;
  2045. default:
  2046. if (h.indexOf('id=') === 0 && ! self.isMini()){
  2047. new Job(self, {id: h.substr(3)}).fetchJob();
  2048. }
  2049. else {
  2050. self.selectInterface('reset');
  2051. }
  2052. }
  2053. }
  2054. };
  2055. $(document).ready(function () {
  2056. var jobBrowserViewModel = new JobBrowserViewModel();
  2057. % if not is_mini:
  2058. ko.applyBindings(jobBrowserViewModel, $('#jobbrowserComponents')[0]);
  2059. huePubSub.subscribe('oozie.action.logs.click', function (widget) {
  2060. var jobId = widget.logsURL().match(/jobbrowser\/jobs\/(.+?)\/single_logs$/i);
  2061. if (jobId) {
  2062. jobBrowserViewModel.job().id(jobId[1]);
  2063. jobBrowserViewModel.job().fetchJob();
  2064. } else {
  2065. console.error('Unknown job log url: ' + widget.logsURL());
  2066. }
  2067. }, 'jobbrowser');
  2068. huePubSub.subscribe('oozie.action.click', function (widget) {
  2069. jobBrowserViewModel.job().id(widget.externalId());
  2070. jobBrowserViewModel.job().fetchJob();
  2071. }, 'jobbrowser');
  2072. huePubSub.subscribe('browser.job.open.link', function (id) {
  2073. jobBrowserViewModel.job().id(id);
  2074. jobBrowserViewModel.job().fetchJob();
  2075. }, 'jobbrowser');
  2076. % else:
  2077. ko.applyBindings(jobBrowserViewModel, $('#jobbrowserMiniComponents')[0]);
  2078. jobBrowserViewModel.isMini(true);
  2079. % endif
  2080. huePubSub.subscribe('app.gained.focus', function (app) {
  2081. if (app === 'jobbrowser') {
  2082. huePubSub.publish('graph.draw.arrows');
  2083. loadHash();
  2084. }
  2085. }, 'jobbrowser');
  2086. var loadHash = function () {
  2087. if (window.location.pathname.indexOf('jobbrowser') > -1) {
  2088. jobBrowserViewModel.load();
  2089. }
  2090. };
  2091. window.onhashchange = function () {
  2092. loadHash();
  2093. }
  2094. huePubSub.subscribe('cluster.config.set.config', function (clusterConfig) {
  2095. jobBrowserViewModel.appConfig(clusterConfig && clusterConfig['app_config']);
  2096. loadHash();
  2097. });
  2098. huePubSub.publish('cluster.config.get.config');
  2099. huePubSub.subscribe('submit.rerun.popup.return', function (data) {
  2100. $.jHueNotify.info('${_('Rerun submitted.')}');
  2101. $('#rerun-modal${ SUFFIX }').modal('hide');
  2102. jobBrowserViewModel.job().apiStatus('RUNNING');
  2103. jobBrowserViewModel.job().updateJob();
  2104. }, 'jobbrowser');
  2105. % if is_mini:
  2106. huePubSub.subscribe('mini.jb.navigate', function (interface) {
  2107. $('#jobsPanel .nav-pills li').removeClass('active');
  2108. interface = jobBrowserViewModel.isValidInterface(interface);
  2109. $('#jobsPanel .nav-pills li[data-interface="' + interface + '"]').addClass('active');
  2110. jobBrowserViewModel.selectInterface(interface);
  2111. });
  2112. huePubSub.subscribe('mini.jb.expand', function () {
  2113. if (jobBrowserViewModel.job()) {
  2114. huePubSub.publish('open.link', '/jobbrowser/#!id=' + jobBrowserViewModel.job().id());
  2115. }
  2116. else {
  2117. huePubSub.publish('open.link', '/jobbrowser/#!' + jobBrowserViewModel.interface());
  2118. }
  2119. });
  2120. % endif
  2121. $(document).on('shown', '.jb-logs-link', function (e) {
  2122. var dest = $(e.target).attr('href');
  2123. if (dest.indexOf('logs') > -1 && $(dest).find('pre:visible').length > 0){
  2124. $(dest).find('pre').css('overflow-y', 'auto').height(Math.max(200, $(window).height() - $(dest).find('pre').offset().top - $('.page-content').scrollTop() - 30));
  2125. }
  2126. });
  2127. });
  2128. })();
  2129. </script>
  2130. </span>
  2131. % if not is_embeddable:
  2132. ${ commonfooter(request, messages) | n,unicode }
  2133. % endif