Przeglądaj źródła

[oozie] Added now, calendar and filechooser to submit modal

Enrico Berti 11 lat temu
rodzic
commit
7c0d2d5

+ 14 - 0
apps/oozie/src/oozie/templates/editor/coordinator_editor.mako

@@ -404,6 +404,18 @@ ${ commonheader(_("Coordinator Editor"), "Oozie", user) | n,unicode }
 
 
 <div id="submit-coord-modal" class="modal hide"></div>
+<div id="chooseFile" class="modal hide fade">
+  <div class="modal-header">
+      <a href="#" class="close" data-dismiss="modal">&times;</a>
+      <h3>${_('Choose a file')}</h3>
+  </div>
+  <div class="modal-body">
+      <div id="filechooser">
+      </div>
+  </div>
+  <div class="modal-footer">
+  </div>
+</div>
 
 
 </div>
@@ -419,6 +431,8 @@ ${ commonheader(_("Coordinator Editor"), "Oozie", user) | n,unicode }
 <link href="/static/css/jqCron.css" rel="stylesheet" type="text/css" />
 <script src="/static/js/jqCron.js" type="text/javascript"></script>
 
+<script src="/static/ext/js/moment.min.js" type="text/javascript" charset="utf-8"></script>
+
 <link rel="stylesheet" href="/static/ext/select2/select2.css">
 <script src="/static/ext/select2/select2.min.js" type="text/javascript" charset="utf-8"></script>
 

+ 39 - 19
apps/oozie/src/oozie/templates/editor/submit_job_popup.mako

@@ -21,14 +21,14 @@
 <%namespace name="utils" file="../utils.inc.mako" />
 
 
-<form action="${ action }" method="POST">
+<form action="${ action }" method="POST" class="form-horizontal submit-form">
   ${ csrf_token(request) | n,unicode }
   <div class="modal-header">
     <a href="#" class="close" data-dismiss="modal">&times;</a>
     <h3>${ _('Submit this job?') }</h3>
   </div>
   <div class="modal-body">
-    <fieldset>
+    
       <div id="param-container">
 
        ${ params_form.management_form | n,unicode }
@@ -37,44 +37,64 @@
           % for hidden in form.hidden_fields():
             ${ hidden | n,unicode }
           % endfor
-          <div class="fieldWrapper">
-            <div class="row-fluid
-              % if form['name'].form.initial.get('name') == 'oozie.use.system.libpath':
+
+          <div class="control-group
+          % if form['name'].form.initial.get('name') == 'oozie.use.system.libpath':
                 hide
               % endif
-              ">
-              <div class="span3">
-                ${ form['name'].form.initial.get('name') }
-              </div>
-              <div class="span6">
-                ${ utils.render_field(form['value'], show_label=False) }
-                ..
-              </div>
-              <div class="btn-group span3">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
+          ">
+            <label class="control-label">${ form['name'].form.initial.get('name') }</label>
+            <div class="controls">
+              ${ utils.render_field(form['value'], show_label=False, extra_attrs={'class': 'filechooser-input input-xlarge'}) }
+              <div class="btn-group">
+              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                         aria-expanded="false">
                   <i class="fa fa-calendar"></i>
                   <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" role="menu">
                   <li>
-                    <a href="#">
+                    <a class="pointer now-link">
                       ${ _('Now') }
                     </a>
-                    <a href="#">
+                    <a class="pointer calendar-link">
                       ${ _('Calendar') }
                     </a>
                   </li>
                 </ul>
-              </div>
+                </div>
             </div>
           </div>
+
          % endfor
       </div>
-    </fieldset>
+
   </div>
   <div class="modal-footer">
     <a href="#" class="btn" data-dismiss="modal">${ _('Cancel') }</a>
     <input id="submit-btn" type="submit" class="btn btn-primary" value="${ _('Submit') }"/>
   </div>
 </form>
+
+<script type="text/javascript">
+  $('.submit-form .filechooser-input').each(function(){
+      $(this).after(getFileBrowseButton($(this), true, null, true));
+  });
+
+  $(".now-link").on("click", function(){
+    $(this).parents(".controls").find("input[type='text']").val(moment().format("YYYY-MM-DD[T]HH:mm:SS"));
+  });
+
+  $(".calendar-link").on("click", function(){
+    var DATE_FORMAT = "YYYY-MM-DD";
+    var _el = $(this).parents(".controls").find("input[type='text']");
+    _el.datepicker({
+      format: DATE_FORMAT.toLowerCase()
+     }).on("changeDate", function () {
+      _el.datepicker('hide');
+      _el.val(_el.val() + "T00:00:00");
+    });
+   _el.datepicker('show');
+  }); 
+</script>
+

