job_browser.mako 61 KB

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