azkaban-memoizeit
Changes
ISSUES 3(+2 -1)
src/less/bootstrap-azkaban.less 36(+36 -0)
src/web/js/azkaban.project.view.js 24(+11 -13)
src/web/js/azkaban.projectlog.view.js 142(+73 -69)
src/web/js/azkaban.schedule.panel.view.js 23(+11 -12)
Details
ISSUES 3(+2 -1)
diff --git a/ISSUES b/ISSUES
index 706c515..c15dc3f 100644
--- a/ISSUES
+++ b/ISSUES
@@ -6,5 +6,6 @@
- Fix sidebar on graph views.
- Unify error messages.
- Change chevron on My Projects list to proper expanders.
- - Redesign Project Page flows list.
- Fix dependency hovering for job list on flows page
+ - Fix bootstrap-datetimepicker to support picking time durations
+ - Properly connect values of new datetimepickers with back-end
diff --git a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
index 87b1d9e..c13dd91 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -43,7 +43,7 @@
<div class="az-page-header">
<div class="container">
- <h1>Executing Flows</h1>
+ <h1><a href="${context}/executor">Executing Flows</a></h1>
</div>
</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm b/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
index 038dcc4..2863c89 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
@@ -198,7 +198,7 @@
#end
*#
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary" id="execute-btn">Execute</button>
+ <button type="button" class="btn btn-success" id="execute-btn">Execute</button>
</div><!-- /modal-footer -->
</div><!-- /modal-content -->
</div><!-- /modal-dialog -->
diff --git a/src/java/azkaban/webapp/servlet/velocity/historypage.vm b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
index f139349..8c02855 100644
--- a/src/java/azkaban/webapp/servlet/velocity/historypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
@@ -51,7 +51,7 @@
<div class="container">
<div class="row">
<div class="col-lg-6">
- <h1>History</h1>
+ <h1><a href="${context}/history">History</a></h1>
</div>
<div class="col-lg-6">
<form id="search-form" method="get" class="form-inline az-page-header-form" role="form">
@@ -198,14 +198,12 @@
</div>
</div>
<div class="form-group">
- <label for="datetimebegin" class="col-sm-2 control-label">Date between</label>
- <div class="col-sm-10">
+ <label for="datetimebegin" class="col-sm-2 control-label">Between</label>
+ <div class="col-sm-4">
<input type="text" id="datetimebegin" value="" class="ui-datetime-container form-control">
</div>
- </div>
- <div class="form-group">
- <label for="datetimeend" class="col-sm-2 control-label">and</label>
- <div class="col-sm-10">
+ <label for="datetimeend" class="col-sm-2 control-label control-label-center">and</label>
+ <div class="col-sm-4">
<input type="text" id="datetimeend" value="" class="ui-datetime-container form-control">
</div>
</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index 5f61e0e..424cfbe 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -48,9 +48,9 @@
<div class="row">
<div class="col-lg-6">
#if ($allProjects)
- <h1>All Projects</h1>
+ <h1><a href="${context}/index">All Projects</a></h1>
#else
- <h1>My Projects</h1>
+ <h1><a href="${context}/index">My Projects</a></h1>
#end
</div>
<div class="col-lg-6">
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
index 3ee11c4..b2da81d 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
@@ -56,7 +56,7 @@
</div>
<div class="col-lg-6">
<div class="pull-right az-page-header-form">
- <a href="${context}/manager?project=${project.name}&job=$jobid&history" class="btn btn-default btn-sm">History</a>
+ <a href="${context}/manager?project=${project.name}&job=$jobid&history" class="btn btn-info btn-sm">History</a>
</div>
<div class="clearfix"></div>
</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
index bec33e7..ebdf2dc 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
@@ -68,7 +68,17 @@
</div>
Audit Logs
</div>
- <table class="table table-striped" id="logTable">
+ <table class="table table-striped" id="logTable">
+ <thead>
+ <tr>
+ <th>Time</th>
+ <th>User</th>
+ <th>Type</th>
+ <th>Message</th>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
</table>
</div>
</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectmodals.vm b/src/java/azkaban/webapp/servlet/velocity/projectmodals.vm
index a3524a0..2dc064a 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectmodals.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectmodals.vm
@@ -28,8 +28,8 @@
<div class="alert alert-danger" id="upload-project-modal-error-msg">$error_msg</div>
<fieldset class="form-horizontal">
<div class="form-group">
- <label for="path" class="col-sm-2 control-label">Job Archive</label>
- <div class="col-sm-10">
+ <label for="file" class="col-sm-3 control-label">Job Archive</label>
+ <div class="col-sm-9">
<input type="file" class="form-control" id="file" name="file">
</div>
</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index aa537dc..e2d0b5a 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -69,22 +69,20 @@
<div id="flow-tabs">
#if ($flows)
#foreach ($flow in $flows)
- <div class="panel panel-info" flow="${flow.id}" project="${project.name}">
+ <div class="panel panel-default" flow="${flow.id}" project="${project.name}">
<div class="panel-heading flow-expander" id="${flow.id}">
#if (${exec})
<div class="pull-right">
- <button type="button" class="btn btn-xs btn-primary execute-flow" flowId="${flow.id}">Execute Flow</button>
- <a href="${context}/manager?project=${project.name}&flow=${flow.id}#executions" class="btn btn-primary btn-xs">Executions</a>
- <a href="${context}/manager?project=${project.name}&flow=${flow.id}#summary" class="btn btn-primary btn-xs">Summary</a>
+ <button type="button" class="btn btn-xs btn-success execute-flow" flowId="${flow.id}">Execute Flow</button>
+ <a href="${context}/manager?project=${project.name}&flow=${flow.id}#executions" class="btn btn-info btn-xs">Executions</a>
+ <a href="${context}/manager?project=${project.name}&flow=${flow.id}#summary" class="btn btn-info btn-xs">Summary</a>
</div>
#end
<a href="${context}/manager?project=${project.name}&flow=${flow.id}">${flow.id}</a>
</div>
- <div id="${flow.id}-child" class="panel-collapse collapse">
- <table class="table">
- <tbody id="${flow.id}-tbody">
- </tbody>
- </table>
+ <div id="${flow.id}-child" class="panel-collapse panel-list collapse">
+ <ul class="list-group list-group-collapse" id="${flow.id}-tbody">
+ </ul>
</div>
</div>
#end
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index ab281d0..3036890 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -52,7 +52,7 @@
<div class="az-page-header">
<div class="container">
- <h1>Scheduled Flows</h1>
+ <h1><a href="${context}/schedule">Scheduled Flows</a></h1>
</div>
</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/schedulepanel.vm b/src/java/azkaban/webapp/servlet/velocity/schedulepanel.vm
index 7fc469c..3381d91 100644
--- a/src/java/azkaban/webapp/servlet/velocity/schedulepanel.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/schedulepanel.vm
@@ -25,60 +25,51 @@
<h4 class="modal-title">Schedule Flow Options</h4>
</div><!-- /modal-header -->
<div class="modal-body">
- <fieldset>
+ <fieldset class="form-horizontal">
<div class="form-group">
- <label>Schedule Time</label>
- <div class="form-inline">
- <div class="form-group">
- <input id="hour" type="text" size="2" value="12" class="form-control">
- </div>
- <div class="form-group">
- <input id="minutes" type="text" size="2" value="00" class="form-control">
- </div>
- <div class="form-group">
- <select id="am_pm" class="form-control">
- <option>pm</option>
- <option>am</option>
- </select>
- </div>
- <div class="form-group">
- <select id="timezone" class="form-control">
- <option>${timezone}</option>
- <option>UTC</option>
- </select>
- </div>
- </div>
+ <label class="col-sm-2 control-label">Time</label>
+ <div class="col-sm-7">
+ <input type="text" id="timepicker" class="form-control">
+ </div>
+ <div class="col-sm-3">
+ <select id="timezone" class="form-control">
+ <option>${timezone}</option>
+ <option>UTC</option>
+ </select>
+ </div>
</div>
<div class="form-group">
- <label>Schedule Date</label>
- <input type="text" id="datepicker" class="form-control">
+ <label class="col-sm-2 control-label">Date</label>
+ <div class="col-sm-10">
+ <input type="text" id="datepicker" class="form-control">
+ </div>
</div>
<div class="form-group">
- <label>Recurrence</label>
- <div class="form-inline">
- <div class="checkbox">
- <input id="is_recurring" type="checkbox" checked="checked">
- <label>repeat every</label>
- </div>
- <div class="form-group">
- <input id="period" type="text" size="2" value="1" class="form-control">
- </div>
- <div class="form-group">
- <select id="period_units" class="form-control">
- <option value="d">Days</option>
- <option value="h">Hours</option>
- <option value="m">Minutes</option>
- <option value="M">Months</option>
- <option value="w">Weeks</option>
- </select>
- </div>
- </div>
+ <label class="col-sm-2">Recurrence</label>
+ <div class="col-sm-3">
+ <div class="checkbox">
+ <input id="is_recurring" type="checkbox" checked="checked">
+ <label>repeat every</label>
+ </div>
+ </div>
+ <div class="col-sm-2">
+ <input id="period" type="text" size="2" value="1" class="form-control">
+ </div>
+ <div class="col-sm-3">
+ <select id="period_units" class="form-control">
+ <option value="d">Days</option>
+ <option value="h">Hours</option>
+ <option value="m">Minutes</option>
+ <option value="M">Months</option>
+ <option value="w">Weeks</option>
+ </select>
+ </div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary" id="schedule-button">Schedule</button>
+ <button type="button" class="btn btn-success" id="schedule-button">Schedule</button>
</div>
</div>
</div>
src/less/bootstrap-azkaban.less 36(+36 -0)
diff --git a/src/less/bootstrap-azkaban.less b/src/less/bootstrap-azkaban.less
index 7fe2b9b..74f5089 100644
--- a/src/less/bootstrap-azkaban.less
+++ b/src/less/bootstrap-azkaban.less
@@ -46,6 +46,31 @@
margin-bottom: 15px;
}
+.panel-list {
+ border: 0;
+}
+
+.list-group-collapse {
+ margin: 0;
+ .list-group-item {
+ border-radius: 0;
+ border-left: 0;
+ border-right: 0;
+
+ &:first-child {
+ border-top: 0;
+ }
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ button {
+ margin-left: 3px;
+ }
+ }
+}
+
.az-project-row {
cursor: pointer;
}
@@ -55,6 +80,11 @@
cursor: pointer;
}
+table.table-properties {
+ table-layout: fixed;
+ word-wrap: break-word;
+}
+
// Flow summary.
td.property-key {
width: 25%;
@@ -184,6 +214,12 @@ td.property-value-half {
}
}
+@media (min-width: 768px) {
+ .form-horizontal .control-label-center {
+ text-align: center;
+ }
+}
+
.navbar-logo {
float: left;
padding: 15px 15px;
src/web/js/azkaban.project.view.js 24(+11 -13)
diff --git a/src/web/js/azkaban.project.view.js b/src/web/js/azkaban.project.view.js
index 6f04950..c278d3b 100644
--- a/src/web/js/azkaban.project.view.js
+++ b/src/web/js/azkaban.project.view.js
@@ -80,21 +80,19 @@ azkaban.FlowTableView = Backbone.View.extend({
var name = job.id;
var level = job.level;
var nodeId = flowId + "-" + name;
-
- var tr = document.createElement("tr");
- $(tr).addClass("jobrow");
- var idtd = document.createElement("td");
- $(idtd).addClass("tb-name");
- $(idtd).addClass("tb-job-name");
- idtd.flowId = flowId;
- idtd.projectName = project;
- idtd.jobName = name;
+
+ var li = document.createElement("li");
+ $(li).addClass("list-group-item");
+ li.flowId = flowId;
+ li.projectName = project;
+ li.jobName = name;
if (execAccess) {
var hoverMenuDiv = document.createElement("div");
$(hoverMenuDiv).addClass("pull-right");
var divRunJob = document.createElement("button");
+ $(divRunJob).attr('type', 'button');
$(divRunJob).addClass("btn");
$(divRunJob).addClass("btn-success");
$(divRunJob).addClass("btn-xs");
@@ -105,6 +103,7 @@ azkaban.FlowTableView = Backbone.View.extend({
$(hoverMenuDiv).append(divRunJob);
var divRunWithDep = document.createElement("button");
+ $(divRunWithDep).attr('type', 'button');
$(divRunWithDep).addClass("btn");
$(divRunWithDep).addClass("btn-success");
$(divRunWithDep).addClass("btn-xs");
@@ -114,7 +113,7 @@ azkaban.FlowTableView = Backbone.View.extend({
divRunWithDep.flowId = flowId;
$(hoverMenuDiv).append(divRunWithDep);
- $(idtd).append(hoverMenuDiv);
+ $(li).append(hoverMenuDiv);
}
var ida = document.createElement("a");
@@ -127,9 +126,8 @@ azkaban.FlowTableView = Backbone.View.extend({
$(ida).css("margin-left", level * 20);
$(ida).attr("href", requestURL + name);
- $(idtd).append(ida);
- $(tr).append(idtd);
- $(innerTable).append(tr);
+ $(li).append(ida);
+ $(innerTable).append(li);
}
},
src/web/js/azkaban.projectlog.view.js 142(+73 -69)
diff --git a/src/web/js/azkaban.projectlog.view.js b/src/web/js/azkaban.projectlog.view.js
index 79c257a..0653146 100644
--- a/src/web/js/azkaban.projectlog.view.js
+++ b/src/web/js/azkaban.projectlog.view.js
@@ -35,74 +35,78 @@ var typeMapping = {
var projectLogView;
azkaban.ProjectLogView = Backbone.View.extend({
events: {
- "click #updateLogBtn" : "handleUpdate"
+ "click #updateLogBtn": "handleUpdate"
},
- initialize: function(settings) {
+
+ initialize: function(settings) {
this.model.set({"current": 0});
this.handleUpdate();
},
- handleUpdate: function(evt) {
+
+ handleUpdate: function(evt) {
var current = this.model.get("current");
var requestURL = contextURL + "/manager";
var model = this.model;
+ var requestData = {
+ "project": projectName,
+ "ajax": "fetchProjectLogs",
+ "size": 1000,
+ "skip": 0
+ };
- $.get(
- requestURL,
- {"project": projectName, "ajax":"fetchProjectLogs", "size": 1000, "skip": 0 },
- function(data) {
+ var successHandler = function(data) {
console.log("fetchLogs");
- if (data.error) {
- showDialog("Error", data.error);
- }
- else {
- // Get the columns to map to the values.
- var columns = data.columns;
- var columnMap = {};
- for (var i =0; i < columns.length; ++i) {
- columnMap[columns[i]] = i;
- }
- var logSection = $("#logTable");
- $(logSection).empty();
- var logData = data.logData;
- for (var i = 0; i < logData.length; ++i) {
- var event = logData[i];
- var user = event[columnMap['user']];
- var time = event[columnMap['time']];
- var type = event[columnMap['type']];
- var message = event[columnMap['message']];
-
- var containerEvent = document.createElement("tr");
- $(containerEvent).addClass("projectEvent");
-
- var containerTime = document.createElement("td");
- $(containerTime).addClass("time");
- $(containerTime).text(getDateFormat(new Date(time)));
-
- var containerUser = document.createElement("td");
- $(containerUser).addClass("user");
- $(containerUser).text(user);
-
- var containerType = document.createElement("td");
- $(containerType).addClass("type");
- $(containerType).addClass(type);
- $(containerType).text(typeMapping[type] ? typeMapping[type] : type);
-
- var containerMessage = document.createElement("td");
- $(containerMessage).addClass("message");
- $(containerMessage).text(message);
-
- $(containerEvent).append(containerTime);
- $(containerEvent).append(containerUser);
- $(containerEvent).append(containerType);
- $(containerEvent).append(containerMessage);
-
- $(logSection).append(containerEvent);
- }
-
- model.set({"log": data});
- }
- }
- );
+ if (data.error) {
+ showDialog("Error", data.error);
+ return;
+ }
+ // Get the columns to map to the values.
+ var columns = data.columns;
+ var columnMap = {};
+ for (var i =0; i < columns.length; ++i) {
+ columnMap[columns[i]] = i;
+ }
+ var logSection = $("#logTable").find("tbody")[0];
+ $(logSection).empty();
+ var logData = data.logData;
+ for (var i = 0; i < logData.length; ++i) {
+ var event = logData[i];
+ var user = event[columnMap['user']];
+ var time = event[columnMap['time']];
+ var type = event[columnMap['type']];
+ var message = event[columnMap['message']];
+
+ var containerEvent = document.createElement("tr");
+ $(containerEvent).addClass("projectEvent");
+
+ var containerTime = document.createElement("td");
+ $(containerTime).addClass("time");
+ $(containerTime).text(getDateFormat(new Date(time)));
+
+ var containerUser = document.createElement("td");
+ $(containerUser).addClass("user");
+ $(containerUser).text(user);
+
+ var containerType = document.createElement("td");
+ $(containerType).addClass("type");
+ $(containerType).addClass(type);
+ $(containerType).text(typeMapping[type] ? typeMapping[type] : type);
+
+ var containerMessage = document.createElement("td");
+ $(containerMessage).addClass("message");
+ $(containerMessage).text(message);
+
+ $(containerEvent).append(containerTime);
+ $(containerEvent).append(containerUser);
+ $(containerEvent).append(containerType);
+ $(containerEvent).append(containerMessage);
+
+ $(logSection).append(containerEvent);
+ }
+
+ model.set({"log": data});
+ };
+ $.get(requestURL, requestData, successHandler);
}
});
@@ -112,16 +116,16 @@ var showDialog = function(title, message) {
$('#messageBox').text(message);
$('#messageDialog').modal({
- closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
- position: ["20%",],
- containerId: 'confirm-container',
- containerCss: {
- 'height': '220px',
- 'width': '565px'
- },
- onShow: function (dialog) {
- }
- });
+ closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
+ position: ["20%",],
+ containerId: 'confirm-container',
+ containerCss: {
+ 'height': '220px',
+ 'width': '565px'
+ },
+ onShow: function (dialog) {
+ }
+ });
}
src/web/js/azkaban.schedule.panel.view.js 23(+11 -12)
diff --git a/src/web/js/azkaban.schedule.panel.view.js b/src/web/js/azkaban.schedule.panel.view.js
index 1541fbb..aa73f31 100644
--- a/src/web/js/azkaban.schedule.panel.view.js
+++ b/src/web/js/azkaban.schedule.panel.view.js
@@ -23,7 +23,7 @@ azkaban.SchedulePanelView = Backbone.View.extend({
},
initialize: function(settings) {
- $("#datepicker").css("backgroundColor", "transparent");
+ $("#timepicker").datetimepicker({pickDate: false});
$("#datepicker").datetimepicker({pickTime: false});
},
@@ -39,12 +39,12 @@ azkaban.SchedulePanelView = Backbone.View.extend({
},
scheduleFlow: function() {
- var hourVal = $('#hour').val();
- var minutesVal = $('#minutes').val();
- var ampmVal = $('#am_pm').val();
+ var timeVal = $('#timepicker').val();
var timezoneVal = $('#timezone').val();
+
var dateVal = $('#datepicker').val();
- var is_recurringVal = $('#is_recurring').val();
+
+ var is_recurringVal = $('#is_recurring').val();
var periodVal = $('#period').val();
var periodUnits = $('#period_units').val();
@@ -53,9 +53,10 @@ azkaban.SchedulePanelView = Backbone.View.extend({
console.log("Creating schedule for " + projectName + "." +
scheduleData.flow);
+
+ var scheduleTime = moment(timeVal, 'h/mm A').format('h,mm,A,') + timezoneVal;
+ console.log(scheduleTime);
- var scheduleTime = $('#hour').val() + "," + $('#minutes').val() + "," +
- $('#am_pm').val() + "," + $('#timezone').val();
var scheduleDate = $('#datepicker').val();
var is_recurring = document.getElementById('is_recurring').checked
? 'on' : 'off';
@@ -75,11 +76,9 @@ azkaban.SchedulePanelView = Backbone.View.extend({
}
else {
schedulePanelView.hideSchedulePanel();
- messageDialogView.show("Flow Scheduled", data.message,
- function() {
- window.location.href = scheduleURL;
- }
- );
+ messageDialogView.show("Flow Scheduled", data.message, function() {
+ window.location.href = scheduleURL;
+ });
}
};