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