Move stringifyPretty to utils, replace all JSON.stringify usage with …

…util function. Apply suggested changes Signed-off-by: Vasil Vasilev <vasil.vasilev@bosch.com>
eclipse-ditto · Nov 7, 2023 · f71113b · f71113b
1 parent 4237843
commit f71113b
Show file tree

Hide file tree

Showing 16 changed files with 57 additions and 74 deletions.
diff --git a/ui/main.scss b/ui/main.scss
@@ -206,22 +206,3 @@ h5>.badge {
 button.busy .spinner-border {
     visibility:visible !important;
 }
-
-.btn-outline-blue {
-    --bs-btn-color:#fff;
-    --bs-btn-bg:#007bff;
-    --bs-btn-border-color:#007bff;
-    --bs-btn-hover-color:#fff;
-    --bs-btn-hover-bg:#0069d9;
-    --bs-btn-hover-border-color:#0069d9;
-    --bs-btn-focus-shadow-rgb:13,110,253;
-    --bs-btn-active-color:#007bff;
-    --bs-btn-active-bg:#007bff;
-    --bs-btn-active-border-color:#007bff;
-    --bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --bs-btn-disabled-color:#007bff;
-    --bs-btn-disabled-bg:transparent;
-    --bs-btn-disabled-border-color:#007bff;
-    --bs-gradient:none;
-  }
-
diff --git a/ui/modules/connections/connectionsCRUD.ts b/ui/modules/connections/connectionsCRUD.ts
@@ -69,7 +69,7 @@ function onScriptEditorBlur(scriptEditor, fieldName) {
     const editConnection = JSON.parse(connectionEditor.getValue());
     initializeMappings(editConnection);
     editConnection.mappingDefinitions.javascript.options[fieldName] = scriptEditor.getValue();
-    connectionEditor.setValue(JSON.stringify(editConnection, null, 2), -1);
+    connectionEditor.setValue(Utils.stringifyPretty(editConnection), -1);
   };
 
   function initializeMappings(connection) {
@@ -162,7 +162,7 @@ function setConnection(connection) {
   outgoingEditor.setValue('');
   if (theConnection) {
     dom.crudConnection.idValue = theConnection.id ? theConnection.id : null;
-    connectionEditor.setValue(JSON.stringify(theConnection, null, 2), -1);
+    connectionEditor.setValue(Utils.stringifyPretty(theConnection), -1);
     if (theConnection.mappingDefinitions && theConnection.mappingDefinitions.javascript) {
       incomingEditor.setValue(theConnection.mappingDefinitions.javascript.options.incomingScript, -1);
       outgoingEditor.setValue(theConnection.mappingDefinitions.javascript.options.outgoingScript, -1);

diff --git a/ui/modules/connections/connectionsMonitor.ts b/ui/modules/connections/connectionsMonitor.ts
@@ -70,7 +70,7 @@ function onResetConnectionMetricsClick() {
 }
 
 function onConnectionLogTableClick(event) {
-  connectionLogDetail.setValue(JSON.stringify(connectionLogs[event.target.parentNode.rowIndex - 1], null, 2), -1);
+  connectionLogDetail.setValue(Utils.stringifyPretty(connectionLogs[event.target.parentNode.rowIndex - 1]), -1);
   connectionLogDetail.session.getUndoManager().reset();
 }
 
@@ -106,7 +106,7 @@ function retrieveConnectionMetrics() {
 function retrieveConnectionStatus() {
   Utils.assert(selectedConnectionId, 'Please select a connection', dom.tableValidationConnections);
   API.callConnectionsAPI('retrieveStatus', (connectionStatus) => {
-    connectionStatusDetail.setValue(JSON.stringify(connectionStatus, null, 2), -1);
+    connectionStatusDetail.setValue(Utils.stringifyPretty(connectionStatus), -1);
     connectionStatusDetail.session.getUndoManager().reset();
   },
   selectedConnectionId);

diff --git a/ui/modules/environments/environments.ts b/ui/modules/environments/environments.ts
@@ -234,7 +234,7 @@ function updateEnvEditors() {
     const selectedEnvironment = environments[selectedEnvName];
     dom.crudEnvironmentFields.idValue = selectedEnvName;
     dom.crudEnvironmentJson.idValue = selectedEnvName;
-    settingsEditor.setValue(JSON.stringify(selectedEnvironment, null, 2), -1);
+    settingsEditor.setValue(Utils.stringifyPretty(selectedEnvironment), -1);
     dom.inputApiUri.value = selectedEnvironment.api_uri;
     dom.inputSearchNamespaces.value = selectedEnvironment.searchNamespaces ?? '';
     dom.selectDittoVersion.value = selectedEnvironment.ditto_version ? selectedEnvironment.ditto_version : '3';

diff --git a/ui/modules/piggyback/piggyback.html b/ui/modules/piggyback/piggyback.html
@@ -13,48 +13,46 @@
 <div>
     <div class="row-cols-md-auto" style="height: 87%;">
         <h5>Piggyback commands</h5>
-        <hr/>
+        <hr />
         <div class="col-md-auto resizable_flex_column">
             <div class="row mb-1" style="flex-grow: 0.9;">
                 <div class="col-md-6 resizable_flex_column">
                     <div class="col-md-auto resizable_flex_column">
                         <div class="row mb-1">
                             <div class="col-md-6 resizable_flex_column">
                                 <div class="col-md-auto">
-                                    <button id="showTemplates" class="btn btn-outline-primary btn-sm button_round_left"
-                                            data-bs-toggle="modal" data-bs-target="#templatesModal">
+                                    <button id="showTemplates" class="btn btn-outline-primary btn-sm button_round_right"
+                                        data-bs-toggle="modal" data-bs-target="#templatesModal">
                                         Insert Template
                                     </button>
                                 </div>
                             </div>
                             <div class="col-md-6 resizable_flex_column">
                                 <div class="col-md-auto">
-                                    <button class="btn btn-outline-blue btn-sm button_round_left" style="float: right;"
-                                            id="buttonSubmit">
+                                    <button class="btn btn-outline-primary btn-sm button_round_right"
+                                        style="float: right;" id="buttonSubmit">
                                         Submit
                                     </button>
-                                    <button hidden class="btn btn-outline-secondary btn-sm button_round_left"
-                                            style="float: right;" id="buttonCancel">
+                                    <button hidden class="btn btn-outline-secondary btn-sm button_round_right"
+                                        style="float: right;" id="buttonCancel">
                                         Cancel
                                     </button>
                                 </div>
                             </div>
                         </div>
                         <div class="input-group input-group-sm mb-1 has-validation">
                             <label class="input-group-text">Service</label>
-                            <select class="form-select-sm" id="serviceSelector"
-                                    style="margin-top: auto; margin-bottom: auto;"></select>
-                            <button class="btn btn-outline-primary btn-sm button_round_left"
-                                    id="buttonLoadServiceInstances">
+                            <select class="form-select-sm" id="serviceSelector"></select>
+                            <button class="btn btn-outline-primary btn-sm button_round_right"
+                                id="buttonLoadServiceInstances">
                                 <i class="bi bi-arrow-clockwise"></i>
                             </button>
                             <div class="invalid-feedback"></div>
                         </div>
 
                         <div class="input-group input-group-sm mb-1" hidden id="instanceContainer">
-                            <a class="nav-link active">Instance:</a>
-                            <select class="form-select-sm" id="instanceSelector"
-                                    style="margin-top: auto; margin-bottom: auto;"></select>
+                            <a class="input-group-text">Instance:</a>
+                            <select class="form-select-sm" id="instanceSelector"></select>
                         </div>
 
                         <div class="input-group input-group-sm mb-1 has-validation" style="width: 20%;">

diff --git a/ui/modules/piggyback/piggyback.ts b/ui/modules/piggyback/piggyback.ts
@@ -94,8 +94,8 @@ export function onInsertTemplate(template) {
     onServiceSelected();
     dom.timeout.value = chosenTemplate.timeout;
     dom.targetActorSelection.value = chosenTemplate.targetActorSelection;
-    Utils.setEditorValue(aceHeadersEditor, stringifyPretty(chosenTemplate.headers));
-    Utils.setEditorValue(aceCommandEditor, stringifyPretty(chosenTemplate.command));
+    Utils.setEditorValue(aceHeadersEditor, Utils.stringifyPretty(chosenTemplate.headers));
+    Utils.setEditorValue(aceCommandEditor, Utils.stringifyPretty(chosenTemplate.command));
 }
 
 async function loadServicesAndInstances() {
@@ -185,8 +185,8 @@ function initAceEditors() {
     aceResponse.setOption('wrap', true);
 
 
-    aceHeadersEditor.setOption('placeholder', stringifyPretty(piggybackPlaceholders.headers));
-    aceCommandEditor.setOption('placeholder', stringifyPretty(piggybackPlaceholders.command));
+    aceHeadersEditor.setOption('placeholder', Utils.stringifyPretty(piggybackPlaceholders.headers));
+    aceCommandEditor.setOption('placeholder', Utils.stringifyPretty(piggybackPlaceholders.command));
 
     aceHeadersEditor.getSession().on('changeAnnotation', onEditorChangeAnnotation);
     aceCommandEditor.getSession().on('changeAnnotation', onEditorChangeAnnotation);
@@ -231,7 +231,7 @@ async function submitPiggybackCommand() {
         promise.then((result: any) => {
             onRequestDone();
             result.json().then(resultJson => {
-                Utils.setEditorValue(aceResponse, stringifyPretty(resultJson));
+                Utils.setEditorValue(aceResponse, Utils.stringifyPretty(resultJson));
                 dom.responseStatus.innerHTML = result.status;
             });
         }).catch(err => {
@@ -304,7 +304,3 @@ function validateAndReturn(condition, message, validatedElement) {
 
     return true;
 }
-
-function stringifyPretty(jsonObject) {
-    return JSON.stringify(jsonObject, null, 4);
-}
diff --git a/ui/modules/piggyback/templates.html b/ui/modules/piggyback/templates.html
@@ -20,14 +20,12 @@
             <div class="modal-body">
                 <div class="input-group input-group-sm mb-1">
                     <a class="nav-link active">Service: </a>
-                    <select class="form-select-sm" id="templateServiceSelector"
-                        style="margin-top: auto; margin-bottom: auto;"></select>
+                    <select class="form-select-sm" id="templateServiceSelector"></select>
                 </div>
 
                 <div class="input-group input-group-sm mb-1">
                     <a class="nav-link active">Template:</a>
-                    <select class="form-select-sm" id="templateSelector"
-                        style="margin-top: auto; margin-bottom: auto;"></select>
+                    <select class="form-select-sm" id="templateSelector"></select>
                 </div>
 
                 <pre class="ace_container" id="commandPreview"></pre>

diff --git a/ui/modules/piggyback/templates.ts b/ui/modules/piggyback/templates.ts
@@ -88,7 +88,7 @@ function onTemplateSelected() {
     if (selectedTemplate) {
         let templateBody = buildPiggybackCommand(selectedTemplate.targetActorSelection,
             selectedTemplate.headers, selectedTemplate.command);
-        dom.commandPreview.innerHTML = JSON.stringify(templateBody, null, 2);
+        dom.commandPreview.innerHTML = Utils.stringifyPretty(templateBody);
     } else {
         dom.commandPreview.innerHTML = "";
     }

diff --git a/ui/modules/policies/policies.ts b/ui/modules/policies/policies.ts
@@ -106,7 +106,7 @@ export function ready() {
       selectedSubject = event.target.parentNode.id;
       Utils.tableAdjustSelection(dom.tbodyWhoami, (row) => row.id === selectedSubject);
       subjectEditor.setValue(
-          JSON.stringify(thePolicy.entries[selectedEntry].subjects[selectedSubject], null, 2), -1);
+        Utils.stringifyPretty(thePolicy.entries[selectedEntry].subjects[selectedSubject]), -1);
     }
     dom.inputSubjectId.value = selectedSubject;
   };
@@ -150,7 +150,7 @@ export function ready() {
     } else {
       selectedResource = event.target.parentNode.id;
       resourceEditor.setValue(
-          JSON.stringify(thePolicy.entries[selectedEntry].resources[selectedResource], null, 2), -1);
+        Utils.stringifyPretty(thePolicy.entries[selectedEntry].resources[selectedResource]), -1);
     }
     dom.inputResourceId.value = selectedResource;
   };
@@ -187,7 +187,7 @@ export function ready() {
 
   dom.ulResourceTemplates.addEventListener('click', (event) => {
     dom.inputResourceId.value = event.target.textContent;
-    resourceEditor.setValue(JSON.stringify(policyTemplates.resources[dom.inputResourceId.value], null, 2), -1);
+    resourceEditor.setValue(Utils.stringifyPretty(policyTemplates.resources[dom.inputResourceId.value]), -1);
   });
 
   // WhoAmI -------------
@@ -286,7 +286,7 @@ function setEntry(policy, entryLabel = null) {
       );
       if (key === selectedSubject) {
         dom.inputSubjectId.value = key;
-        subjectEditor.setValue(JSON.stringify(policy.entries[entryLabel].subjects[key], null, 2), -1);
+        subjectEditor.setValue(Utils.stringifyPretty(policy.entries[entryLabel].subjects[key]), -1);
       }
     });
     Object.keys(policy.entries[entryLabel].resources).forEach((key) => {
@@ -295,7 +295,7 @@ function setEntry(policy, entryLabel = null) {
       );
       if (key === selectedResource) {
         dom.inputResourceId.value = key;
-        resourceEditor.setValue(JSON.stringify(policy.entries[entryLabel].resources[key], null, 2), -1);
+        resourceEditor.setValue(Utils.stringifyPretty(policy.entries[entryLabel].resources[key]), -1);
       }
     });
   }

diff --git a/ui/modules/things/featureMessages.ts b/ui/modules/things/featureMessages.ts
@@ -94,7 +94,7 @@ export async function ready() {
       dom.inputMessageTemplate.value = event.target.textContent;
       dom.inputMessageSubject.value = template.subject;
       dom.inputMessageTimeout.value = template.timeout;
-      acePayload.setValue(JSON.stringify(template.payload, null, 2), -1);
+      acePayload.setValue(Utils.stringifyPretty(template.payload), -1);
       acePayload.session.getUndoManager().markClean();
     }
   });
@@ -127,7 +127,7 @@ function messageFeature() {
     dom.buttonMessageSend.classList.remove('busy');
     dom.buttonMessageSend.disabled = false;
     if (dom.inputMessageTimeout.value > 0) {
-      aceResponse.setValue(JSON.stringify(data, null, 2), -1);
+      aceResponse.setValue(Utils.stringifyPretty(data), -1);
     }
   }).catch((err) => {
     dom.buttonMessageSend.classList.remove('busy');

diff --git a/ui/modules/things/features.ts b/ui/modules/things/features.ts
@@ -176,12 +176,12 @@ function updateFeatureEditors(featureJson) {
   if (featureJson) {
     dom.inputFeatureDefinition.value = featureJson['definition'] ? featureJson.definition : null;
     if (featureJson['properties']) {
-      featurePropertiesEditor.setValue(JSON.stringify(featureJson.properties, null, 4), -1);
+      featurePropertiesEditor.setValue(Utils.stringifyPretty(featureJson.properties), -1);
     } else {
       featurePropertiesEditor.setValue('');
     }
     if (featureJson['desiredProperties']) {
-      featureDesiredPropertiesEditor.setValue(JSON.stringify(featureJson.desiredProperties, null, 4), -1);
+      featureDesiredPropertiesEditor.setValue(Utils.stringifyPretty(featureJson.desiredProperties), -1);
     } else {
       featureDesiredPropertiesEditor.setValue('');
     }

diff --git a/ui/modules/things/messagesIncoming.ts b/ui/modules/things/messagesIncoming.ts
@@ -46,7 +46,7 @@ export function ready() {
 }
 
 function onMessageTableClick(event) {
-  messageDetail.setValue(JSON.stringify(messages[event.target.parentNode.rowIndex - 1], null, 2), -1);
+  messageDetail.setValue(Utils.stringifyPretty(messages[event.target.parentNode.rowIndex - 1]), -1);
   messageDetail.session.getUndoManager().reset();
 }
 

diff --git a/ui/modules/things/thingMessages.ts b/ui/modules/things/thingMessages.ts
@@ -86,7 +86,7 @@ export async function ready() {
       dom.inputThingMessageTemplate.value = event.target.textContent;
       dom.inputThingMessageSubject.value = template.subject;
       dom.inputThingMessageTimeout.value = template.timeout;
-      acePayload.setValue(JSON.stringify(template.payload, null, 2), -1);
+      acePayload.setValue(Utils.stringifyPretty(template.payload), -1);
       acePayload.session.getUndoManager().markClean();
     }
   });
@@ -118,7 +118,7 @@ function messageThing() {
     dom.buttonThingMessageSend.classList.remove('busy');
     dom.buttonThingMessageSend.disabled = false;
     if (dom.inputThingMessageTimeout.value > 0) {
-      aceResponse.setValue(JSON.stringify(data, null, 2), -1);
+      aceResponse.setValue(Utils.stringifyPretty(data), -1);
     }
   }).catch((err) => {
     dom.buttonThingMessageSend.classList.remove('busy');

diff --git a/ui/modules/things/thingsCRUD.ts b/ui/modules/things/thingsCRUD.ts
@@ -108,7 +108,7 @@ function onThingDefinitionsClick(event) {
   Things.setTheThing(null);
   // isEditing = true;
   dom.inputThingDefinition.value = event.target.textContent;
-  thingJsonEditor.setValue(JSON.stringify(thingTemplates[event.target.textContent], null, 2), -1);
+  thingJsonEditor.setValue(Utils.stringifyPretty(thingTemplates[event.target.textContent]), -1);
 }
 
 /**
@@ -144,7 +144,7 @@ function onThingChanged(thingJson) {
       delete thingCopy['_created'];
       delete thingCopy['_modified'];
       delete thingCopy['_context'];
-      thingJsonEditor.setValue(JSON.stringify(thingCopy, null, 2), -1);
+      thingJsonEditor.setValue(Utils.stringifyPretty(thingCopy), -1);
       thingJsonEditor.session.getUndoManager().reset();
     } else {
       dom.crudThings.idValue = null;
@@ -181,7 +181,7 @@ function onEditToggle(event) {
 
   function initializeEditors(thingJson) {
     dom.inputThingDefinition.value = thingJson.definition ?? '';
-    thingJsonEditor.setValue(JSON.stringify(thingJson, null, 2), -1);
+    thingJsonEditor.setValue(Utils.stringifyPretty(thingJson), -1);
   }
 
   function resetEditors() {

diff --git a/ui/modules/things/wotDescription.ts b/ui/modules/things/wotDescription.ts
@@ -80,7 +80,7 @@ export function WoTDescription(targetTab, forFeature) {
             'accept': 'application/td+json',
           },
       ).then((description) => {
-        aceWoTDescription.setValue(JSON.stringify(description, null, 2), -1);
+        aceWoTDescription.setValue(Utils.stringifyPretty(description), -1);
       }).catch(
           // nothing to clean-up
       );

diff --git a/ui/modules/utils.ts b/ui/modules/utils.ts
@@ -162,8 +162,8 @@ export function addDropDownEntries(target, items, isHeader = false) {
   items.forEach((value) => {
     const li = document.createElement('li');
     li.innerHTML = isHeader ?
-        `<h6 class="dropdown-header">${value}</h6>` :
-        `<a class="dropdown-item" href="#">${value}</a>`;
+      `<h6 class="dropdown-header">${value}</h6>` :
+      `<a class="dropdown-item" href="#">${value}</a>`;
     target.appendChild(li);
   });
 }
@@ -302,11 +302,12 @@ export function confirm(message, action, callback) {
  * @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
+ * @param {*} wrap sets the editor wrap option.
  * @return {*} created ace editor
  */
-export function createAceEditor(domId, sessionMode, readOnly = false) {
+export function createAceEditor(domId, sessionMode, readOnly = false, wrap = false) {
   const result = ace.edit(domId);
-
+  result.setOption('wrap', wrap);
   result.session.setMode(sessionMode);
   if (readOnly) {
     result.setReadOnly(true);
@@ -322,8 +323,7 @@ export function createAceEditor(domId, sessionMode, readOnly = false) {
  * @param {String} value value to set on the ace editor
  */
 export function setEditorValue(aceEditor, value) {
-  aceEditor.setValue(value);
-  aceEditor.clearSelection();
+  aceEditor.setValue(value, -1);
 }
 
 /**
@@ -398,3 +398,13 @@ export function tableAdjustSelection(tbody: HTMLTableElement, condition: (row: H
     }
   });
 }
+
+
+/**
+ * JSON.stringify object, using indentation of 2
+ * @param {Object} jsonObject to stringify
+ * @return {string} JSON formatted string
+ */
+export function stringifyPretty(jsonObject: Object): string {
+  return JSON.stringify(jsonObject, null, 2);
+}