Skip to content

Commit

Permalink
Add piggyback commands to ui
Browse files Browse the repository at this point in the history 
Signed-off-by: Vasil Vasilev <vasil.vasilev@bosch.com>
  • Loading branch information
@vvasilevbosch
vvasilevbosch committed Nov 7, 2023
1 parent 804b35a commit ec3a108
Show file tree
Hide file tree
Showing 10 changed files with 1,269 additions and 1 deletion.
9 changes: 9 additions & 0 deletions ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@
Connections
</a>
</li>
<li class="nav-item" id="tabPiggyback">
<a class="nav-link" data-bs-target="#collapsePiggyback:not(.show)" data-bs-toggle="collapse">
Piggyback
</a>
</li>
<li class="nav-item" id="tabOperations" data-auth="devOps">
<a class="nav-link" data-bs-target="#collapseOperations:not(.show)" data-bs-toggle="collapse">
Operations
Expand Down Expand Up @@ -102,6 +107,9 @@
<div class="collapse" id=collapseConnections data-bs-parent="#page-content">
<div id="connectionsHTML"></div>
</div>
<div class="collapse" id="collapsePiggyback" data-bs-parent="#page-content">
<div id="piggybackHTML"></div>
</div>
<div class="collapse" id=collapseOperations data-bs-parent="#page-content">
<div id="operationsHTML"></div>
</div>
Expand All @@ -120,6 +128,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
19 changes: 19 additions & 0 deletions ui/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,3 +206,22 @@ 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;
}

4 changes: 4 additions & 0 deletions ui/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ 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 Piggyback from './modules/piggyback/piggyback.js';
import * as Templates from './modules/piggyback/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
103 changes: 103 additions & 0 deletions ui/modules/piggyback/piggyback.html
View file
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
-->
<div>
<div class="row-cols-md-auto" style="height: 87%;">
<h5>Piggyback commands</h5>
<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">
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">
Submit
</button>
<button hidden class="btn btn-outline-secondary btn-sm button_round_left"
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">
<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>
</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>

0 comments on commit ec3a108

Please sign in to comment.