azkaban-uncached
Changes
src/web/js/azkaban.jobhistory.view.js 117(+68 -49)
Details
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
index 77346fb..e71e823 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
@@ -104,54 +104,66 @@
<li><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}"><strong>Job</strong> $jobid</a></li>
</ol>
- <div id="timeGraph"></div>
- <table id="all-jobs" class="all-jobs job-table">
- <thead>
- <tr>
- <th class="execid">Execution Id</th>
- <th class="jobid">Job</th>
- <th class="flowid">Flow</th>
- <th class="date">Start Time</th>
- <th class="date">End Time</th>
- <th class="elapse">Elapse</th>
- <th class="status">Status</th>
- <th class="logs">Logs</th>
- </tr>
- </thead>
- <tbody>
- #foreach ($job in $history)
- <tr>
- <td class="first">
- #if ($job.attempt > 0)
- <a href="${context}/executor?execid=${job.execId}">${job.execId}.${job.attempt}</a>
- #else
- <a href="${context}/executor?execid=${job.execId}">${job.execId}</a>
+ <div class="panel panel-default">
+ <div class="panel-heading">Job History</div>
+ <div class="panel-body">
+ <div id="timeGraph"></div>
+ </div>
+
+ <table id="all-jobs" class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th class="execid">Execution Id</th>
+ <th class="jobid">Job</th>
+ <th class="flowid">Flow</th>
+ <th class="date">Start Time</th>
+ <th class="date">End Time</th>
+ <th class="elapse">Elapse</th>
+ <th class="status">Status</th>
+ <th class="logs">Logs</th>
+ </tr>
+ </thead>
+ <tbody>
+ #if ($history)
+ #foreach ($job in $history)
+ <tr>
+ <td class="first">
+ #if ($job.attempt > 0)
+ <a href="${context}/executor?execid=${job.execId}">${job.execId}.${job.attempt}</a>
+ #else
+ <a href="${context}/executor?execid=${job.execId}">${job.execId}</a>
+ #end
+ </td>
+ <td>
+ <a href="${context}/manager?project=${projectName}&flow=${job.flowId}&job=${jobid}">${jobid}</a>
+ </td>
+ <td>
+ <a href="${context}/manager?project=${projectName}&flow=${job.flowId}">${job.flowId}</a>
+ </td>
+ <td>$utils.formatDate(${job.startTime})</td>
+ <td>$utils.formatDate(${job.endTime})</td>
+ <td>$utils.formatDuration(${job.startTime}, ${job.endTime})</td>
+ <td>
+ <div class="status ${job.status}">
+ $utils.formatStatus(${job.status})
+ </div>
+ </td>
+ <td class="logLink">
+ <a href="${context}/executor?execid=${job.execId}&job=${jobid}&attempt=${job.attempt}">Logs</a>
+ </td>
+ </tr>
#end
- </td>
- <td>
- <a href="${context}/manager?project=${projectName}&flow=${job.flowId}&job=${jobid}">${jobid}</a>
- </td>
- <td>
- <a href="${context}/manager?project=${projectName}&flow=${job.flowId}">${job.flowId}</a>
- </td>
- <td>$utils.formatDate(${job.startTime})</td>
- <td>$utils.formatDate(${job.endTime})</td>
- <td>$utils.formatDuration(${job.startTime}, ${job.endTime})</td>
- <td>
- <div class="status ${job.status}">
- $utils.formatStatus(${job.status})
- </div>
- </td>
- <td class="logLink">
- <a href="${context}/executor?execid=${job.execId}&job=${jobid}&attempt=${job.attempt}">Logs</a>
- </td>
- </tr>
+ #else
+ <tr>
+ <td colspan="8">No history</td>
+ </tr>
#end
- </tbody>
- </table>
+ </tbody>
+ </table>
+ </div>
- <ul>
+ <ul class="pagination" id="pageSelection">
<li id="previous" class="first"><a href="${context}/manager?project=${projectId}&job=${jobid}&history&page=${previous.page}&size=${previous.size}"><span class="arrow">←</span>Previous</a></li>
<li id="page1" #if($page1.selected) class="selected" #elseif ($page1.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page1.nextPage}&size=${page1.size}">${page1.page}</a></li>
<li id="page2" #if($page2.selected) class="selected" #elseif ($page2.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page2.nextPage}&size=${page2.size}">${page2.page}</a></li>
src/web/js/azkaban.jobhistory.view.js 117(+68 -49)
diff --git a/src/web/js/azkaban.jobhistory.view.js b/src/web/js/azkaban.jobhistory.view.js
index 29f0d12..9607258 100644
--- a/src/web/js/azkaban.jobhistory.view.js
+++ b/src/web/js/azkaban.jobhistory.view.js
@@ -20,15 +20,22 @@ var jobHistoryView;
azkaban.JobHistoryView = Backbone.View.extend({
events: {
},
+
initialize: function(settings) {
this.render();
},
- render : function(self) {
+
+ render: function(self) {
var data = this.model.get("data");
- var margin = {top: 20, right: 20, bottom: 30, left: 70},
- width = $(this.el).width() - margin.left - margin.right,
- height = 300 - margin.top - margin.bottom;
+ var margin = {
+ top: 20,
+ right: 20,
+ bottom: 30,
+ left: 70
+ };
+ var width = $(this.el).width() - margin.left - margin.right;
+ var height = 300 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
@@ -36,9 +43,9 @@ azkaban.JobHistoryView = Backbone.View.extend({
var y = d3.scale.linear()
.range([height, 0]);
- var xAxis = d3.svg.axis()
- .scale(x)
- .orient("bottom");
+ var xAxis = d3.svg.axis()
+ .scale(x)
+ .orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
@@ -59,49 +66,56 @@ azkaban.JobHistoryView = Backbone.View.extend({
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
- var xextent = d3.extent(data, function(d) { return d.startTime; });
- var diff = (xextent[1] - xextent[0])*0.05;
-
- xextent[0] -= diff;
- xextent[1] += diff;
- x.domain(xextent);
-
- var yextent = d3.extent(data, function(d) { return d.endTime - d.startTime; });
- var upperYbound = yextent[1]*1.25;
- y.domain([0, upperYbound]);
+ var xextent = d3.extent(data, function(d) {
+ return d.startTime;
+ });
+ var diff = (xextent[1] - xextent[0])*0.05;
- svg.append("g")
- .attr("class", "x axis")
- .attr("transform", "translate(0," + height + ")")
- .call(xAxis);
+ xextent[0] -= diff;
+ xextent[1] += diff;
+ x.domain(xextent);
- svg.append("g")
- .attr("class", "y axis")
- .call(yAxis)
- .append("text")
- .attr("transform", "rotate(-90)")
- .attr("y", 6)
- .attr("dy", ".71em")
- .style("text-anchor", "end")
- .text("Duration");
+ var yextent = d3.extent(data, function(d) {
+ return d.endTime - d.startTime;
+ });
+ var upperYbound = yextent[1]*1.25;
+ y.domain([0, upperYbound]);
+
+ svg.append("g")
+ .attr("class", "x axis")
+ .attr("transform", "translate(0," + height + ")")
+ .call(xAxis);
+
+ svg.append("g")
+ .attr("class", "y axis")
+ .call(yAxis)
+ .append("text")
+ .attr("transform", "rotate(-90)")
+ .attr("y", 6)
+ .attr("dy", ".71em")
+ .style("text-anchor", "end")
+ .text("Duration");
+
+ svg.append("path")
+ .datum(data)
+ .attr("class", "line")
+ .attr("d", line);
+
+ var node = svg.selectAll("g.node")
+ .data(data)
+ .attr("class", "node")
+ .enter().append("g")
+ .attr("transform", function(d) {
+ return "translate(" + x(d.startTime) + "," + y(d.endTime-d.startTime) + ")";
+ });
- svg.append("path")
- .datum(data)
- .attr("class", "line")
- .attr("d", line);
-
- var node = svg.selectAll("g.node")
- .data(data)
- .attr("class", "node")
- .enter().append("g")
- .attr("transform", function(d) { return "translate(" + x(d.startTime) + "," + y(d.endTime-d.startTime) + ")";});
-
-
- node.append("circle")
- .attr("r", 5)
- .attr("class", function(d) {return d.status;})
- .append("svg:title")
- .text(function(d) { return d.execId + ":" + d.flowId + " ran in " + getDuration(d.startTime, d.endTime)});
+ node.append("circle")
+ .attr("r", 5)
+ .attr("class", function(d) {return d.status;})
+ .append("svg:title")
+ .text(function(d) {
+ return d.execId + ":" + d.flowId + " ran in " + getDuration(d.startTime, d.endTime);
+ });
}
});
@@ -112,6 +126,11 @@ $(function() {
var selected;
var series = dataSeries;
dataModel = new azkaban.DataModel();
- dataModel.set({"data":series});
- jobDurationView = new azkaban.JobHistoryView({el:$('#timeGraph'), model: dataModel});
+ dataModel.set({
+ "data": series
+ });
+ jobDurationView = new azkaban.JobHistoryView({
+ el: $('#timeGraph'),
+ model: dataModel
+ });
});