Changed custom data sources textarea to ACE editor

api/functions/netdata-functions.php

@@ -147,13 +147,20 @@ function netdataSettngsArray()
             HTML
         ],
         [
-            'type' => 'textbox',
-            'name' => 'netdataCustom',
-            'class' => 'javaTextarea',
+            'type' => 'html',
+            'name' => 'netdataCustomTextAce',
+            'class' => 'jsonTextarea hidden',
             'label' => 'Custom definitions',
             'override' => 12,
+            'html' => '<div id="netdataCustomTextAce" style="height: 300px;">' . htmlentities($GLOBALS['netdataCustom']) . '</div>',
+        ],
+        [
+            'type' => 'textbox',
+            'name' => 'netdataCustom',
+            'class' => 'jsonTextarea hidden',
+            'id' => 'netdataCustomText',
+            'label' => '',
             'value' => $GLOBALS['netdataCustom'],
-            'attr' => 'rows="10"',
         ]
     ];
 

js/custom.js

@@ -1987,4 +1987,23 @@ $(document).on('click', ".ipInfo", function(){
 $(document).on('click', '.allGroupsList', function() {
     console.log($(this));
     $(this).toggleClass('active');
+});
+// Control init of custom netdata JSON editor
+$(document).on('click', 'li a[aria-controls="Custom data"]', function() {
+    var resizeEditor = function(jsonEditor) {
+        const aceEditor = jsonEditor;
+        const newHeight = aceEditor.getSession().getScreenLength() * (aceEditor.renderer.lineHeight + aceEditor.renderer.scrollBar.getWidth());
+        aceEditor.container.style.height = `${newHeight}px`;
+        aceEditor.resize();
+    }
+
+    jsonEditor = ace.edit("netdataCustomTextAce");
+    var JsonMode = ace.require("ace/mode/javascript").Mode;
+    jsonEditor.session.setMode(new JsonMode());
+    jsonEditor.setTheme("ace/theme/idle_fingers");
+    jsonEditor.setShowPrintMargin(false);
+    jsonEditor.session.on('change', function(delta) {
+        $('#netdataCustomText').val(jsonEditor.getValue());
+        $('#customize-appearance-form-save').removeClass('hidden');
+    });
 });