+ 62 - 0
apps/oozie/static/css/common-editor.css

@@ -52,3 +52,65 @@
   top: 70px;
 }
 
+input[type="text"].filechooser-input {
+  border-right: none;
+  margin-bottom: 0;
+}
+
+input[type="text"].filechooser-input, input[type="text"].half {
+  width: 50%;
+}
+
+input[type="text"].seventy {
+  width: 70%;
+}
+
+.fileChooserBtn {
+  height: 31px;
+}
+
+input[type="text"].filechooser-input.input-xlarge {
+  width: 270px;
+}
+
+#file-uploader {
+  float: left;
+  margin-right: 3px;
+  margin-top: 10px;
+}
+
+.qq-upload-button {
+  display: inline-block;
+  height: 29px;
+  min-height: 29px;
+  padding: 0 8px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 29px;
+  color: #444;
+  text-align: center;
+  text-shadow: none;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  background-image: -moz-linear-gradient(top,#fff,#f1f1f1);
+  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f1f1f1));
+  background-image: -webkit-linear-gradient(top,#fff,#f1f1f1);
+  background-image: -o-linear-gradient(top,#fff,#f1f1f1);
+  background-image: linear-gradient(to bottom,#fff,#f1f1f1);
+  background-repeat: repeat-x;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-color: #f1f1f1 #f1f1f1 #cbcbcb;
+  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+  border-color: rgba(0,0,0,0.1);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#fff1f1f1',GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+

+ 21 - 0
apps/oozie/static/css/coordinator-editor.css

@@ -388,11 +388,32 @@ em {
   width: 90px;
 }
 
+.modal-body .control-label {
+  width: 160px;
+}
+
 .form-horizontal .controls {
   margin-left: 98px;
 }
 
+.modal-body .controls {
+  margin-left: 180px;
+}
+
+.modal-body .control-group {
+  display: inline-block;
+}
+
 .inline-block {
   display: inline-block;
 }
 
+#submit-coord-modal .modal-body {
+  overflow: visible;
+}
+
+.datepicker {
+  z-index: 1300;
+}
+
+}

+ 0 - 58
apps/oozie/static/css/workflow-editor.css

@@ -455,23 +455,6 @@ body {
   min-height: 10px !important;;
 }
 
-input[type="text"].filechooser-input {
-  border-right: none;
-  margin-bottom: 0;
-}
-
-input[type="text"].filechooser-input, input[type="text"].half {
-  width: 50%;
-}
-
-input[type="text"].seventy {
-  width: 70%;
-}
-
-.fileChooserBtn {
-  height: 31px;
-}
-
 #settingsModal h4 {
   margin-top: 30px;
 }
