job_browser.mako 57 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462
  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 desktop import conf
  18. from desktop.views import commonheader, commonfooter, _ko
  19. from django.utils.translation import ugettext as _
  20. %>
  21. % if not is_embeddable:
  22. ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
  23. <%namespace name="assist" file="/assist.mako" />
  24. % endif
  25. <span class="notebook">
  26. <link rel="stylesheet" href="${ static('desktop/ext/css/basictable.css') }">
  27. <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
  28. % if not is_embeddable:
  29. <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">
  30. <style type="text/css">
  31. % if conf.CUSTOM.BANNER_TOP_HTML.get():
  32. .show-assist {
  33. top: 110px!important;
  34. }
  35. .main-content {
  36. top: 112px!important;
  37. }
  38. % endif
  39. </style>
  40. % endif
  41. <link rel="stylesheet" href="${ static('jobbrowser/css/jobbrowser-embeddable.css') }">
  42. <script src="${ static('oozie/js/dashboard-utils.js') }" type="text/javascript" charset="utf-8"></script>
  43. <script src="${ static('desktop/ext/js/jquery/plugins/jquery.basictable.min.js') }"></script>
  44. <script src="${ static('desktop/ext/js/jquery/plugins/jquery-ui-1.10.4.custom.min.js') }"></script>
  45. <script src="${ static('desktop/js/apiHelper.js') }"></script>
  46. <script src="${ static('desktop/js/ko.charts.js') }"></script>
  47. <script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
  48. <script src="${ static('desktop/js/ko.editable.js') }"></script>
  49. <script src="${ static('oozie/js/list-oozie-coordinator.ko.js') }"></script>
  50. <script src="${ static('desktop/js/ace/ace.js') }"></script>
  51. % if not is_mini:
  52. <div id="jobbrowserComponents" class="jobbrowser-components">
  53. % else:
  54. <div id="jobbrowserMiniComponents" class="jobbrowserComponents">
  55. % endif
  56. % if not is_embeddable:
  57. ${ assist.assistJSModels() }
  58. ${ assist.assistPanel() }
  59. <a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isLeftPanelVisible() && $root.assistAvailable(), click: function() { $root.isLeftPanelVisible(true); }">
  60. <i class="fa fa-chevron-right"></i>
  61. </a>
  62. % endif
  63. % if not is_mini:
  64. <div class="navbar hue-title-bar">
  65. <div class="navbar-inner">
  66. <div class="container-fluid">
  67. <div class="nav-collapse">
  68. <ul class="nav">
  69. <li class="app-header">
  70. <a href="/${app_name}">
  71. <img src="${ static('jobbrowser/art/icon_jobbrowser_48.png') }" class="app-icon" alt="${ _('Job browser icon') }"/>
  72. ${ _('Job Browser') }
  73. </a>
  74. </li>
  75. <li data-bind="css: {'active': interface() === 'jobs'}"><a class="pointer" data-bind="click: function(){ selectInterface('jobs'); }">${ _('Jobs') }</a></li>
  76. <li data-bind="css: {'active': interface() === 'workflows'}"><a class="pointer" data-bind="click: function(){ selectInterface('workflows'); }">${ _('Workflows') }</a></li>
  77. <li data-bind="css: {'active': interface() === 'schedules'}"><a class="pointer" data-bind="click: function(){ selectInterface('schedules'); }">${ _('Schedules') }</a></li>
  78. <li data-bind="css: {'active': interface() === 'bundles'}"><a class="pointer" data-bind="click: function(){ selectInterface('bundles'); }">${ _('Bundles') }</a></li>
  79. <li data-bind="css: {'active': interface() === 'slas'}"><a class="pointer" data-bind="click: function(){ selectInterface('slas'); }">${ _('SLAs') }</a></li>
  80. </ul>
  81. % if not hiveserver2_impersonation_enabled:
  82. <div class="pull-right alert alert-warning" style="margin-top: 4px">${ _("Hive jobs are running as the 'hive' user") }</div>
  83. % endif
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. % endif
  89. <div class="main-content">
  90. <div class="vertical-full container-fluid" data-bind="style: { 'padding-left' : $root.isLeftPanelVisible() ? '0' : '20px' }">
  91. <div class="vertical-full">
  92. <div class="vertical-full row-fluid panel-container">
  93. % if not is_embeddable:
  94. <div class="assist-container left-panel" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable()">
  95. <a title="${_('Toggle Assist')}" class="pointer hide-assist" data-bind="click: function() { $root.isLeftPanelVisible(false) }">
  96. <i class="fa fa-chevron-left"></i>
  97. </a>
  98. <div class="assist" data-bind="component: {
  99. name: 'assist-panel',
  100. params: {
  101. user: '${user.username}',
  102. sql: {
  103. navigationSettings: {
  104. openItem: false,
  105. showStats: true
  106. }
  107. },
  108. visibleAssistPanels: ['sql']
  109. }
  110. }"></div>
  111. </div>
  112. <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }"><div class="resize-bar">&nbsp;</div></div>
  113. % endif
  114. <div class="content-panel">
  115. <div class="content-panel-inner">
  116. <div data-bind="template: { name: 'breadcrumbs' }"></div>
  117. <!-- ko if: ! $root.job() -->
  118. ${_('Filter')} <input type="text" class="input-xlarge search-query" data-bind="textInput: jobs.textFilter" placeholder="${_('Filter by id, name, user...')}" />
  119. <div class="btn-group">
  120. <select data-bind="options: jobs.statesValuesFilter, selectedOptions: jobs.statesFilter, optionsText: 'name', optionsValue: 'value'" size="3" multiple="true"></select>
  121. <a class="btn btn-status btn-success" data-value="completed">${ _('Succeeded') }</a>
  122. <a class="btn btn-status btn-warning" data-value="running">${ _('Running') }</a>
  123. <a class="btn btn-status btn-danger disable-feedback" data-value="failed">${ _('Failed') }</a>
  124. </div>
  125. ${_('in the last')} <input class="input-mini no-margin" type="number" min="1" max="3650" data-bind="value: jobs.timeValueFilter">
  126. <select class="input-small no-margin" data-bind="value: jobs.timeUnitFilter, options: jobs.timeUnitFilterUnits, optionsText: 'name', optionsValue: 'value'">
  127. <option value="days">${_('days')}</option>
  128. <option value="hours">${_('hours')}</option>
  129. <option value="minutes">${_('minutes')}</option>
  130. </select>
  131. <div class="btn-toolbar pull-right" style="display: inline; vertical-align: middle; margin-left: 10px; font-size: 12px">
  132. <span class="loader hide"><i class="fa fa-2x fa-spinner fa-spin muted"></i></span>
  133. <button class="btn bulkToolbarBtn bulk-resume" data-operation="resume" title="${ _('Resume selected') }" disabled="disabled" type="button">
  134. <i class="fa fa-play"></i><span class="hide-small"> ${ _('Resume') }</span>
  135. </button>
  136. <button class="btn bulkToolbarBtn bulk-suspend" data-operation="suspend" title="${ _('Suspend selected') }" disabled="disabled" type="button">
  137. <i class="fa fa-pause"></i><span class="hide-small"> ${ _('Suspend') }</span>
  138. </button>
  139. <button class="btn bulkToolbarBtn btn-danger bulk-kill disable-feedback" data-operation="kill" title="${ _('Kill selected') }" disabled="disabled" type="button">
  140. <i class="fa fa-times"></i><span class="hide-small"> ${ _('Kill') }</span>
  141. </button>
  142. </div>
  143. <div class="card card-small">
  144. <table id="jobsTable" class="datatables table table-condensed">
  145. <thead>
  146. <tr>
  147. <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
  148. <th>${_('Duration')}</th>
  149. <th>${_('Started')}</th>
  150. <th>${_('Type')}</th>
  151. <th>${_('Status')}</th>
  152. <th>${_('Progress')}</th>
  153. <th>${_('Name')}</th>
  154. <th>${_('User')}</th>
  155. <th>${_('Id')}</th>
  156. </tr>
  157. </thead>
  158. <tbody data-bind="foreach: jobs.runningApps">
  159. <tr data-bind="click: fetchJob">
  160. <td><div class="hueCheckbox fa"></div></td>
  161. <td data-bind="text: duration"></td>
  162. <td data-bind="text: duration"></td>
  163. <td data-bind="text: type"></td>
  164. <td data-bind="text: status"></td>
  165. <td data-bind="text: progress"></td>
  166. <td data-bind="text: name"></td>
  167. <td data-bind="text: user"></td>
  168. <td data-bind="text: id"></td>
  169. </tr>
  170. </tbody>
  171. </table>
  172. </div>
  173. <div class="card card-small">
  174. <table id="jobsTable" class="datatables table table-condensed">
  175. <thead>
  176. <tr>
  177. <th>${_('Duration')}</th>
  178. <th>${_('Started')}</th>
  179. <th>${_('Type')}</th>
  180. <th>${_('Status')}</th>
  181. <th>${_('Progress')}</th>
  182. <th>${_('Name')}</th>
  183. <th>${_('User')}</th>
  184. <th>${_('Id')}</th>
  185. </tr>
  186. </thead>
  187. <tbody data-bind="foreach: jobs.finishedApps">
  188. <tr data-bind="click: fetchJob">
  189. <td data-bind="text: duration"></td>
  190. <td data-bind="text: duration"></td>
  191. <td data-bind="text: type"></td>
  192. <td data-bind="text: status"></td>
  193. <td data-bind="text: progress"></td>
  194. <td data-bind="text: name"></td>
  195. <td data-bind="text: user"></td>
  196. <td data-bind="text: id"></td>
  197. </tr>
  198. </tbody>
  199. </table>
  200. </div>
  201. <!-- /ko -->
  202. <!-- ko if: $root.job() -->
  203. <!-- ko with: $root.job() -->
  204. <!-- ko if: mainType() == 'jobs' -->
  205. <div data-bind="template: { name: 'job-page' }"></div>
  206. <!-- /ko -->
  207. <!-- ko if: mainType() == 'workflows' -->
  208. <!-- ko if: type() == 'workflow' -->
  209. <div data-bind="template: { name: 'workflow-page' }"></div>
  210. <!-- /ko -->
  211. <!-- ko if: type() == 'workflow-action' -->
  212. <div data-bind="template: { name: 'workflow-action-page' }"></div>
  213. <!-- /ko -->
  214. <!-- /ko -->
  215. <!-- ko if: mainType() == 'schedules' -->
  216. <div data-bind="template: { name: 'schedule-page' }"></div>
  217. <!-- /ko -->
  218. <!-- ko if: mainType() == 'bundles' -->
  219. <div data-bind="template: { name: 'bundle-page' }"></div>
  220. <!-- /ko -->
  221. <!-- ko if: mainType() == 'sla' -->
  222. <div data-bind="template: { name: 'sla-page' }"></div>
  223. <!-- /ko -->
  224. <!-- /ko -->
  225. <!-- /ko -->
  226. <div data-bind="template: { name: 'pagination', data: $root.jobs }, visible: ! $root.job()"></div>
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. <script type="text/html" id="breadcrumbs-icons">
  235. <!-- ko switch: type -->
  236. <!-- ko case: 'workflow' -->
  237. <img src="${ static('oozie/art/icon_oozie_workflow_48.png') }" class="app-icon" alt="${ _('Oozie workflow icon') }"/>
  238. <!-- /ko -->
  239. <!-- ko case: 'workflow-action' -->
  240. <i class="fa fa-fw fa-code-fork"></i>
  241. <!-- /ko -->
  242. <!-- ko case: 'schedule' -->
  243. <img src="${ static('oozie/art/icon_oozie_coordinator_48.png') }" class="app-icon" alt="${ _('Oozie coordinator icon') }"/>
  244. <!-- /ko -->
  245. <!-- ko case: 'bundle' -->
  246. <img src="${ static('oozie/art/icon_oozie_bundle_48.png') }" class="app-icon" alt="${ _('Oozie bundle icon') }"/>
  247. <!-- /ko -->
  248. <!-- /ko -->
  249. </script>
  250. <script type="text/html" id="breadcrumbs">
  251. <h3>
  252. <ul class="inline hue-breadcrumbs-bar" data-bind="foreach: breadcrumbs">
  253. <li>
  254. <!-- ko if: $index() > 0 -->
  255. <span class="divider">&gt;</span>
  256. <!-- /ko -->
  257. <!-- ko if: $index() == 0 -->
  258. <a href="javascript:void(0)" data-bind="text: name, click: function() { $root.selectInterface(name); }" style="text-transform: capitalize"></a>
  259. <!-- /ko -->
  260. <!-- ko if: $index() != 0 -->
  261. <!-- ko if: $index() != $parent.breadcrumbs().length - 1 -->
  262. <a href="javascript:void(0)" data-bind="click: function() { $parent.breadcrumbs.splice($index()); $root.job().id(id); $root.job().fetchJob(); }">
  263. <span data-bind="template: 'breadcrumbs-icons'"></span>
  264. <span data-bind="text: id"></span></a>
  265. <!-- /ko -->
  266. <!-- ko if: $index() == $parent.breadcrumbs().length - 1 -->
  267. <span data-bind="template: 'breadcrumbs-icons'"></span>
  268. <span data-bind="text: id, attr: {title: id}"></span>
  269. <!-- /ko -->
  270. <!-- /ko -->
  271. </li>
  272. </ul>
  273. </h3>
  274. </script>
  275. <script type="text/html" id="pagination">
  276. <!-- ko ifnot: hasPagination -->
  277. <div class="inline">
  278. <span data-bind="text: paginationResultCounts()"></span>
  279. ${ _('jobs') }
  280. </div>
  281. <!-- /ko -->
  282. <!-- ko if: hasPagination -->
  283. <div class="inline">
  284. <div class="inline">
  285. ${ _('Showing') }
  286. <span data-bind="text: Math.min((paginationPage() - 1) * paginationResultPage() + 1, paginationResultCounts())"></span>
  287. ${ _('to')}
  288. <span data-bind="text: Math.min(paginationPage() * paginationResultPage(), paginationResultCounts())"></span>
  289. ${ _('of') }
  290. <span data-bind="text: paginationResultCounts"></span>
  291. ##${ _('Show')}
  292. ##<span data-bind="text: paginationResultPage"></span>
  293. ##${ _('results by page.') }
  294. </div>
  295. <ul class="inline">
  296. <li class="previous-page" data-bind="visible: showPreviousPage">
  297. <a href="javascript:void(0);" data-bind="click: previousPage" title="${_('Previous page')}"><i class="fa fa-backward"></i></a>
  298. </li>
  299. <li class="next-page" data-bind="visible: showNextPage">
  300. <a href="javascript:void(0);" data-bind="click: nextPage" title="${_('Next page')}"><i class="fa fa-forward"></i></a>
  301. </li>
  302. </ul>
  303. </div>
  304. <!-- /ko -->
  305. </script>
  306. <script type="text/html" id="job-page">
  307. <!-- ko if: type() == 'MAPREDUCE' -->
  308. <div data-bind="template: { name: 'job-mapreduce-page', data: $root.job() }"></div>
  309. <!-- /ko -->
  310. <!-- ko if: type() == 'MAP' || type() == 'REDUCE' -->
  311. <div data-bind="template: { name: 'job-mapreduce-task-page', data: $root.job() }"></div>
  312. <!-- /ko -->
  313. <!-- ko if: type() == 'MAP_ATTEMPT' || type() == 'REDUCE_ATTEMPT' -->
  314. <div data-bind="template: { name: 'job-mapreduce-task-attempt-page', data: $root.job() }"></div>
  315. <!-- /ko -->
  316. <!-- ko if: type() == 'YARN' -->
  317. <div data-bind="template: { name: 'job-yarn-page', data: $root.job() }"></div>
  318. <!-- /ko -->
  319. <!-- ko if: type() == 'IMPALA' -->
  320. <div data-bind="template: { name: 'job-impala-page', data: $root.job() }"></div>
  321. <!-- /ko -->
  322. <!-- ko if: type() == 'SPARK' -->
  323. <div data-bind="template: { name: 'job-spark-page', data: $root.job() }"></div>
  324. <!-- /ko -->
  325. </script>
  326. <script type="text/html" id="job-yarn-page">
  327. <h2>YARN</h2>
  328. <br>
  329. ${ _('Id') } <span data-bind="text: id"></span>
  330. ${ _('Name') } <span data-bind="text: name"></span>
  331. ${ _('Type') } <span data-bind="text: type"></span>
  332. ${ _('Status') } <span data-bind="text: status"></span>
  333. ${ _('User') } <span data-bind="text: user"></span>
  334. ${ _('Progress') } <span data-bind="text: progress"></span>
  335. ${ _('Duration') } <span data-bind="text: duration"></span>
  336. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  337. </script>
  338. <script type="text/html" id="job-mapreduce-page">
  339. ${ _('Id') } <span data-bind="text: id"></span>
  340. ${ _('Name') } <span data-bind="text: name"></span>
  341. ${ _('Type') } <span data-bind="text: type"></span>
  342. ${ _('Status') } <span data-bind="text: status"></span>
  343. ${ _('User') } <span data-bind="text: user"></span>
  344. ${ _('Progress') } <span data-bind="text: progress"></span>
  345. ${ _('Duration') } <span data-bind="text: duration"></span>
  346. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  347. <br><br>
  348. <!-- ko with: properties -->
  349. Map <span data-bind="text: maps_percent_complete"></span> <span data-bind="text: finishedMaps"></span> /<span data-bind="text: desiredMaps"></span>
  350. Reduce <span data-bind="text: reduces_percent_complete"></span> <span data-bind="text: finishedReduces"></span> / <span data-bind="text: desiredReduces"></span><br>
  351. Duration <span data-bind="text: $parent.duration"></span><br>
  352. <!-- /ko -->
  353. <br><br>
  354. <div class="progress-job progress active pull-left" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': progress() < 100, 'progress-success': progress() === 100}">
  355. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  356. </div>
  357. <a href="javascript:void(0)" data-bind="click: function() { control('kill'); }">Stop</a>
  358. <ul class="nav nav-tabs margin-top-20">
  359. <li class="active"><a href="#job-mapreduce-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
  360. <li><a href="#job-mapreduce-page-tasks" data-bind="click: function(){ fetchProfile('tasks'); $('a[href=\'#job-mapreduce-page-tasks\']').tab('show'); }">${ _('Tasks') }</a></li>
  361. <li><a href="#job-mapreduce-page-metadata" data-bind="click: function(){ fetchProfile('metadata'); $('a[href=\'#job-mapreduce-page-metadata\']').tab('show'); }">${ _('Metadata') }</a></li>
  362. <li><a href="#job-mapreduce-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
  363. </ul>
  364. <div class="tab-content">
  365. <div class="tab-pane active" id="job-mapreduce-page-logs">
  366. % for name in ['stdout', 'stderr', 'syslog']:
  367. <a href="javascript:void(0)" data-bind="click: function() { fetchLogs('${ name }'); }, text: '${ name }'"></a>
  368. % endfor
  369. <br>
  370. <pre data-bind="html: logs"></pre>
  371. </div>
  372. <div class="tab-pane" id="job-mapreduce-page-tasks">
  373. ${_('Filter')} <input type="text" class="input-xlarge search-query" placeholder="${_('Filter by id, name, user...')}" value="user:${ user.username }">
  374. <span class="btn-group">
  375. <class="btn-group">
  376. <a class="btn btn-status btn-success" data-value="completed">${ _('MAP') }</a>
  377. <a class="btn btn-status btn-warning" data-value="running">${ _('REDUCE') }</a>
  378. </span>
  379. </span>
  380. <div class="btn-toolbar pull-right" style="display: inline; vertical-align: middle; margin-left: 10px; font-size: 12px">
  381. <span class="loader hide"><i class="fa fa-2x fa-spinner fa-spin muted"></i></span>
  382. <button class="btn bulkToolbarBtn bulk-resume" data-operation="resume" title="${ _('Resume selected') }" disabled="disabled" type="button"><i class="fa fa-play"></i><span class="hide-small"> ${ _('View') }</span></button>
  383. </div>
  384. <table class="table table-condensed">
  385. <thead>
  386. <tr>
  387. <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
  388. <th>${_('Type')}</th>
  389. <th>${_('Id')}</th>
  390. <th>${_('elapsedTime')}</th>
  391. <th>${_('progress')}</th>
  392. <th>${_('state')}</th>
  393. <th>${_('startTime')}</th>
  394. <th>${_('successfulAttempt')}</th>
  395. <th>${_('finishTime')}</th>
  396. </tr>
  397. </thead>
  398. <tbody data-bind="foreach: properties['tasks']()['task_list']">
  399. <tr data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }">
  400. <td><div class="hueCheckbox fa"></div></td>
  401. <td data-bind="text: type"></td>
  402. <td data-bind="text: id"></td>
  403. <td data-bind="text: elapsedTime"></td>
  404. <td data-bind="text: progress"></td>
  405. <td data-bind="text: state"></td>
  406. <td data-bind="text: startTime"></td>
  407. <td data-bind="text: successfulAttempt"></td>
  408. <td data-bind="text: finishTime"></td>
  409. </tr>
  410. </tbody>
  411. </table>
  412. </div>
  413. <div class="tab-pane" id="job-mapreduce-page-metadata">
  414. <pre data-bind="text: ko.toJSON(properties['metadata'], null, 2)"></pre>
  415. </div>
  416. <div class="tab-pane" id="job-mapreduce-page-counters">
  417. <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
  418. </div>
  419. </div>
  420. </script>
  421. <script type="text/html" id="job-mapreduce-task-page">
  422. ${ _('Id') } <span data-bind="text: id"></span>
  423. ${ _('Type') } <span data-bind="text: type"></span>
  424. ${ _('progress') } <span data-bind="text: progress"></span>
  425. <br><br>
  426. <!-- ko with: properties -->
  427. ${ _('state') } <span data-bind="text: state"></span>
  428. ${ _('startTime') } <span data-bind="text: startTime"></span>
  429. ${ _('successfulAttempt') } <span data-bind="text: successfulAttempt"></span>
  430. ${ _('finishTime') } <span data-bind="text: finishTime"></span>
  431. ${ _('elapsedTime') } <span data-bind="text: elapsedTime"></span>
  432. <!-- /ko -->
  433. <div class="progress-job progress active pull-left" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': progress() < 100, 'progress-success': progress() === 100}">
  434. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  435. </div>
  436. <ul class="nav nav-tabs margin-top-20">
  437. <li class="active"><a href="#job-mapreduce-task-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
  438. <li><a href="#job-mapreduce-task-page-attempts" data-bind="click: function(){ fetchProfile('attempts'); $('a[href=\'#job-mapreduce-task-page-attempts\']').tab('show'); }">${ _('Attempts') }</a></li>
  439. <li><a href="#job-mapreduce-task-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
  440. </ul>
  441. <div class="tab-content">
  442. <div class="tab-pane active" id="job-mapreduce-task-page-logs">
  443. % for name in ['stdout', 'stderr', 'syslog']:
  444. <a href="javascript:void(0)" data-bind="click: function() { fetchLogs('${ name }'); }, text: '${ name }'"></a>
  445. % endfor
  446. <br>
  447. <pre data-bind="html: logs"></pre>
  448. </div>
  449. <div class="tab-pane" id="job-mapreduce-task-page-attempts">
  450. ${_('Filter')} <input type="text" class="input-xlarge search-query" placeholder="${_('Filter by id, name, user...')}" value="user:${ user.username }">
  451. <span class="btn-group">
  452. <class="btn-group">
  453. <a class="btn btn-status btn-success" data-value="completed">${ _('Succeeded') }</a>
  454. <a class="btn btn-status btn-warning" data-value="running">${ _('Running') }</a>
  455. <a class="btn btn-status btn-danger disable-feedback" data-value="failed">${ _('Failed') }</a>
  456. </span>
  457. </span>
  458. <div class="btn-toolbar pull-right" style="display: inline; vertical-align: middle; margin-left: 10px; font-size: 12px">
  459. <span class="loader hide"><i class="fa fa-2x fa-spinner fa-spin muted"></i></span>
  460. <button class="btn bulkToolbarBtn bulk-resume" data-operation="resume" title="${ _('Resume selected') }" disabled="disabled" type="button"><i class="fa fa-play"></i><span class="hide-small"> ${ _('View') }</span></button>
  461. </div>
  462. <table class="table table-condensed">
  463. <thead>
  464. <tr>
  465. <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
  466. <th>${_('assignedContainerId')}</th>
  467. <th>${_('progress')}</th>
  468. <th>${_('elapsedTime')}</th>
  469. <th>${_('state')}</th>
  470. <th>${_('rack')}</th>
  471. <th>${_('nodeHttpAddress')}</th>
  472. <th>${_('type')}</th>
  473. <th>${_('startTime')}</th>
  474. <th>${_('id')}</th>
  475. <th>${_('finishTime')}</th>
  476. </tr>
  477. </thead>
  478. <tbody data-bind="foreach: properties['attempts']()['task_list']">
  479. <tr data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }">
  480. <td><div class="hueCheckbox fa"></div></td>
  481. <td data-bind="text: assignedContainerId"></td>
  482. <td data-bind="text: progress"></td>
  483. <td data-bind="text: elapsedTime"></td>
  484. <td data-bind="text: state"></td>
  485. <td data-bind="text: rack"></td>
  486. <td data-bind="text: nodeHttpAddress"></td>
  487. <td data-bind="text: type"></td>
  488. <td data-bind="text: startTime"></td>
  489. <td data-bind="text: id"></td>
  490. <td data-bind="text: finishTime"></td>
  491. </tr>
  492. </tbody>
  493. </table>
  494. </div>
  495. <div class="tab-pane" id="job-mapreduce-task-page-counters">
  496. <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
  497. </div>
  498. </div>
  499. </script>
  500. <script type="text/html" id="job-mapreduce-task-attempt-page">
  501. ${ _('Id') } <span data-bind="text: id"></span>
  502. ${ _('progress') } <span data-bind="text: progress"></span>
  503. ${ _('type') } <span data-bind="text: type"></span>
  504. <br><br>
  505. <!-- ko with: properties -->
  506. ${ _('assignedContainerId') } <span data-bind="text: assignedContainerId"></span>
  507. ${ _('elapsedTime') } <span data-bind="text: elapsedTime"></span>
  508. ${ _('rack') } <span data-bind="text: rack"></span>
  509. ${ _('nodeHttpAddress') } <span data-bind="text: nodeHttpAddress"></span>
  510. ${ _('state') } <span data-bind="text: state"></span>
  511. ${ _('startTime') } <span data-bind="text: startTime"></span>
  512. ${ _('finishTime') } <span data-bind="text: finishTime"></span>
  513. <!-- /ko -->
  514. <div class="progress-job progress active pull-left" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': progress() < 100, 'progress-success': progress() === 100}">
  515. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  516. </div>
  517. <ul class="nav nav-tabs margin-top-20">
  518. <li class="active"><a href="#job-mapreduce-task-attempt-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
  519. <li><a href="#job-mapreduce-task-attempt-page-counters" data-bind="click: function(){ fetchProfile('counters'); $('a[href=\'#job-mapreduce-task-attempt-page-counters\']').tab('show'); }">${ _('Counters') }</a></li>
  520. </ul>
  521. <div class="tab-content">
  522. <div class="tab-pane active" id="job-mapreduce-task-attempt-page-logs">
  523. <ul class="nav nav-tabs">
  524. <li class="active"><a href="#job-mapreduce-task-attempt-page-logs-attempts" data-toggle="tab">${ _('Attempts') }</a></li>
  525. <li><a href="#job-mapreduce-task-attempt-page-logs-container" data-toggle="tab">${ _('Container') }</a></li>
  526. </ul>
  527. <div class="tab-content">
  528. <div class="tab-pane active" id="job-mapreduce-task-attempt-page-logs-attempts">
  529. % for name in ['stdout', 'stderr', 'syslog']:
  530. <a href="javascript:void(0)" data-bind="click: function() { fetchLogs('${ name }'); }, text: '${ name }'"></a>
  531. % endfor
  532. <br>
  533. <pre data-bind="html: logs"></pre>
  534. </div>
  535. <div class="tab-pane" id="job-mapreduce-task-attempt-page-logs-container">
  536. % for name in ['stdout', 'stderr', 'syslog']:
  537. <a href="javascript:void(0)" data-bind="click: function() { fetchLogs('${ name }'); }, text: '${ name }'"></a>
  538. % endfor
  539. <br>
  540. <pre data-bind="html: logs"></pre>
  541. </div>
  542. </div>
  543. </div>
  544. <div class="tab-pane" id="job-mapreduce-task-attempt-page-counters">
  545. <pre data-bind="text: ko.toJSON(properties['counters'], null, 2)"></pre>
  546. </div>
  547. </div>
  548. </script>
  549. <script type="text/html" id="job-impala-page">
  550. <h2>Impala</h2>
  551. <br>
  552. ${ _('Id') } <span data-bind="text: id"></span>
  553. ${ _('Name') } <span data-bind="text: name"></span>
  554. ${ _('Type') } <span data-bind="text: type"></span>
  555. ${ _('Status') } <span data-bind="text: status"></span>
  556. ${ _('User') } <span data-bind="text: user"></span>
  557. ${ _('Progress') } <span data-bind="text: progress"></span>
  558. ${ _('Duration') } <span data-bind="text: duration"></span>
  559. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  560. </script>
  561. <script type="text/html" id="job-spark-page">
  562. ${ _('Id') } <span data-bind="text: id"></span>
  563. ${ _('Name') } <span data-bind="text: name"></span>
  564. ${ _('Type') } <span data-bind="text: type"></span>
  565. ${ _('Status') } <span data-bind="text: status"></span>
  566. ${ _('User') } <span data-bind="text: user"></span>
  567. ${ _('Progress') } <span data-bind="text: progress"></span>
  568. ${ _('Duration') } <span data-bind="text: duration"></span>
  569. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  570. </script>
  571. <script type="text/html" id="workflow-page">
  572. ${ _('Id') } <span data-bind="text: id"></span>
  573. ${ _('Name') } <span data-bind="text: name"></span>
  574. ${ _('Type') } <span data-bind="text: type"></span>
  575. ${ _('Status') } <span data-bind="text: status"></span>
  576. ${ _('User') } <span data-bind="text: user"></span>
  577. ${ _('Progress') } <span data-bind="text: progress"></span>
  578. ${ _('Duration') } <span data-bind="text: duration"></span>
  579. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  580. <br><br>
  581. Variables, Workspace<br>
  582. Duration 8s<br>
  583. <br><br>
  584. <div class="progress-job progress active pull-left" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': progress() < 100, 'progress-success': progress() === 100}">
  585. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  586. </div>
  587. <a href="javascript:void(0)" data-bind="click: function() { control('kill'); }">${ _('Stop') }</a> |
  588. <a href="javascript:void(0)" data-bind="click: function() { control('resume'); }">${ _('Resume')}</a> |
  589. <a href="javascript:void(0)" data-bind="click: function() { control('rerun'); }">${ _('Rerun') }</a>
  590. <ul class="nav nav-tabs margin-top-20">
  591. <li class="active"><a href="#workflow-page-graph" data-toggle="tab">${ _('Graph') }</a></li>
  592. <li><a href="#workflow-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
  593. <li><a href="#workflow-page-tasks" data-toggle="tab">${ _('Tasks') }</a></li>
  594. <li><a href="#workflow-page-metadata" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#workflow-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
  595. <li><a href="#workflow-page-xml" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#workflow-page-xml\']').tab('show'); }">${ _('XML') }</a></li>
  596. </ul>
  597. <div class="tab-content">
  598. <div class="tab-pane active" id="workflow-page-graph">
  599. </div>
  600. <div class="tab-pane" id="workflow-page-logs">
  601. <pre data-bind="html: logs"></pre>
  602. </div>
  603. <div class="tab-pane" id="workflow-page-tasks">
  604. <table id="jobsTable" class="datatables table table-condensed">
  605. <thead>
  606. <tr>
  607. <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
  608. <th>${_('log')}</th>
  609. <th>${_('status')}</th>
  610. <th>${_('errorMessage')}</th>
  611. <th>${_('errorCode')}</th>
  612. <th>${_('externalId')}</th>
  613. <th>${_('id')}</th>
  614. <th>${_('startTime')}</th>
  615. <th>${_('endTime')}</th>
  616. </tr>
  617. </thead>
  618. <tbody data-bind="foreach: properties['actions']">
  619. <tr data-bind="click: function() { $root.job().id(id); $root.job().fetchJob(); }">
  620. <td><div class="hueCheckbox fa"></div></td>
  621. <td data-bind="text: 'logs'"></td>
  622. <td data-bind="text: status"></td>
  623. <td data-bind="text: errorMessage"></td>
  624. <td data-bind="text: errorCode"></td>
  625. <td data-bind="text: externalId"></td>
  626. <td data-bind="text: id"></td>
  627. <td data-bind="text: startTime"></td>
  628. <td data-bind="text: endTime"></td>
  629. </tr>
  630. </tbody>
  631. </table>
  632. </div>
  633. <div class="tab-pane" id="workflow-page-metadata">
  634. <pre data-bind="text: ko.toJSON(properties['properties'], null, 2)"></pre>
  635. </div>
  636. <div class="tab-pane" id="workflow-page-xml">
  637. <div data-bind="readonlyXML: properties['xml'], path: 'xml'"></div>
  638. </div>
  639. </div>
  640. </script>
  641. <script type="text/html" id="workflow-action-page">
  642. ${ _('Id') } <span data-bind="text: id"></span>
  643. ${ _('Name') } <span data-bind="text: name"></span>
  644. ${ _('Type') } <span data-bind="text: type"></span>
  645. ${ _('Status') } <span data-bind="text: status"></span>
  646. ${ _('User') } <span data-bind="text: user"></span>
  647. ${ _('Progress') } <span data-bind="text: progress"></span>
  648. ${ _('Duration') } <span data-bind="text: duration"></span>
  649. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  650. <br><br>
  651. Job ID ....<br>
  652. Duration 8s<br>
  653. <br><br>
  654. Log (if external id) | Child jobs
  655. </script>
  656. <script type="text/html" id="schedule-page">
  657. ${ _('Id') } <span data-bind="text: id"></span>
  658. ${ _('Name') } <span data-bind="text: name"></span>
  659. ${ _('Type') } <span data-bind="text: type"></span>
  660. ${ _('Status') } <span data-bind="text: status"></span>
  661. ${ _('User') } <span data-bind="text: user"></span>
  662. ${ _('Progress') } <span data-bind="text: progress"></span>
  663. ${ _('Duration') } <span data-bind="text: duration"></span>
  664. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  665. <br><br>
  666. Variables, Workspace<br>
  667. Duration 8s<br>
  668. nextTime<span data-bind="text: properties['nextTime']"></span><br>
  669. total_actions<span data-bind="text: properties['total_actions']"></span><br>
  670. endTime<span data-bind="text: properties['endTime']"></span><br>
  671. <br><br>
  672. <div class="progress-job progress active pull-left" style="background-color: #FFF; width: 100%" data-bind="css: {'progress-warning': progress() < 100, 'progress-success': progress() === 100}">
  673. <div class="bar" data-bind="style: {'width': progress() + '%'}"></div>
  674. </div>
  675. <a href="javascript:void(0)" data-bind="click: function() { control('kill'); }">${ _('Stop') }</a> |
  676. <a href="javascript:void(0)" data-bind="click: function() { control('resume'); }">${ _('Resume')}</a> |
  677. <a href="javascript:void(0)" data-bind="click: function() { control('rerun'); }">${ _('Rerun') }</a>
  678. <br>
  679. <ul class="nav nav-tabs">
  680. <li class="active"><a href="#schedule-page-calendar" data-toggle="tab">${ _('Calendar') }</a></li>
  681. <li><a href="#schedule-page-logs" data-toggle="tab">${ _('Logs') }</a></li>
  682. <li><a href="#schedule-page-tasks" data-toggle="tab">${ _('Tasks') }</a></li>
  683. <li><a href="#schedule-page-metadata" data-bind="click: function(){ fetchProfile('properties'); $('a[href=\'#schedule-page-metadata\']').tab('show'); }">${ _('Properties') }</a></li>
  684. <li><a href="#schedule-page-xml" data-bind="click: function(){ fetchProfile('xml'); $('a[href=\'#schedule-page-xml\']').tab('show'); }">${ _('XML') }</a></li>
  685. </ul>
  686. <div class="tab-content">
  687. <div class="tab-pane active" id="schedule-page-calendar">
  688. <pre data-bind="text: ko.toJSON(properties['actions'], null, 2)"></pre>
  689. </div>
  690. <div class="tab-pane" id="schedule-page-logs">
  691. <pre data-bind="html: logs"></pre>
  692. </div>
  693. <div class="tab-pane" id="schedule-page-tasks">
  694. <table id="jobsTable" class="datatables table table-condensed">
  695. <thead>
  696. <tr>
  697. <th width="1%"><div class="select-all hueCheckbox fa"></div></th>
  698. <th>${_('Status')}</th>
  699. <th>${_('Title')}</th>
  700. <th>${_('type')}</th>
  701. <th>${_('errorMessage')}</th>
  702. <th>${_('missingDependencies')}</th>
  703. <th>${_('number')}</th>
  704. <th>${_('errorCode')}</th>
  705. <th>${_('externalId')}</th>
  706. <th>${_('id')}</th>
  707. <th>${_('lastModifiedTime')}</th>
  708. </tr>
  709. </thead>
  710. <tbody data-bind="foreach: properties['actions']">
  711. <tr data-bind="click: function() { if (externalId()) { $root.job().id(externalId()); $root.job().fetchJob();} }">
  712. <td><div class="hueCheckbox fa"></div></td>
  713. <td data-bind="text: status"></td>
  714. <td data-bind="text: title"></td>
  715. <td data-bind="text: type"></td>
  716. <td data-bind="text: errorMessage"></td>
  717. <td data-bind="text: missingDependencies"></td>
  718. <td data-bind="text: number"></td>
  719. <td data-bind="text: errorCode"></td>
  720. <td data-bind="text: externalId"></td>
  721. <td data-bind="text: id"></td>
  722. <td data-bind="text: lastModifiedTime"></td>
  723. </tr>
  724. </tbody>
  725. </table>
  726. </div>
  727. <div class="tab-pane" id="schedule-page-metadata">
  728. <pre data-bind="text: ko.toJSON(properties['properties'], null, 2)"></pre>
  729. </div>
  730. <div class="tab-pane" id="schedule-page-xml">
  731. <div data-bind="readonlyXML: properties['xml'], path: 'xml'"></div>
  732. </div>
  733. </div>
  734. </script>
  735. <script type="text/html" id="bundle-page">
  736. ${ _('Id') } <span data-bind="text: id"></span>
  737. ${ _('Name') } <span data-bind="text: name"></span>
  738. ${ _('Type') } <span data-bind="text: type"></span>
  739. ${ _('Status') } <span data-bind="text: status"></span>
  740. ${ _('User') } <span data-bind="text: user"></span>
  741. ${ _('Progress') } <span data-bind="text: progress"></span>
  742. ${ _('Duration') } <span data-bind="text: duration"></span>
  743. ${ _('Submitted') } <span data-bind="text: submitted"></span>
  744. </script>
  745. <script type="text/html" id="slas-page">
  746. <div class="container-fluid">
  747. <div class="card card-small">
  748. <div class="card-body">
  749. <p>
  750. <div class="search-something center empty-wrapper">
  751. <a href="http://gethue.com/hadoop-tutorial-monitor-and-get-alerts-for-your-workflows-with-the-oozie-slas/" target="_blank" title="${ _('Click to learn more') }">
  752. <i class="fa fa-exclamation"></i>
  753. </a>
  754. <h1>${_('Oozie is not setup to create SLAs')}</h1>
  755. <br/>
  756. </div>
  757. </p>
  758. </div>
  759. <h1 class="card-heading simple">
  760. <div class="pull-left" style="margin-right: 20px;margin-top: 2px">${_('Search')}</div>
  761. <form class="form-inline" id="searchForm" method="GET" action="." style="margin-bottom: 4px">
  762. <label>
  763. ${_('Name or Id')}
  764. <input type="text" name="job_name" class="searchFilter input-xlarge search-query" placeholder="${_('Job Name or Id (required)')}">
  765. </label>
  766. <span style="padding-left:25px">
  767. <label class="label-with-margin">
  768. ${ _('Start') }
  769. <input type="text" name="start_0" class="input-small date" value="" placeholder="${_('Date in GMT')}" data-bind="enable: useDates">
  770. <input type="text" name="start_1" class="input-small time" value="" data-bind="enable: useDates">
  771. </label>
  772. <label>
  773. ${ _('End') }
  774. <input type="text" name="end_0" class="input-small date" value="" placeholder="${_('Date in GMT')}" data-bind="enable: useDates">
  775. <input type="text" name="end_1" class="input-small time" value="" data-bind="enable: useDates">
  776. </label>
  777. </span>
  778. <label class="checkbox label-with-margin">
  779. <input type="checkbox" name="useDates" class="searchFilter" data-bind="checked: useDates, click: performSearch()">
  780. ${ _('Date filter') }
  781. </label>
  782. </form>
  783. </h1>
  784. <div class="card-body">
  785. <p>
  786. <div class="loader hide" style="text-align: center;margin-top: 20px">
  787. <i class="fa fa-spinner fa-spin big-spinner"></i>
  788. </div>
  789. <div class="search-something center empty-wrapper">
  790. <i class="fa fa-search"></i>
  791. <h1>${_('Use the form above to search for SLAs.')}</h1>
  792. <br/>
  793. </div>
  794. <div class="no-results center empty-wrapper hide">
  795. <h1>${_('The server returned no results.')}</h1>
  796. <br/>
  797. </div>
  798. <div class="results hide">
  799. <ul class="nav nav-tabs">
  800. <li class="active"><a href="#slaListTab" data-toggle="tab">${ _('List') }</a></li>
  801. <li><a href="#chartTab" data-toggle="tab">${ _('Chart') }</a></li>
  802. </ul>
  803. <div class="tab-content" style="padding-bottom:200px">
  804. <div class="tab-pane active" id="slaListTab">
  805. <div class="tabbable">
  806. <div class="tab-content">
  807. <table id="slaTable" class="table table-striped table-condensed">
  808. <thead>
  809. <th>${_('Status')}</th>
  810. <th>${_('Name')}</th>
  811. <th>${_('Type')}</th>
  812. <th>${_('ID')}</th>
  813. <th>${_('Nominal Time')}</th>
  814. <th>${_('Expected Start')}</th>
  815. <th>${_('Actual Start')}</th>
  816. <th>${_('Expected End')}</th>
  817. <th>${_('Actual End')}</th>
  818. <th>${_('Expected Duration')}</th>
  819. <th>${_('Actual Duration')}</th>
  820. <th>${_('Job Status')}</th>
  821. <th>${_('User')}</th>
  822. <th>${_('Last Modified')}</th>
  823. </thead>
  824. <tbody>
  825. </tbody>
  826. </table>
  827. </div>
  828. </div>
  829. </div>
  830. <div class="tab-pane" id="chartTab" style="padding-left: 20px">
  831. <div id="yAxisLabel" class="hide">${_('Time since Nominal Time in min')}</div>
  832. <div id="slaChart"></div>
  833. </div>
  834. </div>
  835. </div>
  836. </p>
  837. </div>
  838. </div>
  839. </div>
  840. </script>
  841. <script type="text/javascript">
  842. (function () {
  843. /**
  844. var Workflow = function(vm, job) {
  845. var lastPosition = {
  846. top: 0,
  847. left: 0
  848. }
  849. var updateArrowPosition = function () {
  850. huePubSub.publish('draw.graph.arrows');
  851. if ($('canvas').position().top !== lastPosition.top && $('canvas').position().left !== lastPosition.left) {
  852. lastPosition = $('canvas').position();
  853. window.setTimeout(updateArrowPosition, 100);
  854. }
  855. }
  856. var arrowsPolling = function () {
  857. if ($('#workflow-page-graph').is(':visible')){
  858. window.setTimeout(arrowsPolling, 100);
  859. }
  860. else {
  861. $('canvas').remove();
  862. }
  863. }
  864. $('canvas').remove();
  865. if (vm.job().type() === 'workflow') {
  866. $('#workflow-page-graph').empty();
  867. $.ajax({
  868. url: "/oozie/list_oozie_workflow/" + vm.job().id(),
  869. data: {
  870. 'graph': true,
  871. 'element': 'workflow-page-graph'
  872. },
  873. beforeSend: function (xhr) {
  874. xhr.setRequestHeader("X-Requested-With", "Hue");
  875. },
  876. dataType: "html",
  877. success: function (response) {
  878. $('#workflow-page-graph').html(response);
  879. updateArrowPosition();
  880. arrowsPolling();
  881. }
  882. });
  883. }
  884. }
  885. */
  886. var Job = function (vm, job) {
  887. var self = this;
  888. self.id = ko.observableDefault(job.id);
  889. self.name = ko.observableDefault(job.name);
  890. self.type = ko.observableDefault(job.type);
  891. self.status = ko.observableDefault(job.status);
  892. self.apiStatus = ko.observableDefault(job.apiStatus);
  893. self.progress = ko.observableDefault(job.progress);
  894. self.checkStatusTimeout = null;
  895. self.user = ko.observableDefault(job.user);
  896. self.cluster = ko.observableDefault(job.cluster);
  897. self.duration = ko.observableDefault(job.duration);
  898. self.submitted = ko.observableDefault(job.submitted);
  899. self.logs = ko.observable('');
  900. //self.coordVM = new RunningCoordinatorModel([]);
  901. self.properties = ko.mapping.fromJS(job.properties || {});
  902. self.mainType = ko.observable(vm.interface());
  903. self.loadingJob = ko.observable(false);
  904. // _fetchJob(callback)
  905. // fetchJob
  906. // updateJob
  907. self.fetchJob = function () {
  908. self.loadingJob(true);
  909. if (self.checkStatusTimeout != null) {
  910. clearTimeout(self.checkStatusTimeout);
  911. self.checkStatusTimeout = null;
  912. }
  913. var interface = vm.interface();
  914. if (/oozie-oozi-W/.test(self.id())) {
  915. interface = 'workflows';
  916. }
  917. else if (/oozie-oozi-C/.test(self.id())) {
  918. interface = 'schedules';
  919. }
  920. else if (/oozie-oozi-B/.test(self.id())) {
  921. interface = 'bundles';
  922. }
  923. $.post("/jobbrowser/api/job", {
  924. app_id: ko.mapping.toJSON(self.id),
  925. interface: ko.mapping.toJSON(interface)
  926. }, function (data) {
  927. if (data.status == 0) {
  928. vm.interface(interface);
  929. vm.job(new Job(vm, data.app));
  930. hueUtils.changeURL('#!' + vm.job().id());
  931. var crumbs = [];
  932. if (/^attempt_/.test(vm.job().id())) {
  933. crumbs.push({'id': vm.job().properties['app_id'], 'name': vm.job().properties['app_id'], 'type': 'app'});
  934. crumbs.push({'id': vm.job().properties['task_id'], 'name': vm.job().properties['task_id'], 'type': 'task'});
  935. }
  936. if (/^task_/.test(vm.job().id())) {
  937. crumbs.push({'id': vm.job().properties['app_id'], 'name': vm.job().properties['app_id'], 'type': 'app'});
  938. }
  939. if (/-oozie-oozi-W@/.test(vm.job().id())) {
  940. crumbs.push({'id': vm.job().properties['workflow_id'], 'name': vm.job().properties['workflow_id'], 'type': 'workflow'});
  941. }
  942. else if (/-oozie-oozi-W/.test(vm.job().id())) {
  943. if (vm.job().properties['bundle_id']()) {
  944. crumbs.push({'id': vm.job().properties['bundle_id'](), 'name': vm.job().properties['bundle_id'](), 'type': 'bundle'});
  945. }
  946. if (vm.job().properties['coordinator_id']()) {
  947. crumbs.push({'id': vm.job().properties['coordinator_id'](), 'name': vm.job().properties['coordinator_id'](), 'type': 'schedule'});
  948. }
  949. }
  950. else if (/-oozie-oozi-C/.test(vm.job().id())) {
  951. if (vm.job().properties['bundle_id']()) {
  952. crumbs.push({'id': vm.job().properties['bundle_id'](), 'name': vm.job().properties['bundle_id'](), 'type': 'bundle'});
  953. }
  954. }
  955. crumbs.push({'id': vm.job().id(), 'name': vm.job().name(), 'type': vm.job().type()});
  956. vm.resetBreadcrumbs(crumbs);
  957. vm.job().fetchLogs();
  958. vm.job().fetchStatus();
  959. //if (self.mainType() == 'schedules') {
  960. //vm.job().coordVM.setActions(data.app.actions);
  961. //}
  962. } else {
  963. $(document).trigger("error", data.message);
  964. }
  965. }).always(function () {
  966. self.loadingJob(false);
  967. });
  968. };
  969. self.fetchLogs = function (name) {
  970. $.post("/jobbrowser/api/job/logs", {
  971. app_id: ko.mapping.toJSON(self.id),
  972. interface: ko.mapping.toJSON(vm.interface),
  973. type: ko.mapping.toJSON(self.type),
  974. name: ko.mapping.toJSON(name ? name : 'default')
  975. }, function (data) {
  976. if (data.status == 0) {
  977. self.logs(data.logs.logs)
  978. } else {
  979. $(document).trigger("error", data.message);
  980. }
  981. }).always(function () {
  982. });
  983. };
  984. self.fetchProfile = function (name) {
  985. $.post("/jobbrowser/api/job/profile", {
  986. app_id: ko.mapping.toJSON(self.id),
  987. interface: ko.mapping.toJSON(vm.interface),
  988. app_type: ko.mapping.toJSON(self.type),
  989. app_property: ko.mapping.toJSON(name)
  990. }, function (data) {
  991. if (data.status == 0) {
  992. self.properties[name](data[name]);
  993. } else {
  994. $(document).trigger("error", data.message);
  995. }
  996. }).always(function () {
  997. });
  998. };
  999. self.fetchStatus = function () {
  1000. if (self.apiStatus() != 'RUNNING') {
  1001. return;
  1002. }
  1003. $.post("/jobbrowser/api/job", {
  1004. app_id: ko.mapping.toJSON(self.id),
  1005. interface: ko.mapping.toJSON(self.mainType)
  1006. }, function (data) {
  1007. if (data.status == 0) {
  1008. self.status(data.app.status);
  1009. self.apiStatus(data.app.apiStatus);
  1010. self.progress(data.app.progress);
  1011. if (self.apiStatus() == 'RUNNING') {
  1012. self.checkStatusTimeout = setTimeout(self.fetchStatus, 2000);
  1013. }
  1014. } else {
  1015. $(document).trigger("error", data.message);
  1016. }
  1017. });
  1018. };
  1019. self.control = function (action) {
  1020. $.post("/jobbrowser/api/job/action", {
  1021. app_id: ko.mapping.toJSON(self.id),
  1022. interface: ko.mapping.toJSON(vm.interface),
  1023. app_type: ko.mapping.toJSON(self.type),
  1024. operation: ko.mapping.toJSON({action: action})
  1025. }, function (data) {
  1026. if (data.status == 0) {
  1027. $(document).trigger("info", data.message);
  1028. } else {
  1029. $(document).trigger("error", data.message);
  1030. }
  1031. }).always(function () {
  1032. });
  1033. };
  1034. };
  1035. var Jobs = function (vm) {
  1036. var self = this;
  1037. self.apps = ko.observableArray().extend({ rateLimit: 50 });
  1038. self.totalApps = ko.observable(null);
  1039. self.runningApps = ko.computed(function(job) {
  1040. return $.grep(self.apps(), function(job) { return job.apiStatus() == 'RUNNING'; });
  1041. });
  1042. self.finishedApps = ko.computed(function(job) {
  1043. return $.grep(self.apps(), function(job) { return job.apiStatus() == 'FINISHED'; });
  1044. });
  1045. self.loadingJobs = ko.observable(false);
  1046. self.textFilter = ko.observable('user:${ user.username } ').extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 1000 } });
  1047. self.statesFilter = ko.observable('');
  1048. self.statesValuesFilter = ko.observable([
  1049. {'value': 'completed', 'name': '${_("Succeeded")}'},
  1050. {'value': 'running', 'name': '${_("Running")}'},
  1051. {'value': 'failed', 'name': '${_("Failed")}'},
  1052. ]);
  1053. self.timeValueFilter = ko.observable(7).extend({ throttle: 500 });
  1054. self.timeUnitFilter = ko.observable('days').extend({ throttle: 500 });
  1055. self.timeUnitFilterUnits = ko.observable([
  1056. {'value': 'days', 'name': '${_("days")}'},
  1057. {'value': 'hours', 'name': '${_("hours")}'},
  1058. {'value': 'minutes', 'name': '${_("minutes")}'},
  1059. ]);
  1060. self.hasPagination = ko.computed(function() {
  1061. return ['workflows', 'schedules', 'bundles'].indexOf(vm.interface()) != -1;
  1062. });
  1063. self.paginationPage = ko.observable(1);
  1064. self.paginationOffset = ko.observable(1);
  1065. self.paginationResultPage = ko.observable(100);
  1066. self.paginationResultCounts = ko.computed(function() {
  1067. return self.apps().length;
  1068. });
  1069. self.pagination = ko.computed(function() {
  1070. return {
  1071. 'page': self.paginationPage(),
  1072. 'offset': self.paginationOffset(),
  1073. 'limit': self.paginationResultPage()
  1074. };
  1075. });
  1076. self.showPreviousPage = ko.computed(function() {
  1077. return self.paginationOffset() > 1;
  1078. });
  1079. self.showNextPage = ko.computed(function() {
  1080. return self.totalApps() != null && (self.paginationOffset() + self.paginationResultPage()) < self.totalApps();
  1081. });
  1082. self.previousPage = function() {
  1083. self.paginationOffset(self.paginationOffset() - self.paginationResultPage());
  1084. };
  1085. self.nextPage = function() {
  1086. self.paginationOffset(self.paginationOffset() + self.paginationResultPage());
  1087. };
  1088. self.filters = ko.computed(function() {
  1089. return [
  1090. {'text': self.textFilter()},
  1091. {'time': {'time_value': self.timeValueFilter(), 'time_unit': self.timeUnitFilter()}},
  1092. {'states': self.statesFilter()},
  1093. {'pagination': self.pagination()},
  1094. ];
  1095. });
  1096. self.filters.subscribe(function(value) {
  1097. self.fetchJobs();
  1098. });
  1099. self._fetchJobs = function (callback) {
  1100. return $.post("/jobbrowser/api/jobs", {
  1101. interface: ko.mapping.toJSON(vm.interface),
  1102. filters: ko.mapping.toJSON(self.filters),
  1103. }, function (data) {
  1104. if (data.status == 0) {
  1105. if (callback) {
  1106. callback(data);
  1107. };
  1108. } else {
  1109. $(document).trigger("error", data.message);
  1110. }
  1111. });
  1112. };
  1113. var lastFetchJobsRequest = null;
  1114. self.fetchJobs = function () {
  1115. vm.apiHelper.cancelActiveRequest(lastFetchJobsRequest);
  1116. self.loadingJobs(true);
  1117. vm.job(null);
  1118. lastFetchJobsRequest = self._fetchJobs(function(data) {
  1119. var apps = [];
  1120. if (data && data.apps) {
  1121. data.apps.forEach(function (job) {
  1122. apps.push(new Job(vm, job));
  1123. });
  1124. }
  1125. self.apps(apps);
  1126. self.totalApps(data.total);
  1127. }).always(function () {
  1128. self.loadingJobs(false);
  1129. });
  1130. }
  1131. var lastUpdateJobsRequest = null;
  1132. self.updateJobs = function () {
  1133. vm.apiHelper.cancelActiveRequest(lastUpdateJobsRequest);
  1134. lastFetchJobsRequest = self._fetchJobs(function(data) {
  1135. var apps = [];
  1136. if (data && data.apps) {
  1137. var i = 0, j = 0;
  1138. var newJobs = [];
  1139. while (i < self.apps().length && j < data.apps.length) {
  1140. if (self.apps()[i].id() != data.apps[j].id) {
  1141. // New Job
  1142. newJobs.push(new Job(vm, data.apps[j]));
  1143. j++;
  1144. } else {
  1145. // Updated jobs
  1146. if (self.apps()[i].status() != data.apps[j].status) {
  1147. self.apps()[i].status(data.apps[j].status);
  1148. self.apps()[i].apiStatus(data.apps[j].apiStatus);
  1149. }
  1150. i++;
  1151. j++;
  1152. }
  1153. }
  1154. if (i < self.apps().length) {
  1155. self.apps().splice(i, self.apps().length - i);
  1156. }
  1157. newJobs.forEach(function (job) {
  1158. self.apps.push(job);
  1159. });
  1160. self.totalApps(data.total);
  1161. }
  1162. });
  1163. };
  1164. self.control = function (action) {
  1165. $.post("/jobbrowser/api/job/action", {
  1166. app_id: ko.mapping.toJSON(self.id), // CSV list
  1167. interface: ko.mapping.toJSON(vm.interface),
  1168. operation: ko.mapping.toJSON({action: action})
  1169. }, function (data) {
  1170. if (data.status == 0) {
  1171. $(document).trigger("info", data.message);
  1172. } else {
  1173. $(document).trigger("error", data.message);
  1174. }
  1175. }).always(function () {
  1176. });
  1177. };
  1178. };
  1179. var JobBrowserViewModel = function (RunningCoordinatorModel) {
  1180. var self = this;
  1181. self.apiHelper = ApiHelper.getInstance();
  1182. self.assistAvailable = ko.observable(true);
  1183. self.isLeftPanelVisible = ko.observable();
  1184. self.apiHelper.withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
  1185. self.interface = ko.observable('jobs');
  1186. self.selectInterface = function(interface) {
  1187. self.interface(interface);
  1188. self.resetBreadcrumbs();
  1189. hueUtils.changeURL('#!' + interface);
  1190. self.jobs.fetchJobs();
  1191. self.job(null);
  1192. };
  1193. self.jobs = new Jobs(self);
  1194. self.job = ko.observable();
  1195. var clock;
  1196. self.job.subscribe(function(val) {
  1197. if (! val) {
  1198. clock = setInterval(self.jobs.updateJobs, 5000);
  1199. } else {
  1200. if (clock) {
  1201. clearInterval(clock);
  1202. }
  1203. }
  1204. });
  1205. self.breadcrumbs = ko.observableArray([]);
  1206. self.resetBreadcrumbs = function(extraCrumbs) {
  1207. var crumbs = [{'id': '', 'name': self.interface(), 'type': self.interface()}]
  1208. if (extraCrumbs) {
  1209. crumbs = crumbs.concat(extraCrumbs);
  1210. }
  1211. self.breadcrumbs(crumbs);
  1212. }
  1213. self.resetBreadcrumbs();
  1214. };
  1215. var viewModel;
  1216. huePubSub.subscribe('oozie.action.logs.click', function (widget) {
  1217. viewModel.job().id(widget.externalId());
  1218. viewModel.job().fetchJob();
  1219. });
  1220. huePubSub.subscribe('oozie.action.click', function (widget) {
  1221. viewModel.job().id(widget.externalId());
  1222. viewModel.job().fetchJob();
  1223. });
  1224. $(document).ready(function () {
  1225. viewModel = new JobBrowserViewModel(RunningCoordinatorModel);
  1226. % if not is_mini:
  1227. ko.applyBindings(viewModel, $('#jobbrowserComponents')[0]);
  1228. % else:
  1229. ko.applyBindings(viewModel, $('#jobbrowserMiniComponents')[0]);
  1230. % endif
  1231. var loadHash = function () {
  1232. var h = window.location.hash;
  1233. if (h.indexOf('#!') === 0) {
  1234. h = h.substr(2);
  1235. }
  1236. switch (h) {
  1237. case '':
  1238. break;
  1239. case 'jobs':
  1240. case 'workflows':
  1241. case 'schedules':
  1242. case 'bundles':
  1243. viewModel.selectInterface(h);
  1244. break;
  1245. default:
  1246. new Job(viewModel, {id: h}).fetchJob();
  1247. }
  1248. };
  1249. window.onhashchange = function () {
  1250. loadHash();
  1251. }
  1252. loadHash();
  1253. console.log('JB2 ready Triggered');
  1254. });
  1255. })();
  1256. </script>
  1257. </span>
  1258. % if not is_embeddable:
  1259. ${ commonfooter(request, messages) | n,unicode }
  1260. % endif