Merge pull request #1791 from bosch-io/feature/ui-add-piggyback-commands

Add piggyback commands to ui
eclipse-ditto · Nov 14, 2023 · 22e9a35 · 22e9a35
2 parents b3033c4 + 0d1dc7b
commit 22e9a35
Show file tree

Hide file tree

Showing 22 changed files with 1,299 additions and 79 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -103,7 +103,8 @@
             <div id="connectionsHTML"></div>
         </div>
         <div class="collapse" id=collapseOperations data-bs-parent="#page-content">
-            <div id="operationsHTML"></div>
+            <div id="piggybackHTML"></div>
+            <div id="servicesLoggingHTML"></div>
         </div>
         <div class="collapse" id="collapseSettings" data-bs-parent="#page-content">
             <div id="environmentsHTML"></div>
@@ -120,6 +121,7 @@
     <!-- Modals ------------------------------------------------------------------------------->
     <div id="authorizationHTML"></div>
     <div id="fieldsHTML"></div>
+    <div id="templatesHTML"></div>
     <div class="modal fade" id="modalConfirm" tabindex="-1">
         <div class="modal-dialog dialog-sm">
             <div class="modal-content">

diff --git a/ui/main.ts b/ui/main.ts
@@ -20,7 +20,9 @@ import * as ConnectionsMonitor from './modules/connections/connectionsMonitor.js
 
 import * as Authorization from './modules/environments/authorization.js';
 import * as Environments from './modules/environments/environments.js';
-import * as Operations from './modules/operations/operations.js';
+import * as Operations from './modules/operations/servicesLogging.js';
+import * as Piggyback from './modules/operations/piggyback.js';
+import * as Templates from './modules/operations/templates.js';
 import * as Policies from './modules/policies/policies.js';
 import * as Attributes from './modules/things/attributes.js';
 import * as FeatureMessages from './modules/things/featureMessages.js';
@@ -60,6 +62,8 @@ document.addEventListener('DOMContentLoaded', async function() {
   Operations.ready();
   Authorization.ready();
   await Environments.ready();
+  Piggyback.ready();
+  Templates.ready();
 
   const thingDescription = WoTDescription({
     itemsId: 'tabItemsThing',

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/operations/operations.html b/ui/modules/operations/operations.html
diff --git a/ui/modules/operations/piggyback.html b/ui/modules/operations/piggyback.html
@@ -0,0 +1,103 @@
+<!--
+  ~ Copyright (c) 2023 Contributors to the Eclipse Foundation
+  ~
+  ~ See the NOTICE file(s) distributed with this work for additional
+  ~ information regarding copyright ownership.
+  ~
+  ~ This program and the accompanying materials are made available under the
+  ~ terms of the Eclipse Public License 2.0 which is available at
+  ~ http://www.eclipse.org/legal/epl-2.0
+  ~
+  ~ SPDX-License-Identifier: EPL-2.0
+  -->
+<h5 data-bs-toggle="collapse" data-bs-target="#piggyBackCommands">
+    Piggyback Commands
+</h5>
+<hr />
+<div class="collapse show" id="piggyBackCommands">
+    <div class="row-cols-md-auto" style="height: 80vh;">
+        <div class="col-md-auto resizable_flex_column">
+            <div class="row mb-1" style="flex-grow: 1;">
+                <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_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-primary btn-sm button_round_right"
+                                        style="float: right;" id="buttonSubmit">
+                                        Submit
+                                    </button>
+                                    <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"></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="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%;">
+                            <label class="input-group-text">Timeout in sec</label>
+                            <input type="text" class="form-control form-control-sm" id="timeout"></input>
+                            <div class="invalid-feedback"></div>
+                        </div>
+                        <div class="input-group input-group-sm mb-1 has-validation">
+                            <label class="input-group-text">Actor path</label>
+                            <input type="text" class="form-control form-control-sm" id="targetActorSelection"></input>
+                            <div class="invalid-feedback"></div>
+                        </div>
+                        <div class="has-validation">
+                            <h6 id="headerValidationElement">Header</h6>
+                            <div class="invalid-feedback"></div>
+                        </div>
+                        <div class="ace_container" style="flex-grow: 0.2;">
+                            <div class="script_editor" id="aceHeaders"></div>
+                        </div>
+                        <div class="has-validation">
+                            <h6 id="commandValidationElement">Command</h6>
+                            <div class="invalid-feedback"></div>
+                        </div>
+                        <div class="ace_container" style="flex-grow: 1;">
+                            <div class="script_editor" id="aceCommand"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 resizable_flex_column">
+                    <div class="row mb-1">
+                        <div class="col-md-auto resizable_flex_column">
+                            <h6>Request status:</h6>
+                        </div>
+                        <div class="col-md-auto resizable_flex_column">
+                            <div id="responseStatus">no request made</div>
+                        </div>
+                    </div>
+                    <h6>Result</h6>
+                    <div class="ace_container" style="flex-grow: 1;">
+                        <div class="script_editor" id="acePiggybackResponse"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>