Explorer-ui - add support for policies

* rework create update delete buttons * validations for policy editing * borders for tables and editors Signed-off-by: thfries <thomas.fries0@gmail.com>
eclipse-ditto · Aug 2, 2022 · bc63e81 · bc63e81
1 parent cb88ffc
commit bc63e81
Show file tree

Hide file tree

Showing 17 changed files with 705 additions and 94 deletions.
diff --git a/ui/index.css b/ui/index.css
@@ -81,12 +81,13 @@ textarea {
 
 .table-wrap {
     height: 100%;
-    flex-grow: 1;
-    overflow-y: scroll;    
+    overflow-y: scroll;
+    border: 1px solid #ced4da;
 }
 
 .ace_container {
     position: relative;
+    border: 1px solid #ced4da;
 }
 
 .button_round_right {
@@ -121,6 +122,12 @@ textarea {
     flex-direction: column;
 }
 
+.flex_column_part {
+    flex-grow: 1;
+    flex-basis: 0;
+    overflow: hidden;
+}
+
 .script_editor {
     position: absolute;
     top: 0;

diff --git a/ui/index.html b/ui/index.html
@@ -59,6 +59,11 @@
                             Things
                         </a>
                     </li>
+                    <li class="nav-item" id="tabPolicies">
+                        <a class="nav-link" data-bs-target="#collapsePolicies:not(.show)" data-bs-toggle="collapse">
+                            Policies
+                        </a>
+                    </li>
                     <li class="nav-item" id="tabConnections">
                         <a class="nav-link" data-bs-target="#collapseConnections:not(.show)" data-bs-toggle="collapse">
                             Connections
@@ -85,6 +90,9 @@
             <div id="thingsHTML"></div>
             <div id="featuresHTML"></div>
         </div>
+        <div class="collapse" id=collapsePolicies data-bs-parent="#page-content">
+            <div id="policyHTML"></div>
+        </div>
         <div class="collapse" id=collapseConnections data-bs-parent="#page-content">
             <div id="connectionsHTML"></div>
         </div>

diff --git a/ui/main.js b/ui/main.js
@@ -19,6 +19,7 @@ import * as Fields from './modules/things/fields.js';
 import * as SearchFilter from './modules/things/searchFilter.js';
 import * as Things from './modules/things/things.js';
 import * as Connections from './modules/connections/connections.js';
+import * as Policies from './modules/policies/policies.js';
 import * as API from './modules/api.js';
 
 
@@ -29,6 +30,7 @@ document.addEventListener('DOMContentLoaded', async function() {
   document.getElementById('thingsHTML').innerHTML = await (await fetch('modules/things/things.html')).text();
   document.getElementById('fieldsHTML').innerHTML = await (await fetch('modules/things/fields.html')).text();
   document.getElementById('featuresHTML').innerHTML = await (await fetch('modules/things/features.html')).text();
+  document.getElementById('policyHTML').innerHTML = await (await fetch('modules/policies/policies.html')).text();
   document.getElementById('connectionsHTML').innerHTML =
       await (await fetch('modules/connections/connections.html')).text();
   document.getElementById('environmentsHTML').innerHTML =
@@ -41,6 +43,7 @@ document.addEventListener('DOMContentLoaded', async function() {
   await Fields.ready();
   await SearchFilter.ready();
   Features.ready();
+  Policies.ready();
   Connections.ready();
   Authorization.ready();
   Environments.ready();
@@ -89,4 +92,21 @@ document.addEventListener('DOMContentLoaded', async function() {
       }
     });
   });
+
+  // Make all input field remove invalid marker on change
+  const {get, set} = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+  document.querySelectorAll('input').forEach((input) => {
+    input.addEventListener('change', (event) => {
+      event.target.classList.remove('is-invalid');
+    });
+    Object.defineProperty(input, 'value', {
+      get() {
+        return get.call(this);
+      },
+      set(newVal) {
+        input.classList.remove('is-invalid');
+        return set.call(this, newVal);
+      },
+    });
+  });
 });
diff --git a/ui/modules/connections/connections.html b/ui/modules/connections/connections.html
@@ -23,16 +23,8 @@ <h5 data-bs-toggle="collapse" data-bs-target="#connectionsEdit">
                     <i class="bi bi-arrow-clockwise"></i>
                     Refresh
                 </button>
-                <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal"
-                    data-bs-target="#create_connection_modal">
-                    <i class="bi bi-plus-square"></i>
-                </button>
-                <button class="btn btn-outline-secondary btn-sm button_round_right" id="buttonDeleteConnection"
-                    data-bs-toggle="tooltip" title="Delete connection with the given id">
-                    <i class="bi bi-trash3"></i>
-                </button>
             </div>
-            <div class="table-wrap mb-3">
+            <div class="table-wrap">
                 <table class="table table-striped table-hover table-sm">
                     <thead>
                         <tr>
@@ -50,12 +42,23 @@ <h6>Connection</h6>
             <div class="input-group input-group-sm mb-1">
                 <label class="input-group-text">Id</label>
                 <input type="text" class="form-control form-control-sm" disabled="true" id="inputConnectionId"></input>
+                <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal"
+                    data-bs-target="#create_connection_modal">
+                    <i class="bi bi-plus-circle"></i>
+                </button>
                 <button class="btn btn-outline-secondary btn-sm" id="buttonSaveConnection" data-bs-toggle="tooltip"
                     title="Save connection with the given connection configuration json. If there is no id given, a new connection will be created">
-                    <i class="bi bi-save2"></i>
-                    Save
+                    <i class="bi bi-save"></i>
+                </button>
+                <button class="btn btn-outline-secondary btn-sm button_round_right" id="buttonDeleteConnection"
+                    data-bs-toggle="tooltip" title="Delete connection with the given id">
+                    <i class="bi bi-trash3"></i>
                 </button>
             </div>
+            <div class="input-group input-group-sm mb-1">
+                <label class="input-group-text">Template</label>
+                <select type="text" class="form-select form-select-sm" id="selectConnectionTemplate"></select>
+            </div>
             <div class="ace_container" style="flex-grow: 1;">
                 <div class="script_editor" id="connectionEditor"></div>
             </div>

diff --git a/ui/modules/connections/connections.js b/ui/modules/connections/connections.js
@@ -21,6 +21,7 @@ import * as Environments from '../environments/environments.js';
 
 let dom = {
   connectionTemplateRadios: null,
+  selectConnectionTemplate: null,
   inputConnectionId: null,
   tbodyConnections: null,
   tbodyConnectionLogs: null,
@@ -79,6 +80,25 @@ export function ready() {
     API.callConnectionsAPI('createConnection', loadConnections, null, mergedConnection);
   };
 
+  dom.selectConnectionTemplate.onchange = () => {
+    const templateConnection = {};
+    if (API.env() !== 'things') {
+      templateConnection.id = Math.random().toString(36).replace('0.', '');
+    }
+    const newConnection = JSON.parse(JSON.stringify(
+        connectionTemplates[dom.selectConnectionTemplate.value]));
+
+    const mergedConnection = {...templateConnection, ...newConnection};
+    setConnection(mergedConnection);
+    connectionEditor.session.getUndoManager().markClean();
+  };
+
+  connectionEditor.on('input', () => {
+    if (!connectionEditor.session.getUndoManager().isClean()) {
+      dom.selectConnectionTemplate.value = null;
+    }
+  });
+
   dom.tbodyConnections.addEventListener('click', (event) => {
     if (event.target && event.target.tagName === 'TD') {
       API.callConnectionsAPI('retrieveConnection', setConnection, event.target.parentNode.id);
@@ -233,9 +253,8 @@ function loadConnectionTemplates() {
       .then((response) => {
         response.json().then((loadedTemplates) => {
           connectionTemplates = loadedTemplates;
-          Object.keys(connectionTemplates).forEach((templateName, i) => {
-            Utils.addRadioButton(dom.connectionTemplateRadios, 'connectionTemplate', templateName, i == 0);
-          });
+          Utils.setOptions(dom.selectConnectionTemplate, Object.keys(connectionTemplates));
+          dom.selectConnectionTemplate.value = null;
         });
       });
 }

diff --git a/ui/modules/environments/authorization.js b/ui/modules/environments/authorization.js
@@ -32,14 +32,14 @@ export function ready() {
   document.getElementById('authorizeBearer').onclick = () => {
     Environments.current().useBasicAuth = false;
     Environments.current().bearer = dom.bearer.value;
-    Environments.environmentsJsonChanged();
+    Environments.environmentsJsonChanged('authorization');
   };
 
   document.getElementById('authorizeBasic').onclick = () => {
     Environments.current().useBasicAuth = true;
     Environments.current().usernamePassword = dom.userName.value + ':' + dom.password.value;
     Environments.current().usernamePasswordDevOps = dom.devOpsUserName.value + ':' + dom.devOpsPassword.value;
-    Environments.environmentsJsonChanged();
+    Environments.environmentsJsonChanged('authorization');
   };
 };
 

diff --git a/ui/modules/environments/environments.html b/ui/modules/environments/environments.html
@@ -14,17 +14,6 @@ <h5>Environments</h5>
 <hr />
 <div class="row resizable_pane" style="height:600px">
     <div class="col-md-4 resizable_flex_column">
-        <div class="input-group input-group-sm mb-1 mt-1">
-            <label class="input-group-text">Name</label>
-            <input type="text" class="form-control" id="inputEnvironmentName">
-            <button class="btn btn-outline-secondary btn-sm" id="buttonCreateEnvironment">
-                <i class="bi bi-plus-square"></i>
-            </button>
-            <button class="btn btn-outline-secondary btn-sm" id="buttonDeleteEnvironment">
-                <i class="bi bi-trash3"></i>
-            </button>
-            <div class="invalid-feedback"></div>
-        </div>
         <div class="table-wrap">
             <table class="table table-striped table-hover table-sm">
                 <tbody id="tbodyEnvironments"></tbody>
@@ -34,31 +23,41 @@ <h5>Environments</h5>
     <div class="col-md-8 resizable_flex_column">
         <ul class="nav nav-tabs">
             <li class="nav-item">
-                <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEnvDetails">Environment Details</a>
+                <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEnvDetails">CRUD Environment</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEnvJson">Environment JSON</a>
             </li>
         </ul>
         <div class="tab-content" style="flex-grow: 1; overflow: hidden;">
             <div class="tab-pane container active no-margin" id="tabEnvDetails">
+                <div class="input-group input-group-sm mb-1 mt-1">
+                    <label class="input-group-text">Name</label>
+                    <input type="text" class="form-control" id="inputEnvironmentName">
+                    <button class="btn btn-outline-secondary btn-sm" id="buttonCreateEnvironment">
+                        <i class="bi bi-plus-circle"></i>
+                    </button>
+                    <button class="btn btn-outline-secondary btn-sm" id="buttonUpdateFields"
+                        data-bs-toggle="tooltip" title="Save selected field details">
+                        <i class="bi bi-save"></i>
+                    </button>
+                    <button class="btn btn-outline-secondary btn-sm" id="buttonDeleteEnvironment">
+                        <i class="bi bi-trash3"></i>
+                    </button>
+                    <div class="invalid-feedback"></div>
+                </div>
                 <div class="input-group input-group-sm mt-1">
                     <label class="input-group-text" data-bs-toggle="tooltip"
                         title="URI including protocol, host and port (e.g. http://localhost:8080)">API URI</label>
                     <input type="text" class="form-control form-control-sm" id="inputApiUri"></input>
-                    <button class="btn btn-outline-secondary btn-sm" id="buttonUpdateFields"
-                        data-bs-toggle="tooltip" title="Save selected field details">
-                        <i class="bi bi-save2"></i>
-                        Save
-                    </button>
                 </div>
             </div>
             <div class="tab-pane container no-margin" id="tabEnvJson">
                 <div class="input-group input-group-sm mb-1">
                     <div class="form-control-sm" style="flex-grow: 1;"></div>
                     <button class="btn btn-outline-secondary btn-sm button_round_both" id="buttonUpdateJson"
                         data-bs-toggle="tooltip" title="Save selected environment json">
-                        <i class="bi bi-save2"></i>
+                        <i class="bi bi-save"></i>
                         Save
                     </button>
                 </div>

diff --git a/ui/modules/environments/environments.js b/ui/modules/environments/environments.js
@@ -130,12 +130,7 @@ export function environmentsJsonChanged(modifiedField) {
       activeEnvironment = Object.keys(environments)[0];
     };
 
-    dom.environmentSelector.innerHTML = '';
-    Object.keys(environments).forEach((key) => {
-      let option = document.createElement('option');
-      option.text = key;
-      dom.environmentSelector.add(option);
-    });
+    Utils.setOptions(dom.environmentSelector, Object.keys(environments));
 
     dom.environmentSelector.value = activeEnvironment;
   }