jobs.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  6. <meta charset="UTF-8">
  7. <title>Cluster Jobs</title>
  8. <script src="../../script/jquery.min.js"></script>
  9. <script src="../../script/ao_module.js"></script>
  10. <script src="../../script/applocale.js"></script>
  11. <script src="../cluster/cluster.common.js"></script>
  12. <style>
  13. :where(#cj-root, #cj-root *) { box-sizing: border-box; margin: 0; padding: 0; }
  14. #cj-root {
  15. --cj-bg:#f5f5f7; --cj-card:#ffffff; --cj-head:#fafafa; --cj-border:rgba(0,0,0,0.08);
  16. --cj-text:#1d1d1f; --cj-dim:#6e6e73; --cj-muted:#98989d; --cj-accent:#0071e3;
  17. --cj-success:#34c759; --cj-warn:#ff9f0a; --cj-danger:#ff3b30; --cj-hover:rgba(0,0,0,0.04);
  18. --cj-input:#ffffff; --cj-chip:rgba(0,113,227,0.10);
  19. --cj-shadow:0 1px 4px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.06);
  20. font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  21. font-size:14px; -webkit-font-smoothing:antialiased; color:var(--cj-text);
  22. background:var(--cj-bg); padding:20px; min-height:100vh;
  23. }
  24. #cj-root.dark {
  25. --cj-bg:#1f1f1f; --cj-card:#2c2c2e; --cj-head:#232325; --cj-border:rgba(255,255,255,0.09);
  26. --cj-text:#f2f2f7; --cj-dim:#aeaeb2; --cj-muted:#636366; --cj-accent:#2997ff;
  27. --cj-success:#30d158; --cj-warn:#ffd60a; --cj-danger:#ff453a; --cj-hover:rgba(255,255,255,0.05);
  28. --cj-input:#1c1c1e; --cj-chip:rgba(41,151,255,0.18);
  29. --cj-shadow:0 1px 6px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.06);
  30. }
  31. #cj-header { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
  32. #cj-header img { width:40px; height:40px; border-radius:9px; }
  33. #cj-header h1 { font-size:20px; font-weight:600; letter-spacing:-0.2px; }
  34. #cj-header p { font-size:13px; color:var(--cj-dim); margin-top:2px; }
  35. #cj-header .cj-links { display:flex; gap:6px; }
  36. #cj-header .cj-links a { font-size:12px; color:var(--cj-accent); text-decoration:none; padding:5px 10px; border-radius:8px; border:1px solid var(--cj-border); background:var(--cj-card); }
  37. #cj-header .cj-links a:hover { background:var(--cj-hover); }
  38. .cj-card { background:var(--cj-card); border-radius:12px; box-shadow:var(--cj-shadow); overflow:hidden; margin-bottom:16px; }
  39. .cj-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  40. background:var(--cj-head); border-bottom:1px solid var(--cj-border); font-weight:600; font-size:14px; }
  41. .cj-head .cj-sub { font-weight:400; color:var(--cj-dim); font-size:12px; margin-left:8px; }
  42. .cj-body { padding:16px; }
  43. .cj-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  44. @media (max-width:900px) { .cj-grid { grid-template-columns:1fr; } }
  45. .cj-field { margin-bottom:12px; }
  46. .cj-field label { display:block; font-size:12px; color:var(--cj-dim); margin-bottom:4px; }
  47. .cj-field input[type=text], .cj-field textarea, .cj-field select {
  48. width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--cj-border);
  49. background:var(--cj-input); color:var(--cj-text); font:inherit; font-size:13px; }
  50. .cj-field textarea { min-height:60px; resize:vertical; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
  51. .cj-hint { font-size:11px; color:var(--cj-muted); margin-top:4px; }
  52. .cj-row { display:flex; gap:8px; align-items:center; }
  53. .cj-row > * { flex:1; }
  54. .cj-row > .cj-fixed { flex:0 0 auto; }
  55. .cj-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px;
  56. border:1px solid var(--cj-border); background:var(--cj-card); color:var(--cj-text);
  57. font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
  58. .cj-btn:hover { background:var(--cj-hover); }
  59. .cj-btn.primary { background:var(--cj-accent); border-color:transparent; color:#fff; }
  60. .cj-btn.danger { color:var(--cj-danger); }
  61. .cj-btn.small { padding:4px 9px; font-size:12px; }
  62. .cj-kv { display:grid; grid-template-columns:120px 1fr; gap:6px 12px; font-size:13px; }
  63. .cj-kv dt { color:var(--cj-dim); }
  64. .cj-kv dd { word-break:break-all; }
  65. .cj-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
  66. .cj-chip { background:var(--cj-chip); color:var(--cj-accent); border-radius:999px; padding:2px 9px; font-size:11px; font-weight:500; }
  67. .cj-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; color:#fff; }
  68. .cj-badge.succeeded { background:var(--cj-success); }
  69. .cj-badge.running { background:var(--cj-accent); }
  70. .cj-badge.scheduled { background:#5e5ce6; }
  71. .cj-badge.queued { background:var(--cj-muted); }
  72. .cj-badge.failed { background:var(--cj-danger); }
  73. .cj-badge.cancelled { background:var(--cj-warn); color:#1d1d1f; }
  74. .cj-bar { height:6px; border-radius:3px; background:var(--cj-border); overflow:hidden; margin-top:4px; }
  75. .cj-bar > div { height:100%; background:var(--cj-accent); }
  76. table.cj-table { width:100%; border-collapse:collapse; font-size:13px; }
  77. table.cj-table th { text-align:left; font-weight:600; color:var(--cj-dim); font-size:12px; padding:8px 10px; border-bottom:1px solid var(--cj-border); }
  78. table.cj-table td { padding:10px; border-bottom:1px solid var(--cj-border); vertical-align:top; }
  79. table.cj-table tr:last-child td { border-bottom:none; }
  80. table.cj-table tr:hover td { background:var(--cj-hover); }
  81. table.cj-table tr.selected td { background:var(--cj-hover); }
  82. .cj-name { font-weight:600; cursor:pointer; }
  83. .cj-meta { color:var(--cj-dim); font-size:12px; margin-top:2px; }
  84. .cj-empty { text-align:center; color:var(--cj-muted); padding:24px 0; font-size:13px; }
  85. .cj-msg { padding:8px 12px; border-radius:8px; font-size:13px; margin-top:10px; display:none; }
  86. .cj-msg.ok { display:block; background:rgba(52,199,89,0.14); color:var(--cj-success); }
  87. .cj-msg.err { display:block; background:rgba(255,59,48,0.12); color:var(--cj-danger); }
  88. pre.cj-pre { background:var(--cj-input); border:1px solid var(--cj-border); border-radius:8px; padding:10px;
  89. font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px;
  90. white-space:pre-wrap; word-break:break-all; max-height:220px; overflow:auto; margin-top:6px; }
  91. </style>
  92. </head>
  93. <body>
  94. <div id="cj-root">
  95. <div id="cj-header">
  96. <img src="../cluster/img/small_icon.png" alt="">
  97. <div style="flex:1">
  98. <h1 id="lbl-title" locale="cluster/jobs/title">Cluster Jobs</h1>
  99. <p id="lbl-tagline" locale="cluster/jobs/tagline">Run a script on whichever node fits best</p>
  100. </div>
  101. <span id="cj-refresh" style="color:var(--cj-muted); font-size:11px"></span>
  102. <div class="cj-links">
  103. <a href="../cluster/cluster.html" onclick="return CL.openPage('Cluster Settings', this.href)" locale="cluster/link/settings">Cluster Settings</a>
  104. <a href="../cluster/clusterinfo.html" onclick="return CL.openPage('Cluster Info', this.href)" locale="cluster/link/info">Cluster Info</a>
  105. </div>
  106. </div>
  107. <div class="cj-grid">
  108. <div class="cj-card">
  109. <div class="cj-head"><span id="lbl-submit" locale="cluster/jobs/submit">Submit a job</span></div>
  110. <div class="cj-body">
  111. <div class="cj-field">
  112. <label id="lbl-name" locale="cluster/jobs/name">Name</label>
  113. <input type="text" id="job-name" placeholder="Nightly index">
  114. </div>
  115. <div class="cj-field">
  116. <label id="lbl-script" locale="cluster/jobs/scriptlabel">Script (a .agi file that defines run(job))</label>
  117. <div class="cj-row">
  118. <input type="text" id="job-script" placeholder="user:/jobs/index.agi">
  119. <button class="cj-btn cj-fixed" onclick="pickScript()"><span id="lbl-browse" locale="cluster/jobs/browse">Browse</span></button>
  120. </div>
  121. </div>
  122. <div class="cj-field">
  123. <label id="lbl-args" locale="cluster/jobs/args">Arguments (JSON, optional)</label>
  124. <textarea id="job-args" placeholder='{"album": "2026"}'></textarea>
  125. </div>
  126. <div class="cj-field">
  127. <label id="lbl-inputs" locale="cluster/jobs/inputs">Input paths (comma separated, used to run near the data)</label>
  128. <input type="text" id="job-inputs" placeholder="cluster:/photos/2026">
  129. </div>
  130. <div class="cj-field">
  131. <label id="lbl-dataset" locale="cluster/jobs/datasetlabel">Map/reduce dataset (optional glob; turns this into a map/reduce job)</label>
  132. <div class="cj-row">
  133. <input type="text" id="job-dataset" placeholder="cluster:/photos/**/*.jpg">
  134. <input type="text" id="job-partition" class="cj-fixed" style="width:120px" placeholder="50 per task">
  135. </div>
  136. <div class="cj-hint" id="hint-dataset" locale="cluster/jobs/datasethint">With a dataset the script must define mapper(files, emit) and reducer(key, values); the files are processed on the nodes that hold them.</div>
  137. </div>
  138. <div class="cj-row">
  139. <div class="cj-field" style="margin:0">
  140. <label id="lbl-features" locale="cluster/jobs/features">Required features</label>
  141. <input type="text" id="job-features" placeholder="ffmpeg, cuda">
  142. </div>
  143. <div class="cj-field" style="margin:0; max-width:140px">
  144. <label id="lbl-timeout" locale="cluster/jobs/timeout">Timeout (s)</label>
  145. <input type="text" id="job-timeout" value="3600">
  146. </div>
  147. </div>
  148. <div class="cj-hint" id="hint-submit" locale="cluster/jobs/submithint">The script runs with your permissions on the chosen node. cluster:/ paths work as usual.</div>
  149. <div class="cj-row" style="margin-top:10px">
  150. <div></div>
  151. <button class="cj-btn primary cj-fixed" onclick="submitJob()"><span id="lbl-run" locale="cluster/jobs/run">Run job</span></button>
  152. </div>
  153. <div class="cj-msg" id="msg-submit"></div>
  154. </div>
  155. </div>
  156. <div class="cj-card">
  157. <div class="cj-head">
  158. <span><span id="lbl-detail" locale="cluster/jobs/detail">Job detail</span><span class="cj-sub" id="detail-id"></span></span>
  159. <button class="cj-btn small danger" id="btn-cancel" style="display:none" onclick="cancelSelected()"><span id="lbl-cancel" locale="cluster/cancel">Cancel</span></button>
  160. </div>
  161. <div class="cj-body">
  162. <dl class="cj-kv" id="detail-kv"><dd class="cj-empty" style="grid-column:1/3" id="lbl-nodetail" locale="cluster/jobs/nodetail">Select a job to see its log and output</dd></dl>
  163. <div id="detail-log-wrap" style="display:none">
  164. <div class="cj-hint" id="lbl-log" locale="cluster/jobs/log">Log</div>
  165. <pre class="cj-pre" id="detail-log"></pre>
  166. </div>
  167. <div id="detail-out-wrap" style="display:none">
  168. <div class="cj-hint" id="lbl-output" locale="cluster/jobs/output">Output</div>
  169. <pre class="cj-pre" id="detail-out"></pre>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="cj-card">
  175. <div class="cj-head"><span><span id="lbl-jobs" locale="cluster/jobs/jobs">Jobs</span><span class="cj-sub" id="jobs-summary"></span></span></div>
  176. <div class="cj-body" style="padding:0; overflow-x:auto">
  177. <table class="cj-table">
  178. <thead><tr>
  179. <th id="th-job" locale="cluster/jobs/job">Job</th><th id="th-status" locale="cluster/jobs/status">Status</th><th id="th-node" locale="cluster/node">Node</th>
  180. <th id="th-progress" locale="cluster/jobs/progress">Progress</th><th id="th-when" locale="cluster/when">When</th><th></th>
  181. </tr></thead>
  182. <tbody id="jobs-body"></tbody>
  183. </table>
  184. </div>
  185. </div>
  186. </div>
  187. <script>
  188. var t = CL.t, fmt = CL.fmt;
  189. var API = '../../system/cluster/jobs/';
  190. var selected = null;
  191. var lastJobs = [];
  192. function esc(s) {
  193. return String(s === undefined || s === null ? '' : s)
  194. .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  195. }
  196. function fmtAgo(unix) { return unix ? CL.fmtAgo(unix) : '-'; }
  197. function duration(rec) {
  198. if (!rec.state.started) return '-';
  199. var end = rec.state.finished || Math.floor(Date.now()/1000);
  200. var s = Math.max(0, end - rec.state.started);
  201. if (s < 60) return fmt(t('cluster/jobs/secs', '{0}s'), s);
  202. return fmt(t('cluster/jobs/minsecs', '{0}m {1}s'), Math.floor(s/60), s%60);
  203. }
  204. //Errors from the server are translated by CL.showMsg
  205. function showMsg(id, text, ok) { CL.showMsg(id, text, ok, 'cj-msg'); }
  206. function apiPost(path, data, cb) {
  207. $.ajax({ url: API + path, method: 'POST', data: data, dataType: 'json' })
  208. .done(function(r) { cb(null, r); })
  209. .fail(function(xhr) {
  210. var msg = xhr.responseText || t('cluster/requestfailed', 'Request failed');
  211. try { var j = JSON.parse(xhr.responseText); if (j.error) msg = j.error; } catch(e) {}
  212. cb(msg, null);
  213. });
  214. }
  215. function apiResult(r) { return (r && typeof r === 'object' && r.error) ? r.error : null; }
  216. function pickScript() {
  217. if (typeof ao_module_openFileSelector !== 'function') {
  218. showMsg('msg-submit', t('cluster/jobs/typepath', 'Type the script path, for example user:/jobs/index.agi'), false);
  219. return;
  220. }
  221. ao_module_openFileSelector(function(files) {
  222. if (files && files.length > 0) document.getElementById('job-script').value = files[0].filepath;
  223. }, 'user:/', 'file', false);
  224. }
  225. function submitJob() {
  226. var script = document.getElementById('job-script').value.trim();
  227. if (!script) { showMsg('msg-submit', t('cluster/jobs/needscript', 'A script path is required'), false); return; }
  228. apiPost('submit', {
  229. name: document.getElementById('job-name').value,
  230. script: script,
  231. args: document.getElementById('job-args').value,
  232. inputs: JSON.stringify(document.getElementById('job-inputs').value.split(',').map(function(x){return x.trim();}).filter(function(x){return x;})),
  233. features: document.getElementById('job-features').value,
  234. timeout: document.getElementById('job-timeout').value,
  235. dataset: document.getElementById('job-dataset').value,
  236. partition: document.getElementById('job-partition').value
  237. }, function(err, r) {
  238. var e = err || apiResult(r);
  239. if (e) { showMsg('msg-submit', e, false); return; }
  240. selected = r.spec.id;
  241. showMsg('msg-submit', t('cluster/jobs/queued', 'Job queued'), true);
  242. loadJobs();
  243. });
  244. }
  245. function cancelSelected() {
  246. if (!selected) return;
  247. apiPost('cancel', { id: selected }, function(err, r) {
  248. var e = err || apiResult(r);
  249. if (e) { showMsg('msg-submit', e, false); return; }
  250. loadJobs();
  251. });
  252. }
  253. function selectJob(id) { selected = id; renderDetail(); }
  254. function renderDetail() {
  255. var rec = null;
  256. lastJobs.forEach(function(j) { if (j.spec.id === selected) rec = j; });
  257. var kv = document.getElementById('detail-kv');
  258. if (!rec) {
  259. kv.innerHTML = '<dd class="cj-empty" style="grid-column:1/3">' + t('cluster/jobs/nodetail', 'Select a job to see its log and output') + '</dd>';
  260. document.getElementById('detail-id').textContent = '';
  261. document.getElementById('btn-cancel').style.display = 'none';
  262. document.getElementById('detail-log-wrap').style.display = 'none';
  263. document.getElementById('detail-out-wrap').style.display = 'none';
  264. return;
  265. }
  266. document.getElementById('detail-id').textContent = ' ' + rec.spec.id.substring(0, 8);
  267. var running = rec.state.status === 'queued' || rec.state.status === 'scheduled' || rec.state.status === 'running';
  268. document.getElementById('btn-cancel').style.display = running ? '' : 'none';
  269. var kids = lastJobs.filter(function(j) { return j.spec.parentId === rec.spec.id; });
  270. var rows = '<dt>' + t('cluster/jobs/name', 'Name') + '</dt><dd>' + esc(rec.spec.name) +
  271. (rec.spec.kind && rec.spec.kind !== 'run' ? ' <span class="cj-chip">' + esc(t('cluster/jobs/kind/' + rec.spec.kind, rec.spec.kind)) + '</span>' : '') + '</dd>' +
  272. '<dt>' + t('cluster/jobs/status', 'Status') + '</dt><dd><span class="cj-badge ' + esc(rec.state.status) + '">' + esc(CL.state(rec.state.status)) + '</span>' +
  273. (rec.state.error ? ' <span style="color:var(--cj-danger)">' + esc(CL.tr(rec.state.error)) + '</span>' : '') + '</dd>' +
  274. '<dt>' + t('cluster/jobs/node', 'Node') + '</dt><dd>' + (rec.state.node ? esc(rec.state.node) : '-') + '</dd>' +
  275. '<dt>' + t('cluster/jobs/script', 'Script') + '</dt><dd class="cj-mono">' + esc(rec.spec.scriptName) + '</dd>' +
  276. '<dt>' + t('cluster/jobs/owner', 'Owner') + '</dt><dd>' + esc(rec.spec.owner) + '</dd>' +
  277. '<dt>' + t('cluster/jobs/duration', 'Duration') + '</dt><dd>' + duration(rec) + ' <span class="cj-meta">' + esc(fmt(t('cluster/jobs/attemptn', 'attempt {0}'), rec.state.attempts)) + '</span></dd>';
  278. if (rec.spec.dataset) rows += '<dt>' + t('cluster/jobs/dataset', 'Dataset') + '</dt><dd class="cj-mono">' + esc(rec.spec.dataset) + '</dd>';
  279. if (kids.length) {
  280. var doneKids = kids.filter(function(k) { return k.state.status === 'succeeded'; }).length;
  281. rows += '<dt>' + t('cluster/jobs/tasks', 'Tasks') + '</dt><dd>' + esc(fmt(t('cluster/jobs/complete', '{0} / {1} complete'), doneKids, kids.length)) + '</dd>';
  282. }
  283. if (rec.state.reason) rows += '<dt>' + t('cluster/jobs/waiting', 'Waiting') + '</dt><dd style="color:var(--cj-warn)">' + esc(CL.tr(rec.state.reason)) + '</dd>';
  284. kv.innerHTML = rows;
  285. var logs = rec.state.log || [];
  286. document.getElementById('detail-log-wrap').style.display = logs.length ? '' : 'none';
  287. document.getElementById('detail-log').textContent = logs.join('\n');
  288. var hasOut = rec.state.output !== undefined && rec.state.output !== null;
  289. document.getElementById('detail-out-wrap').style.display = hasOut ? '' : 'none';
  290. if (hasOut) {
  291. try { document.getElementById('detail-out').textContent = JSON.stringify(rec.state.output, null, 2); }
  292. catch(e) { document.getElementById('detail-out').textContent = String(rec.state.output); }
  293. }
  294. }
  295. function loadJobs() {
  296. $.getJSON(API + 'status', function(st) {
  297. if (apiResult(st)) return;
  298. lastJobs = st.jobs || [];
  299. var html = '';
  300. lastJobs.forEach(function(rec) {
  301. var running = rec.state.status === 'queued' || rec.state.status === 'scheduled' || rec.state.status === 'running';
  302. var pct = Math.round((rec.state.progress || 0) * 100);
  303. html += '<tr class="' + (rec.spec.id === selected ? 'selected' : '') + '" onclick="selectJob(\'' + esc(rec.spec.id) + '\')">' +
  304. '<td><div class="cj-name">' + esc(rec.spec.name || rec.spec.scriptName) + '</div><div class="cj-meta cj-mono">' + esc(rec.spec.id.substring(0, 8)) + ' · ' + esc(rec.spec.owner) + '</div></td>' +
  305. '<td><span class="cj-badge ' + esc(rec.state.status) + '">' + esc(CL.state(rec.state.status)) + '</span></td>' +
  306. '<td>' + (rec.state.node ? esc(rec.state.node) : '<span style="color:var(--cj-muted)">-</span>') + '</td>' +
  307. '<td>' + pct + '%<div class="cj-bar"><div style="width:' + pct + '%"></div></div></td>' +
  308. '<td>' + fmtAgo(rec.state.finished || rec.state.started || rec.spec.created) + '<div class="cj-meta">' + duration(rec) + '</div></td>' +
  309. '<td>' + (running ? '<button class="cj-btn small danger" onclick="event.stopPropagation(); cancelJob(\'' + esc(rec.spec.id) + '\')">' + t('cluster/jobs/cancel', 'Cancel') + '</button>' : '') + '</td></tr>';
  310. });
  311. document.getElementById('jobs-body').innerHTML = html || '<tr><td colspan="6" class="cj-empty">' + t('cluster/jobs/none', 'No jobs yet') + '</td></tr>';
  312. document.getElementById('jobs-summary').textContent = ' ' + fmt(t('cluster/jobs/summary', '{0} running, {1} queued, {2} done'), st.running, st.queued, st.succeeded) + (st.failed ? ', ' + fmt(t('cluster/jobs/failedn', '{0} failed'), st.failed) : '');
  313. document.getElementById('cj-refresh').textContent = (st.leaderName ? fmt(t('cluster/jobs/scheduler', 'Scheduler: {0}'), st.leaderName) + ' · ' : '') + fmt(t('cluster/jobs/slots', '{0}/{1} slots busy here'), st.localBusy, st.localSlots);
  314. renderDetail();
  315. });
  316. }
  317. function cancelJob(id) {
  318. apiPost('cancel', { id: id }, function(err, r) {
  319. var e = err || apiResult(r);
  320. if (e) { showMsg('msg-submit', e, false); return; }
  321. loadJobs();
  322. });
  323. }
  324. CL.applyTheme('cj-root');
  325. CL.init(function() {
  326. loadJobs();
  327. CL.every(loadJobs, 3000, 'cj-root');
  328. });
  329. </script>
  330. </body>
  331. </html>