azkaban-uncached
Changes
src/java/azkaban/webapp/servlet/velocity/jobpage.vm 300(+171 -129)
src/web/js/azkaban.jobedit.view.js 18(+7 -11)
Details
src/java/azkaban/webapp/servlet/velocity/jobpage.vm 300(+171 -129)
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
index 8c19a53..caec118 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
@@ -17,17 +17,14 @@
<!DOCTYPE html>
<html>
<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
- <script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>
- <script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
- <script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
- <script type="text/javascript" src="${context}/js/namespace.js"></script>
- <script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
- <script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
+#parse ("azkaban/webapp/servlet/velocity/style2.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
+ <link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
+ <script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
<script type="text/javascript" src="${context}/js/azkaban.jobedit.view.js"></script>
- <link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript">
var contextURL = "${context}";
var currentTime = ${currentTime};
@@ -40,136 +37,181 @@
</script>
</head>
<body>
-#set($current_page="all")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
- <div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>
+
+#set ($current_page="all")
+#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
-#if($errorMsg)
- <div class="box-error-message">$errorMsg</div>
-#else
- <div class="content">
- #if($error_message != "null")
- <div class="box-error-message">$error_message</div>
- #elseif($success_message != "null")
- <div class="box-success-message">$success_message</div>
- #end
- <div id="all-jobs-content">
- <div class="section-hd">
- <h2><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <span>$jobid</span></a></h2>
- <div class="section-sub-hd">
- <h4><a href="${context}/manager?project=${project.name}">Project <span>$project.name</span></a></h4>
- <h4 class="separator">></h4>
- <h4><a href="${context}/manager?project=${project.name}&flow=${flowid}">Flow <span>$flowid</span></a></h4>
- <h4 class="separator">></h4>
- <h4><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <span>$jobid</span></a></h4>
- </div>
-
- <a id="jobs-logs-btn" class="btn2" href="${context}/manager?project=${project.name}&job=$jobid&history">Job History</a>
- <a id="edit-job-btn" class="btn1" onclick='jobEditView.show("${project.name}", "${flowid}", "${jobid}")'>Job Edit</a>
+ <div class="container">
+
+## Page error or success message.
+
+#if ($errorMsg)
+ <div class="panel panel-danger">
+ <div class="panel-heading">Error</div>
+ <div class="panel-body">
+ $errorMsg
</div>
</div>
-
- <div id="job-summary">
- <table class="summary-table">
- <tr><td class="first">Type:</td><td>$jobtype</td></tr>
- <tr><td class="first">Dependencies:</td><td>
-#if ($dependencies)
-#foreach($dependency in $dependencies)
- <a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependency">$dependency</a>
-#end
-#else
- <span>No Dependencies</span>
-#end
- </td></tr>
- <tr><td class="first">Dependents:</td><td>
-#if ($dependents)
-#foreach($dependent in $dependents)
- <span class="nowrap"><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependent">$dependent</a></span>
-#end
#else
- <span>No Dependencies</span>
-#end
- </td></tr>
- <tr><td class="first">Properties:</td><td>
-#if ($properties)
-#foreach($property in $properties)
- <!--a>$property</a><span>,</span-->
- <span class="nowrap"><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$property">$property</a></span>
-#end
-#else
- <span>No Property Files For This Job</span>
-#end
- </td></tr>
- </table>
+ #if ($error_message != "null")
+ <div class="alert alert-danger">$error_message</div>
+ #elseif ($success_message != "null")
+ <div class="alert alert-success">$success_message</div>
+ #end
+
+ ## Alert message
+
+ <div class="alert alert-dismissable alert-messaging" id="messaging">
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+ <p id="messaging-message"></p>
</div>
-
- <table id="all-jobs" class="all-jobs job-table parameters">
- <thead>
- <tr>
- <th class="tb-pname">Parameter Name</th>
- <th class="tb-pvalue">Value</th>
- </tr>
- </thead>
- <tbody>
-#foreach($parameter in $parameters)
- <tr>
- <td class="first">$parameter.first</td><td>$parameter.second</td>
- </tr>
-#end
- </tbody>
- </table>
- </div>
-#end
+ ## Page header
- <!-- modal content -->
-
- <div id="jobEditModalBackground" class="modalBackground2">
- <div id="job-edit-pane" class="modal modalContainer2">
- <a href='#' title='Close' class='modal-close'>x</a>
- <h3>Job Description Edit</h3>
- <div class="optionsPane">
- <div id="generalPanel" class="generalPanel panel">
- <div id="mustHave">
- <h4>Job Essentials</h4>
- <dl>
- <dt>Job Name</dt>
- <dd>
- <label id="jobName"></label>
- </dd>
- <dt>Job Type</dt>
- <dd>
- <label id="jobType"></label>
- </dd>
- </dl>
- </div>
- <br></br>
- <!--div id="jobTypeSpecific">
- <h4>Job Type Specific parameters</h4>
- </div-->
- <div id="generalJobSetting">
- <h4>General Job Settings (Be Aware: A Job May Be Shared By Multiple Flows. The Change Will Be Global!)</h4>
- <div class="tableDiv">
- <table id="generalProps">
- <thead>
- <tr>
- <th>Name</th>
- <th>Value</th>
- </tr>
- </thead>
- <tbody>
- <tr id="addRow"><td id="addRow-col" colspan="2"><span class="addIcon"></span><a href="#">Add Row</a></td></tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
+ <div class="page-header">
+ <h1>
+ <a href="${context}/manager?project=${project.name}">$project.name</a> /
+ <a href="${context}/manager?project=${project.name}&flow=${flowid}">$flowid</a>
+ </h1>
+ </div>
+
+ <div class="row">
+ <div class="col-lg-8">
+
+ ## Breadcrumb
+
+ <ol class="breadcrumb">
+ <li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
+ <li><a href="${context}/manager?project=${project.name}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
+ <li><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}"><strong>Job</strong> $jobid</a></li>
+ </ol>
+
+ ## Job details table
+
+ <button id="jobs-logs-btn" class="btn btn-default" href="${context}/manager?project=${project.name}&job=$jobid&history">Job History</button>
+ <button id="edit-job-btn" class="btn btn-primary" onclick='jobEditView.show("${project.name}", "${flowid}", "${jobid}")'>Job Edit</button>
+
+ <table id="all-jobs" class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th class="tb-pname">Parameter Name</th>
+ <th class="tb-pvalue">Value</th>
+ </tr>
+ </thead>
+ <tbody>
+ #foreach ($parameter in $parameters)
+ <tr>
+ <td class="first">$parameter.first</td><td>$parameter.second</td>
+ </tr>
+ #end
+ </tbody>
+ </table>
+ </div><!-- /col-lg-8 -->
+ <div class="col-lg-4">
+ <div class="well" id="job-summary">
+ <h3>Job <small>$jobid</small></h3>
+ <p><strong>Job Type</strong> $jobtype</p>
</div>
- <div class="actions">
- <a class="yes btn1" id="set-btn" >Set/Change Job Description</a>
- <a class="no simplemodal-close btn3" id="cancel-btn" >Cancel</a>
+
+ ## Dependencies
+
+ <div class="panel panel-default">
+ <div class="panel-heading">Dependencies</div>
+ <ul class="list-group">
+ #if ($dependencies)
+ #foreach($dependency in $dependencies)
+ <li class="list-group-item">
+ <a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependency">$dependency</a>
+ </li>
+ #end
+ #else
+ <li class="list-group-item">No Dependencies</li>
+ #end
+ </ul>
+ </div><!-- /panel -->
+
+ ## Dependents
+
+ <div class="panel panel-default">
+ <div class="panel-heading">Dependents</div>
+ <ul class="list-group">
+ #if ($dependents)
+ #foreach($dependent in $dependents)
+ <li class="list-group-item">
+ <a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependent">$dependent</a>
+ </li>
+ #end
+ #else
+ <li class="list-group-item">No Dependencies</li>
+ #end
+
+ </ul>
+ </div><!-- /panel -->
+
+ <div class="panel panel-default">
+ <div class="panel-heading">Properties</div>
+ <ul class="list-group">
+ #if ($properties)
+ #foreach($property in $properties)
+ <li class="list-group-item">
+ <a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$property">$property</a>
+ </li>
+ #end
+ #else
+ <li class="list-group-item">No Property Files For This Job</li>
+ #end
+ </ul>
+ </div><!-- /panel -->
+
+ </div><!-- /col-lg-4 -->
+ </div><!-- /row -->
+
+## Edit job modal.
+
+ <div class="modal fade" id="job-edit-pane">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h4 class="modal-title">Edit Job</h4>
+ </div>
+ <div class="modal-body">
+ <h4>Job Essentials</h4>
+ <dl>
+ <dt>Job Name</dt>
+ <dd id="jobName"></dd>
+ <dt>Job Type</dt>
+ <dd id="jobType"></dd>
+ </dl>
+ <h4>General Job Settings</h4>
+ <p><strong>Be Aware:</strong> A job may be shared by multiple flows. The change will be global!</p>
+ <table id="generalProps" class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr id="addRow">
+ <td id="addRow-col" colspan="2">
+ <button type="button" class="btn btn-xs btn-success">Add Row</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </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="set-btn">Set/Change Job Description</button>
+ </div>
</div>
+ </div>
</div>
- </div>
+
+#end
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+ </div><!-- /container -->
</body>
</html>
src/web/js/azkaban.jobedit.view.js 18(+7 -11)
diff --git a/src/web/js/azkaban.jobedit.view.js b/src/web/js/azkaban.jobedit.view.js
index fcc3e97..bdfd452 100644
--- a/src/web/js/azkaban.jobedit.view.js
+++ b/src/web/js/azkaban.jobedit.view.js
@@ -22,18 +22,18 @@ azkaban.JobEditView = Backbone.View.extend({
"click" : "closeEditingTarget",
"click #set-btn": "handleSet",
"click #cancel-btn": "handleCancel",
- "click .modal-close": "handleCancel",
"click #addRow": "handleAddRow",
"click table .editable": "handleEditColumn",
"click table .removeIcon": "handleRemoveColumn"
},
+
initialize: function(setting) {
this.projectURL = contextURL + "manager"
this.generalParams = {}
this.overrideParams = {}
},
+
handleCancel: function(evt) {
- $('#jobEditModalBackground').hide();
$('#job-edit-pane').hide();
var tbl = document.getElementById("generalProps").tBodies[0];
var rows = tbl.rows;
@@ -42,6 +42,7 @@ azkaban.JobEditView = Backbone.View.extend({
tbl.deleteRow(0);
}
},
+
show: function(projectName, flowName, jobName) {
this.projectName = projectName;
this.flowName = flowName;
@@ -49,9 +50,7 @@ azkaban.JobEditView = Backbone.View.extend({
var projectURL = this.projectURL
-
- $('#jobEditModalBackground').show();
- $('#job-edit-pane').show();
+ $('#job-edit-pane').modal();
var handleAddRow = this.handleAddRow;
@@ -244,10 +243,7 @@ azkaban.JobEditView = Backbone.View.extend({
});
$(function() {
-
-
- jobEditView = new azkaban.JobEditView({el:$('#job-edit-pane')});
-
-
-
+ jobEditView = new azkaban.JobEditView({
+ el: $('#job-edit-pane')
+ });
});