2883: Added overview, node column and sort by node, style tweaks.
[arvados.git] / apps / workbench / app / views / jobs / _show_log.html.erb
1 <script>
2 (function() {
3 var logViewer = new List('log-viewer', {
4   valueNames: [ 'id', 'timestamp', 'taskid', 'message', 'type'],
5   page: 10000,
6 });
7
8 var taskState = {"success_count": 0, "failure_count": 0};
9
10 var makeFilter = function() {
11   var pass = [];
12   $(".toggle-filter").each(function(i, e) {
13     if (e.checked) {
14       pass.push(e.id.substr(5));
15     }
16   });
17
18   return (function(item) {
19     var v = false;
20     if (item.values().taskid !== "") {
21       for (a in pass) {
22         if (pass[a] == "successful-tasks" && taskState[item.values().taskid].outcome == "success") { v = true; }
23         if (pass[a] == "failed-tasks" && taskState[item.values().taskid].outcome == "failure") { v = true; }
24       }
25     } else {
26       v = true;
27     }
28     for (a in pass) {
29       if (pass[a] == item.values().type) { return v; }
30     }
31     return false;
32   });
33 }
34
35 <% if @object.log %>
36 <% logcollection = Collection.find @object.log %>
37
38 $.ajax('<%=j url_for logcollection %>/<%=j logcollection.files[0][1] %>').
39   done(function(data, status, jqxhr) {
40     logViewer.filter();
41     addToLogViewer(logViewer, data.split("\n"), taskState);
42     logViewer.filter(makeFilter());
43     generateJobOverview("#log-viewer-overview", logViewer, taskState);
44     $("#logloadspinner").detach();
45   });
46 <% else %>
47   <%# Live log loading not implemented yet. %>
48 <% end %>
49
50 $(".toggle-filter").on("change", function() {
51   logViewer.filter(makeFilter());
52 });
53
54 $("#filter-all").on("click", function() {
55   $(".toggle-filter").each(function(i, f) { f.checked = true; });
56   logViewer.filter(makeFilter());
57 });
58
59 $("#filter-none").on("click", function() {
60   $(".toggle-filter").each(function(i, f) { f.checked = false; console.log(f); });
61   logViewer.filter(makeFilter());
62 });
63
64 $("#sort-by-time").on("change", function() {
65   logViewer.sort("id", {sortFunction: sortById});
66 });
67
68 $("#sort-by-task").on("change", function() {
69   logViewer.sort("taskid", {sortFunction: sortByTask});
70 });
71
72 $("#sort-by-node").on("change", function() {
73   logViewer.sort("node", {sortFunction: sortByNode});
74 });
75
76 })();
77
78 </script>
79
80 <div id="log-viewer">
81
82   <h3>Overview</h3>
83   <div id="log-viewer-overview"></div>
84
85   <div class="h3">Log
86
87 <span class="pull-right">
88     <button id="filter-all" class="btn">
89       Select all
90     </button>
91     <button id="filter-none" class="btn">
92       Select none
93     </button>
94 </span>
95 </div>
96
97   <div>
98     <div class="radio-inline log-viewer-button" style="margin-left: 10px">
99       <label><input id="sort-by-time" type="radio" name="sort-radio" checked> Sort by time</label>
100     </div>
101     <div class="radio-inline log-viewer-button">
102       <label><input id="sort-by-node" type="radio" name="sort-radio" > Sort by node</label>
103     </div>
104
105     <div class="radio-inline log-viewer-button">
106       <label><input id="sort-by-task" type="radio" name="sort-radio" > Sort by task</label>
107     </div>
108     </div>
109
110   <div>
111     <div class="checkbox-inline log-viewer-button" style="margin-left: 10px">
112       <label><input id="show-crunch" type="checkbox" checked="true" class="toggle-filter"> Show crunch output</label>
113     </div>
114     <div class="checkbox-inline log-viewer-button">
115       <label><input id="show-job-status" type="checkbox" checked="true" class="toggle-filter"> Show job status</label>
116     </div>
117     <div class="checkbox-inline log-viewer-button">
118       <label><input id="show-task-dispatch" type="checkbox" checked="true" class="toggle-filter"> Show task dispatch</label>
119     </div>
120     <div class="checkbox-inline log-viewer-button">
121       <label><input id="show-task-output" type="checkbox" checked="true" class="toggle-filter"> Show task output</label>
122     </div>
123     <div class="checkbox-inline log-viewer-button">
124       <label><input id="show-crunchstat" type="checkbox" checked="true" class="toggle-filter"> Show compute usage</label>
125     </div>
126     <div class="checkbox-inline log-viewer-button">
127       <label><input id="show-successful-tasks" type="checkbox" checked="true" class="toggle-filter"> Show successful tasks</label>
128     </div>
129     <div class="checkbox-inline log-viewer-button">
130       <label><input id="show-failed-tasks" type="checkbox" checked="true" class="toggle-filter"> Show failed tasks</label>
131     </div>
132     </div>
133
134   <table class="log-viewer-table">
135     <thead>
136       <tr>
137         <th class="id" data-sort="id"></th>
138         <th class="timestamp" data-sort="timestamp">Timestamp</th>
139         <th class="node"  data-sort="taskid">Node</th>
140         <th class="type" data-sort="type">Log type</th>
141         <th class="taskid"  data-sort="taskid">Task</th>
142         <th class="message" data-sort="message">Message</th>
143       </tr>
144     </thead>
145     <tbody class="list">
146       <tr>
147         <td class="id"></td>
148         <td class="timestamp"></td>
149         <td class="node"></td>
150         <td class="type"></td>
151         <td class="taskid"></td>
152         <td class="message"></td>
153       </tr>
154     </tbody>
155   </table>
156
157 </div>
158
159 <% if !@object.log %>
160   This job is still running.  The job log will be available when the job is complete.
161 <% end %>
162
163 <%= image_tag 'ajax-loader.gif', id: "logloadspinner" %>