Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add piggyback commands to ui #1791

Merged
4 changes: 3 additions & 1 deletion ui/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
6 changes: 5 additions & 1 deletion ui/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions ui/modules/connections/connectionsCRUD.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions ui/modules/connections/connectionsMonitor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion ui/modules/environments/environments.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
49 changes: 0 additions & 49 deletions ui/modules/operations/operations.html

This file was deleted.

103 changes: 103 additions & 0 deletions ui/modules/operations/piggyback.html
Original file line number Diff line number Diff line change
@@ -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>