Explorer-UI - review feedback

* Bugfix for connection log table * ace editors for read only json fields Signed-off-by: thfries <thomas.fries0@gmail.com>
eclipse-ditto · Jul 20, 2022 · 7d28348 · 7d28348
1 parent 4d1b314
commit 7d28348
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 21 deletions.
diff --git a/ui/modules/connections/connections.html b/ui/modules/connections/connections.html
@@ -162,8 +162,9 @@ <h5 data-bs-toggle="collapse" data-bs-target="#tabConnectionHelper">
                                 Refresh
                             </button>
                         </div>
-                        <textarea class="form-control form-control-sm" style="resize:none; flex-grow: 1;"
-                            spellcheck="false" id="textareaConnectionStatusDetail"></textarea>
+                        <div class="ace_container" style="flex-grow: 1;">
+                            <div class="script_editor" id="connectionStatusDetail"></div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -203,8 +204,9 @@ <h6>Connection Logs</h6>
         </div>
         <div class="col-md-4 resizable_flex_column">
             <h6>Connection Log Detail</h6>
-            <textarea class="form-control form-control-sm" style="resize:none; flex-grow: 1;" spellcheck="false"
-                id="textareaConnectionLogDetail"></textarea>
+            <div class="ace_container" style="flex-grow: 1;">
+                <div class="script_editor" id="connectionLogDetail"></div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/ui/modules/connections/connections.js b/ui/modules/connections/connections.js
@@ -35,15 +35,15 @@ let dom = {
   buttonResetConnectionLogs: null,
   buttonRetrieveConnectionMetrics: null,
   buttonResetConnectionMetrics: null,
-  textareaConnectionLogDetail: null,
-  textareaConnectionStatusDetail: null,
   tabConnections: null,
   collapseConnections: null,
 };
 
 let connectionEditor;
 let incomingEditor;
 let outgoingEditor;
+let connectionLogDetail;
+let connectionStatusDetail;
 
 let theConnection;
 let connectionLogs;
@@ -55,13 +55,11 @@ export function ready() {
 
   Utils.getAllElementsById(dom);
 
-  connectionEditor = ace.edit('connectionEditor');
-  incomingEditor = ace.edit('connectionIncomingScript');
-  outgoingEditor = ace.edit('connectionOutgoingScript');
-
-  connectionEditor.session.setMode('ace/mode/json');
-  incomingEditor.session.setMode('ace/mode/javascript');
-  outgoingEditor.session.setMode('ace/mode/javascript');
+  connectionEditor = Utils.createAceEditor('connectionEditor', 'ace/mode/json');
+  incomingEditor = Utils.createAceEditor('connectionIncomingScript', 'ace/mode/javascript');
+  outgoingEditor = Utils.createAceEditor('connectionOutgoingScript', 'ace/mode/javascript');
+  connectionLogDetail = Utils.createAceEditor('connectionLogDetail', 'ace/mode/json', true);
+  connectionStatusDetail = Utils.createAceEditor('connectionStatusDetail', 'ace/mode/json', true);
 
   loadConnectionTemplates();
 
@@ -85,16 +83,16 @@ export function ready() {
   });
 
   dom.tbodyConnectionLogs.addEventListener('click', (event) => {
-    dom.textareaConnectionLogDetail.value = JSON.stringify(connectionLogs[event.target.parentNode.rowIndex], null, 2);
+    connectionLogDetail.setValue(JSON.stringify(connectionLogs[event.target.parentNode.rowIndex - 1], null, 2), -1);
   });
 
   incomingEditor.on('blur', function() {
     theConnection.mappingDefinitions.javascript.options.incomingScript = incomingEditor.getValue();
-    connectionEditor.setValue(JSON.stringify(theConnection, null, 2));
+    connectionEditor.setValue(JSON.stringify(theConnection, null, 2), -1);
   });
   outgoingEditor.on('blur', function() {
     theConnection.mappingDefinitions.javascript.options.outgoingScript = outgoingEditor.getValue();
-    connectionEditor.setValue(JSON.stringify(theConnection, null, 2));
+    connectionEditor.setValue(JSON.stringify(theConnection, null, 2), -1);
   });
   connectionEditor.on('blur', function() {
     theConnection = JSON.parse(connectionEditor.getValue());
@@ -123,7 +121,7 @@ export function ready() {
   dom.buttonRetrieveConnectionStatus.onclick = () => {
     Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
     API.callConnectionsAPI('retrieveStatus', (connectionStatus) => {
-      dom.textareaConnectionStatusDetail.value = JSON.stringify(connectionStatus, null, 2);
+      connectionStatusDetail.setValue(JSON.stringify(connectionStatus, null, 2), -1);
     },
     dom.inputConnectionId.value);
   };
@@ -141,7 +139,7 @@ export function ready() {
   dom.buttonRetrieveConnectionLogs.onclick = () => {
     Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
     dom.tbodyConnectionLogs.innerHTML = '';
-    dom.textareaConnectionLogDetail.value = null;
+    connectionLogDetail.setValue('');
     API.callConnectionsAPI('retrieveConnectionLogs', (response) => {
       connectionLogs = response.connectionLogs;
       response.connectionLogs.forEach((entry) => {
@@ -177,18 +175,18 @@ export function ready() {
 function setConnection(connection) {
   theConnection = connection;
   dom.inputConnectionId.value = (theConnection && theConnection.id) ? theConnection.id : null;
-  connectionEditor.setValue(theConnection ? JSON.stringify(theConnection, null, 2) : '');
+  connectionEditor.setValue(theConnection ? JSON.stringify(theConnection, null, 2) : '', -1);
   const withJavaScript = theConnection && theConnection.mappingDefinitions && theConnection.mappingDefinitions.javascript;
   incomingEditor.setValue(withJavaScript ?
     theConnection.mappingDefinitions.javascript.options.incomingScript :
     '', -1);
   outgoingEditor.setValue(withJavaScript ?
     theConnection.mappingDefinitions.javascript.options.outgoingScript :
     '', -1);
-  dom.textareaConnectionStatusDetail.value = null;
+  connectionStatusDetail.setValue('');
+  connectionLogDetail.setValue('');
   dom.tbodyConnectionMetrics.innerHTML = '';
   dom.tbodyConnectionLogs.innerHTML = '';
-  dom.textareaConnectionLogDetail.value = null;
 }
 
 function loadConnections() {

diff --git a/ui/modules/utils.js b/ui/modules/utils.js
@@ -200,3 +200,22 @@ export function assert(condition, message, validatedElement) {
     throw new UserException(message);
   }
 }
+
+/**
+ * Creates and configures an ace editor
+ * @param {String} domId id of the dom element for the ace editor
+ * @param {*} sessionMode session mode of the ace editor
+ * @param {*} readOnly sets the editor to read only and removes the line numbers
+ * @return {*} created ace editor
+ */
+export function createAceEditor(domId, sessionMode, readOnly) {
+  const result = ace.edit(domId);
+
+  result.session.setMode(sessionMode);
+  if (readOnly) {
+    result.setReadOnly(true);
+    result.renderer.setShowGutter(false);
+  }
+
+  return result;
+}