Merge branch '2883-job-log-viewer' of git.curoverse.com:arvados into origin-2883...
[arvados.git] / apps / workbench / app / views / jobs / _show_log.html.erb
1 <script>
2 (function() {
3 var pagesize = 1000;
4 var logViewer = new List('log-viewer', {
5   valueNames: [ 'id', 'timestamp', 'taskid', 'message', 'type'],
6   page: pagesize
7 });
8
9 logViewer.page_offset = 0;
10 logViewer.on("updated", function() { updatePaging(".log-viewer-paging", logViewer, pagesize) } );
11 $(".log-viewer-page-up").on("click", function() { prevPage(logViewer, pagesize, ".log-viewer-paging"); return false; });
12 $(".log-viewer-page-down").on("click", function() { nextPage(logViewer, pagesize, ".log-viewer-paging"); return false; });
13
14 var taskState = newTaskState();
15
16 var makeFilter = function() {
17   var pass = [];
18   $(".toggle-filter").each(function(i, e) {
19     if (e.checked) {
20       pass.push(e.id.substr(5));
21     }
22   });
23
24   return (function(item) {
25     var v = false;
26     if (item.values().taskid !== "") {
27       for (a in pass) {
28         if (pass[a] == "all-tasks") { v = true; }
29         else if (pass[a] == "successful-tasks" && taskState[item.values().taskid].outcome == "success") { v = true; }
30         else if (pass[a] == "failed-tasks" && taskState[item.values().taskid].outcome == "failure") { v = true; }
31       }
32     } else {
33       v = true;
34     }
35     for (a in pass) {
36       if (pass[a] == item.values().type) { return v; }
37     }
38     return false;
39   });
40 }
41
42 <% if @object.log %>
43   <% logcollection = Collection.find @object.log %>
44   <% if logcollection %>
45     $.ajax('<%=j url_for logcollection %>/<%=j logcollection.files[0][1] %>').
46     done(function(data, status, jqxhr) {
47     logViewer.filter();
48     addToLogViewer(logViewer, data.split("\n"), taskState);
49     logViewer.filter(makeFilter());
50     generateJobOverview("#log-viewer-overview", logViewer, taskState);
51     $("#logloadspinner").detach();
52     }).
53     fail(function(jqxhr, status, error) {
54     $("#logloadspinner").detach();
55     });
56   <% end %>
57 <% else %>
58   <%# Live log loading not implemented yet. %>
59 <% end %>
60
61 $(".toggle-filter").on("change", function() {
62   logViewer.filter(makeFilter());
63 });
64
65 $("#filter-all").on("click", function() {
66   $(".toggle-filter").each(function(i, f) { f.checked = true; });
67   logViewer.filter(makeFilter());
68 });
69
70 $("#filter-none").on("click", function() {
71   $(".toggle-filter").each(function(i, f) { f.checked = false; console.log(f); });
72   $("#show-all-tasks").prop("checked", true);
73   logViewer.filter(makeFilter());
74 });
75
76 $("#sort-by-time").on("change", function() {
77   logViewer.sort("id", {sortFunction: sortById});
78 });
79
80 $("#sort-by-task").on("change", function() {
81   logViewer.sort("taskid", {sortFunction: sortByTask});
82 });
83
84 $("#sort-by-node").on("change", function() {
85   logViewer.sort("node", {sortFunction: sortByNode});
86 });
87
88 $("#set-show-failed-only").on("click", function() {
89   $("#sort-by-task").prop("checked", true);
90   $("#show-failed-tasks").prop("checked", true);
91   $("#show-crunch").prop("checked", false);
92   $("#show-task-dispatch").prop("checked", true);
93   $("#show-task-output").prop("checked", true);
94   $("#show-crunchstat").prop("checked", false);
95   logViewer.filter(makeFilter());
96   logViewer.sort("taskid", {sortFunction: sortByTask});
97 });
98
99 })();
100
101 </script>
102
103 <div id="log-viewer">
104
105   <h3>Summary</h3>
106   <p id="log-viewer-overview">
107     <% if !@object.log %>
108       <% if @object.finished_at %>
109         This job did not produce an output log.
110       <% else %>
111         This job is still running.  The job log will be available when the job is complete.
112       <% end %>
113     <% else %>
114       <% if !logcollection %>
115         The collection containing the job log was not found.
116       <% end %>
117     <% end %>
118   </p>
119
120   <div class="h3">Log
121
122     <span class="pull-right">
123       <% if @object.andand.tasks_summary.andand[:failed] and @object.tasks_summary[:failed] > 0 %>
124         <button id="set-show-failed-only" class="btn btn-danger">
125           Show failed task output only
126         </button>
127       <% end %>
128
129       <button id="filter-all" class="btn">
130         Select all
131       </button>
132       <button id="filter-none" class="btn">
133         Select none
134       </button>
135     </span>
136   </div>
137
138   <input class="search pull-right" style="margin-top: 1em" placeholder="Search" />
139
140   <div>
141     <div class="radio-inline log-viewer-button" style="margin-left: 10px">
142       <label><input id="sort-by-time" type="radio" name="sort-radio" checked> Sort by time</label>
143     </div>
144     <div class="radio-inline log-viewer-button">
145       <label><input id="sort-by-node" type="radio" name="sort-radio" > Sort by node</label>
146     </div>
147
148     <div class="radio-inline log-viewer-button">
149       <label><input id="sort-by-task" type="radio" name="sort-radio" > Sort by task</label>
150     </div>
151   </div>
152
153   <div>
154     <div class="radio-inline log-viewer-button" style="margin-left: 10px">
155       <label><input id="show-all-tasks" type="radio" name="show-tasks-group" checked="true" class="toggle-filter"> Show all tasks</label>
156     </div>
157     <div class="radio-inline log-viewer-button">
158       <label><input id="show-successful-tasks" type="radio" name="show-tasks-group" class="toggle-filter"> Only successful tasks</label>
159     </div>
160     <div class="radio-inline log-viewer-button">
161       <label><input id="show-failed-tasks" type="radio" name="show-tasks-group" class="toggle-filter"> Only failed tasks</label>
162     </div>
163   </div>
164
165   <div>
166     <div class="checkbox-inline log-viewer-button" style="margin-left: 10px">
167       <label><input id="show-crunch" type="checkbox" checked="true" class="toggle-filter"> Show crunch output</label>
168     </div>
169     <div class="checkbox-inline log-viewer-button">
170       <label><input id="show-task-dispatch" type="checkbox" checked="true" class="toggle-filter"> Show task dispatch</label>
171     </div>
172     <div class="checkbox-inline log-viewer-button">
173       <label><input id="show-task-output" type="checkbox" checked="true" class="toggle-filter"> Show task output</label>
174     </div>
175     <div class="checkbox-inline log-viewer-button">
176       <label><input id="show-crunchstat" type="checkbox" checked="true" class="toggle-filter"> Show compute usage</label>
177     </div>
178
179   </div>
180
181   <div class="smart-scroll" data-smart-scroll-padding-bottom="50" style="margin-bottom: 0px">
182     <table class="log-viewer-table">
183       <thead>
184         <tr>
185           <th class="id" data-sort="id"></th>
186           <th class="timestamp" data-sort="timestamp">Timestamp</th>
187           <th class="node"  data-sort="node">Node</th>
188           <th class="slot"  data-sort="slot">Slot</th>
189           <th class="type" data-sort="type">Log type</th>
190           <th class="taskid"  data-sort="taskid">Task</th>
191           <th class="message" data-sort="message">Message</th>
192         </tr>
193       </thead>
194       <tbody class="list">
195         <tr>
196           <td class="id"></td>
197           <td class="timestamp"></td>
198           <td class="node"></td>
199           <td class="slot"></td>
200           <td class="type"></td>
201           <td class="taskid"></td>
202           <td class="message"></td>
203         </tr>
204       </tbody>
205     </table>
206
207     <% if @object.log and logcollection %>
208       <%= image_tag 'ajax-loader.gif', id: "logloadspinner" %>
209     <% end %>
210
211   </div>
212
213   <div class="log-viewer-paging-div" style="margin-bottom: -15px">
214     <a href="#" class="log-viewer-page-up"><span class='glyphicon glyphicon-arrow-up'></span></a>
215     <span class="log-viewer-paging"></span>
216     <a href="#" class="log-viewer-page-down"><span class='glyphicon glyphicon-arrow-down'></span></a>
217   </div>
218 </div>