ソースを参照

HUE-5098 [oozie] Swap readonly Codemirror to Ace

Enrico Berti 9 年 前
コミット
c4120a4

+ 3 - 2
apps/oozie/src/oozie/static/oozie/css/coordinator.css

@@ -1,5 +1,6 @@
-.CodeMirror.cm-s-default {
-  height:500px;
+#definitionEditor {
+  min-height: 250px;
+  margin-bottom: 10px;
 }
 
 .tooltip-inner {

+ 10 - 20
apps/oozie/src/oozie/templates/dashboard/list_oozie_bundle.mako

@@ -277,7 +277,7 @@ ${ layout.menubar(section='bundles', dashboard=True) }
       </div>
 
       <div class="tab-pane" id="definition">
-        <textarea id="definitionEditor">${ oozie_bundle.definition.decode('utf-8', 'replace') }</textarea>
+        <div id="definitionEditor">${ oozie_bundle.definition.decode('utf-8', 'replace') }</div>
       </div>
     </div>
 
@@ -307,13 +307,12 @@ ${ layout.menubar(section='bundles', dashboard=True) }
 
 <script src="${ static('oozie/js/dashboard-utils.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
-<script src="${ static('desktop/ext/js/codemirror-3.11.js') }"></script>
-<link rel="stylesheet" href="${ static('desktop/ext/css/codemirror.css') }">
-<script src="${ static('desktop/ext/js/codemirror-xml.js') }"></script>
+<script src="${ static('desktop/js/ace/ace.js') }" type="text/javascript"></script>
 
 <style type="text/css">
-  .CodeMirror.cm-s-default {
-    height:500px;
+  #definitionEditor {
+    min-height: 250px;
+    margin-bottom: 10px;
   }
 </style>
 
@@ -368,22 +367,13 @@ ${ layout.menubar(section='bundles', dashboard=True) }
     });
 
 
