2883: Use smart scrolling so keep the sorting and filtering selections on the
[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   <div class="h3">Log
105
106     <span class="pull-right">
107       <% if @object.tasks_summary[:failed] > 0 %>
108         <button id="set-show-failed-only" class="btn btn-danger">
109           Show failed task output only
110         </button>
111       <% end %>
112
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="smart-scroll" data-smart-scroll-padding-bottom="50" style="margin-bottom: 0px">
166   <table class="log-viewer-table">
167     <thead>
168       <tr>
169         <th class="id" data-sort="id"></th>
170         <th class="timestamp" data-sort="timestamp">Timestamp</th>
171         <th class="node"  data-sort="node">Node</th>
172         <th class="slot"  data-sort="slot">Slot</th>
173         <th class="type" data-sort="type">Log type</th>
174         <th class="taskid"  data-sort="taskid">Task</th>
175         <th class="message" data-sort="message">Message</th>
176       </tr>
177     </thead>
178     <tbody class="list">
179       <tr>
180         <td class="id"></td>
181         <td class="timestamp"></td>
182         <td class="node"></td>
183         <td class="slot"></td>
184         <td class="type"></td>
185         <td class="taskid"></td>
186         <td class="message"></td>
187       </tr>
188     </tbody>
189   </table>
190 </div>
191   <div class="log-viewer-paging-div" style="margin-bottom: -15px">
192     <a href="#" class="log-viewer-page-up"><span class='glyphicon glyphicon-arrow-up'></span></a>
193     <span class="log-viewer-paging"></span>
194     <a href="#" class="log-viewer-page-down"><span class='glyphicon glyphicon-arrow-down'></span></a>
195   </div>
196
197 </div>
198
199 <% if !@object.log %>
200   This job is still running.  The job log will be available when the job is complete.
201 <% end %>
202
203 <%= image_tag 'ajax-loader.gif', id: "logloadspinner" %>