Merge branch 'master' into origin-2883-job-log-viewer
[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
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 <% else %>
54   <%# Live log loading not implemented yet. %>
55 <% end %>
56
57 $(".toggle-filter").on("change", function() {
58   logViewer.filter(makeFilter());
59 });
60
61 $("#filter-all").on("click", function() {
62   $(".toggle-filter").each(function(i, f) { f.checked = true; });
63   logViewer.filter(makeFilter());
64 });
65
66 $("#filter-none").on("click", function() {
67   $(".toggle-filter").each(function(i, f) { f.checked = false; console.log(f); });
68   $("#show-all-tasks").prop("checked", true);
69   logViewer.filter(makeFilter());
70 });
71
72 $("#sort-by-time").on("change", function() {
73   logViewer.sort("id", {sortFunction: sortById});
74 });
75
76 $("#sort-by-task").on("change", function() {
77   logViewer.sort("taskid", {sortFunction: sortByTask});
78 });
79
80 $("#sort-by-node").on("change", function() {
81   logViewer.sort("node", {sortFunction: sortByNode});
82 });
83
84 $("#set-show-failed-only").on("click", function() {
85   $("#sort-by-task").prop("checked", true);
86   $("#show-failed-tasks").prop("checked", true);
87   $("#show-crunch").prop("checked", false);
88   $("#show-task-dispatch").prop("checked", true);
89   $("#show-task-output").prop("checked", true);
90   $("#show-crunchstat").prop("checked", false);
91   logViewer.filter(makeFilter());
92   logViewer.sort("taskid", {sortFunction: sortByTask});
93 });
94
95 })();
96
97 </script>
98
99 <div id="log-viewer">
100
101   <h3>Summary</h3>
102   <div id="log-viewer-overview"></div>
103
104   <% if @object.tasks_summary[:failed] > 0 %>
105     <button id="set-show-failed-only" class="btn btn-danger" style="margin-top: 1em">
106       Show failed task output only
107     </button>
108   <% end %>
109
110   <div class="h3">Log
111
112     <span class="pull-right">
113       <button id="filter-all" class="btn">
114         Select all
115       </button>
116       <button id="filter-none" class="btn">
117         Select none
118       </button>
119     </span>
120   </div>
121
122   <input class="search pull-right" style="margin-top: 1em" placeholder="Search" />
123
124   <div>
125     <div class="radio-inline log-viewer-button" style="margin-left: 10px">
126       <label><input id="sort-by-time" type="radio" name="sort-radio" checked> Sort by time</label>
127     </div>
128     <div class="radio-inline log-viewer-button">
129       <label><input id="sort-by-node" type="radio" name="sort-radio" > Sort by node</label>
130     </div>
131
132     <div class="radio-inline log-viewer-button">
133       <label><input id="sort-by-task" type="radio" name="sort-radio" > Sort by task</label>
134     </div>
135   </div>
136
137   <div>
138     <div class="radio-inline log-viewer-button" style="margin-left: 10px">
139       <label><input id="show-all-tasks" type="radio" name="show-tasks-group" checked="true" class="toggle-filter"> Show all tasks</label>
140     </div>
141     <div class="radio-inline log-viewer-button">
142       <label><input id="show-successful-tasks" type="radio" name="show-tasks-group" class="toggle-filter"> Only successful tasks</label>
143     </div>
144     <div class="radio-inline log-viewer-button">
145       <label><input id="show-failed-tasks" type="radio" name="show-tasks-group" class="toggle-filter"> Only failed tasks</label>
146     </div>
147   </div>
148
149   <div>
150     <div class="checkbox-inline log-viewer-button" style="margin-left: 10px">
151       <label><input id="show-crunch" type="checkbox" checked="true" class="toggle-filter"> Show crunch output</label>
152     </div>
153     <div class="checkbox-inline log-viewer-button">
154       <label><input id="show-task-dispatch" type="checkbox" checked="true" class="toggle-filter"> Show task dispatch</label>
155     </div>
156     <div class="checkbox-inline log-viewer-button">
157       <label><input id="show-task-output" type="checkbox" checked="true" class="toggle-filter"> Show task output</label>
158     </div>
159     <div class="checkbox-inline log-viewer-button">
160       <label><input id="show-crunchstat" type="checkbox" checked="true" class="toggle-filter"> Show compute usage</label>
161     </div>
162
163   </div>
164
165   <div class="log-viewer-paging-div">
166     <a href="#" class="log-viewer-page-up"><span class='glyphicon glyphicon-arrow-up'></span></a>
167     <span class="log-viewer-paging"></span>
168     <a href="#" class="log-viewer-page-down"><span class='glyphicon glyphicon-arrow-down'></span></a>
169   </div>
170
171   <table class="log-viewer-table">
172     <thead>
173       <tr>
174         <th class="id" data-sort="id"></th>
175         <th class="timestamp" data-sort="timestamp">Timestamp</th>
176         <th class="node"  data-sort="node">Node</th>
177         <th class="slot"  data-sort="slot">Slot</th>
178         <th class="type" data-sort="type">Log type</th>
179         <th class="taskid"  data-sort="taskid">Task</th>
180         <th class="message" data-sort="message">Message</th>
181       </tr>
182     </thead>
183     <tbody class="list">
184       <tr>
185         <td class="id"></td>
186         <td class="timestamp"></td>
187         <td class="node"></td>
188         <td class="slot"></td>
189         <td class="type"></td>
190         <td class="taskid"></td>
191         <td class="message"></td>
192       </tr>
193     </tbody>
194   </table>
195
196
197   <div style="font-size: 18px">
198     <a href="#" class="log-viewer-page-up"><span class='glyphicon glyphicon-arrow-up'></span></a>
199     <span class="log-viewer-paging"></span>
200     <a href="#" class="log-viewer-page-down"><span class='glyphicon glyphicon-arrow-down'></span></a>
201   </div>
202
203
204 </div>
205
206 <% if !@object.log %>
207   This job is still running.  The job log will be available when the job is complete.
208 <% end %>
209
210 <%= image_tag 'ajax-loader.gif', id: "logloadspinner" %>