@@ -545,44 +528,3 @@ canvas {
 ul.unstyled li {
   white-space: nowrap;
 }
-
-#file-uploader {
-  float: left;
-  margin-right: 3px;
-  margin-top: 10px;
-}
-
-.qq-upload-button {
-  display: inline-block;
-  height: 29px;
-  min-height: 29px;
-  padding: 0 8px;
-  margin: 0;
-  font-size: 13px;
-  font-weight: bold;
-  line-height: 29px;
-  color: #444;
-  text-align: center;
-  text-shadow: none;
-  vertical-align: middle;
-  cursor: pointer;
-  background-color: #f9f9f9;
-  background-image: -moz-linear-gradient(top,#fff,#f1f1f1);
-  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f1f1f1));
-  background-image: -webkit-linear-gradient(top,#fff,#f1f1f1);
-  background-image: -o-linear-gradient(top,#fff,#f1f1f1);
-  background-image: linear-gradient(to bottom,#fff,#f1f1f1);
-  background-repeat: repeat-x;
-  border: 1px solid rgba(0,0,0,0.1);
-  border-color: #f1f1f1 #f1f1f1 #cbcbcb;
-  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
-  border-color: rgba(0,0,0,0.1);
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#fff1f1f1',GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}

+ 22 - 20
desktop/core/static/js/ko.hue-bindings.js

@@ -1150,7 +1150,7 @@ function getFileBrowseButton(inputElement, selectFolder, valueAccessor, stripHdf
 
     function callFileChooser() {
       var _initialPath = $.trim(inputElement.val()) != "" ? inputElement.val() : "/";
-      if ((allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.skipInitialPathIfEmpty && inputElement.val() == "") || allBindingsAccessor().filechooserPrefixSeparator){
+      if ((allBindingsAccessor && allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.skipInitialPathIfEmpty && inputElement.val() == "") || (allBindingsAccessor && allBindingsAccessor().filechooserPrefixSeparator)){
         _initialPath = "";
       }
       if (inputElement.data("fullPath")){
@@ -1172,14 +1172,14 @@ function getFileBrowseButton(inputElement, selectFolder, valueAccessor, stripHdf
           handleChoice(filePath, stripHdfsPrefix);
           $("#chooseFile").modal("hide");
         },
-        createFolder: allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.createFolder,
-        uploadFile: allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.uploadFile,
+        createFolder: allBindingsAccessor && allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.createFolder,
+        uploadFile: allBindingsAccessor && allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.uploadFile,
         initialPath: _initialPath,
         errorRedirectPath: "",
         forceRefresh: true,
-        showExtraHome: allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.showExtraHome,
-        extraHomeProperties: allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.extraHomeProperties ? allBindingsAccessor().filechooserOptions.extraHomeProperties : {},
-        filterExtensions: allBindingsAccessor().filechooserFilter ? allBindingsAccessor().filechooserFilter : ""
+        showExtraHome: allBindingsAccessor && allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.showExtraHome,
+        extraHomeProperties: allBindingsAccessor && allBindingsAccessor().filechooserOptions && allBindingsAccessor().filechooserOptions.extraHomeProperties ? allBindingsAccessor().filechooserOptions.extraHomeProperties : {},
+        filterExtensions: allBindingsAccessor && allBindingsAccessor().filechooserFilter ? allBindingsAccessor().filechooserFilter : ""
       });
       $("#chooseFile").modal("show");
       $("#chooseFile").on("hidden", function(){
@@ -1188,7 +1188,7 @@ function getFileBrowseButton(inputElement, selectFolder, valueAccessor, stripHdf
     }
 
     function handleChoice(filePath, stripHdfsPrefix) {
-      if (allBindingsAccessor().filechooserPrefixSeparator){
+      if (allBindingsAccessor && allBindingsAccessor().filechooserPrefixSeparator){
         filePath = inputElement.val().split(allBindingsAccessor().filechooserPrefixSeparator)[0] + '=' + filePath;
       }
       if (stripHdfsPrefix){
@@ -1198,26 +1198,28 @@ function getFileBrowseButton(inputElement, selectFolder, valueAccessor, stripHdf
         inputElement.val("hdfs://" + filePath);
       }
       inputElement.change();
-      if (typeof valueAccessor() == "function" || typeof valueAccessor().value == "function") {
-        if (valueAccessor().value){
-          valueAccessor().value(inputElement.val());
-          if (valueAccessor().displayJustLastBit){
-            inputElement.data("fullPath", inputElement.val());
-            inputElement.attr("data-original-title", inputElement.val());
-            var _val = inputElement.val();
-            inputElement.val(_val.split("/")[_val.split("/").length - 1])
+      if (valueAccessor){
+        if (typeof valueAccessor() == "function" || typeof valueAccessor().value == "function") {
+          if (valueAccessor().value){
+            valueAccessor().value(inputElement.val());
+            if (valueAccessor().displayJustLastBit){
+              inputElement.data("fullPath", inputElement.val());
+              inputElement.attr("data-original-title", inputElement.val());
+              var _val = inputElement.val();
+              inputElement.val(_val.split("/")[_val.split("/").length - 1])
+            }
+          }
+          else {
+            valueAccessor()(inputElement.val());
           }
         }
         else {
-          valueAccessor()(inputElement.val());
+          valueAccessor(inputElement.val());
         }
       }
-      else {
-        valueAccessor(inputElement.val());
-      }
     }
   });
-  if (allBindingsAccessor().filechooserDisabled){
+  if (allBindingsAccessor && allBindingsAccessor().filechooserDisabled){
     _btn.addClass("disabled").attr("disabled", "disabled");
   }
   return _btn;