-    var definitionEditor = $("#definitionEditor")[0];
-
-    var codeMirror = CodeMirror(function(elt) {
-      definitionEditor.parentNode.replaceChild(elt, definitionEditor);
-      }, {
-        value: definitionEditor.value,
+    var editor = ace.edit("definitionEditor");
+    editor.setOptions({
       readOnly: true,
-      lineNumbers: true
-    });
-
-    // force refresh on tab change
-    $("a[data-toggle='tab']").on("shown", function (e) {
-      if ($(e.target).attr("href") == "#definition") {
-        codeMirror.refresh();
-      }
+      maxLines: Infinity
     });
+    editor.setTheme($.totalStorage("hue.ace.theme") || "ace/theme/hue");
+    editor.getSession().setMode("ace/mode/xml");
 
     $(".confirmationModal").click(function(){
       var _this = $(this);

+ 7 - 16
apps/oozie/src/oozie/templates/dashboard/list_oozie_coordinator.mako

@@ -397,7 +397,7 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
             </div>
 
             <div class="tab-pane" id="definition" style="margin-bottom: 10px;">
-              <textarea id="definitionEditor">${ oozie_coordinator.definition.decode('utf-8', 'replace') }</textarea>
+              <div id="definitionEditor">${ oozie_coordinator.definition.decode('utf-8', 'replace') }</div>
             </div>
 
             % if oozie_coordinator.has_sla:
@@ -479,9 +479,7 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
 
 <script src="${ static('oozie/js/dashboard-utils.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
-<script src="${ static('desktop/ext/js/codemirror-3.11.js') }"></script>
-<link rel="stylesheet" href="${ static('desktop/ext/css/codemirror.css') }">
-<script src="${ static('desktop/ext/js/codemirror-xml.js') }"></script>
+<script src="${ static('desktop/js/ace/ace.js') }" type="text/javascript"></script>
 
 % if oozie_coordinator.has_sla:
 <script src="${ static('oozie/js/sla.utils.js') }" type="text/javascript" charset="utf-8"></script>
@@ -549,21 +547,16 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
     $(".dataTables_filter").hide();
     % endif
 
-    var definitionEditor = $("#definitionEditor")[0];
-
-    var codeMirror = CodeMirror(function(elt) {
-      definitionEditor.parentNode.replaceChild(elt, definitionEditor);
-      }, {
-        value: definitionEditor.value,
+    var editor = ace.edit("definitionEditor");
+    editor.setOptions({
       readOnly: true,
-      lineNumbers: true
+      maxLines: Infinity
     });
+    editor.setTheme($.totalStorage("hue.ace.theme") || "ace/theme/hue");
+    editor.getSession().setMode("ace/mode/xml");
 
     // force refresh on tab change
     $("a[data-toggle='tab']").on("shown", function (e) {
-      if ($(e.target).attr("href") == "#definition") {
-        codeMirror.refresh();
-      }
       % if oozie_coordinator.has_sla:
       if ($(e.target).attr("href") == "#sla") {
         window.setTimeout(function () {
@@ -764,13 +757,11 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
       });
     };
 
-    var $codeMirror = $(".CodeMirror");
     var tabPanelTop = $("#tab-panel").position().top;
     var $logPre = $("#log pre").css("overflow", "auto");
     var $window = $(window);
 
     function resizeTabs() {
-      $codeMirror.height($window.height() - tabPanelTop - 185);
       $logPre.height($window.height() - tabPanelTop - 204);
     }
 

+ 10 - 13
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflow.mako

@@ -293,7 +293,7 @@ ${ layout.menubar(section='workflows', dashboard=True) }
         </div>
 
         <div class="tab-pane" id="definition">
-          <textarea id="definitionEditor">${ oozie_workflow.definition.decode('utf-8', 'replace') }</textarea>
+          <div id="definitionEditor">${ oozie_workflow.definition.decode('utf-8', 'replace') }</div>
         </div>
 
         % if oozie_workflow.has_sla:
@@ -361,9 +361,7 @@ ${ layout.menubar(section='workflows', dashboard=True) }
 <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout-mapping.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/datatables-paging-0.1.js') }" type="text/javascript" charset="utf-8"></script>
-<script src="${ static('desktop/ext/js/codemirror-3.11.js') }"></script>
-<link rel="stylesheet" href="${ static('desktop/ext/css/codemirror.css') }">
-<script src="${ static('desktop/ext/js/codemirror-xml.js') }"></script>
+<script src="${ static('desktop/js/ace/ace.js') }" type="text/javascript"></script>
 
 % if oozie_workflow.has_sla:
 <script src="${ static('oozie/js/sla.utils.js') }" type="text/javascript" charset="utf-8"></script>
@@ -385,8 +383,9 @@ ${ dashboard.import_layout() }
 %endif
 
 <style type="text/css">
-  .CodeMirror.cm-s-default {
-    height: 700px;
+  #definitionEditor {
+    min-height: 250px;
+    margin-bottom: 10px;
   }
 
   #sla th {
@@ -531,12 +530,13 @@ ${ utils.slaGlobal() }
       $(this).removeClass("hide");
     });
 
-    var definitionEditor = $("#definitionEditor")[0];
-
-    var codeMirror = CodeMirror.fromTextArea(definitionEditor, {
+    var editor = ace.edit("definitionEditor");
+    editor.setOptions({
       readOnly: true,
-      lineNumbers:true
+      maxLines: Infinity
     });
+    editor.setTheme($.totalStorage("hue.ace.theme") || "ace/theme/hue");
+    editor.getSession().setMode("ace/mode/xml");
 
     // force refresh on tab change
     $("a[data-toggle='tab']").on("shown", function (e) {
@@ -548,9 +548,6 @@ ${ utils.slaGlobal() }
       else {
         $("canvas").remove();
       }
-      if ($(e.target).attr("href") == "#definition") {
-        codeMirror.refresh();
-      }
       % if oozie_workflow.has_sla:
       if ($(e.target).attr("href") == "#sla") {
         window.setTimeout(function () {

+ 14 - 20
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflow_action.mako

@@ -26,6 +26,12 @@
 ${ commonheader(_("Workflow Action"), "oozie", user) | n,unicode }
 ${ layout.menubar(section='workflows', dashboard=True) }
 
+<style type="text/css">
+  #configurationEditor {
+    min-height: 250px;
+    margin-bottom: 10px;
+  }
+</style>
 
 <div class="container-fluid">
   <div class="card card-small">
@@ -155,7 +161,7 @@ ${ layout.menubar(section='workflows', dashboard=True) }
         </div>
 
         <div id="configuration" class="tab-pane" style="min-height:400px">
-          <textarea id="configurationEditor">${ action.conf }</textarea>
+          <div id="configurationEditor">${ action.conf }</div>
         </div>
 
         <div id="child-jobs" class="tab-pane">
@@ -200,30 +206,18 @@ ${ layout.menubar(section='workflows', dashboard=True) }
     </div>
 </div>
 
-
-<script src="${ static('desktop/ext/js/codemirror-3.11.js') }"></script>
-<link rel="stylesheet" href="${ static('desktop/ext/css/codemirror.css') }">
-<script src="${ static('desktop/ext/js/codemirror-xml.js') }"></script>
+<script src="${ static('desktop/js/ace/ace.js') }" type="text/javascript"></script>
 
 <script type="text/javascript">
 
   $(document).ready(function() {
-    var definitionEditor = $("#configurationEditor")[0];
-
-    var codeMirror = CodeMirror(function (elt) {
-      definitionEditor.parentNode.replaceChild(elt, definitionEditor);
-    }, {
-      value:definitionEditor.value,
-      readOnly:true,
-      lineNumbers:true
-    });
-
-    // force refresh on tab change
-    $("a[data-toggle='tab']").on("shown", function (e) {
-      if ($(e.target).attr("href") == "#configuration") {
-        codeMirror.refresh();
-      }
+    var editor = ace.edit("configurationEditor");
+    editor.setOptions({
+      readOnly: true,
+      maxLines: Infinity
     });
+    editor.setTheme($.totalStorage("hue.ace.theme") || "ace/theme/hue");
+    editor.getSession().setMode("ace/mode/xml");
   });
 </script>