Explorer-UI: connection

Fixes for connection creation
eclipse-ditto · Jul 13, 2022 · a405a66 · a405a66
1 parent b0c5197
commit a405a66
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 27 deletions.
diff --git a/ui/modules/api.js b/ui/modules/api.js
@@ -112,7 +112,7 @@ const config = {
         },
         'piggybackCommand': {
           'type': 'connectivity.commands:createConnection',
-          'connection': '{{param}}',
+          'connection': '{{connectionJson}}',
         },
       },
       unwrapJsonPath: '?.?.connection',
@@ -127,7 +127,7 @@ const config = {
         },
         'piggybackCommand': {
           'type': 'connectivity.commands:modifyConnection',
-          'connection': '{{param}}',
+          'connection': '{{connectionJson}}',
         },
       },
       unwrapJsonPath: null,
@@ -204,7 +204,7 @@ const config = {
           'is-group-topic': true,
         },
         'piggybackCommand': {
-          'type': '{{param}}',
+          'type': '{{command}}',
           'connectionId': '{{connectionId}}',
         },
       },
@@ -278,12 +278,16 @@ export async function callDittoREST(method, path, body) {
  * @param {*} operation connections api operation
  * @param {*} successCallback callback on success
  * @param {*} connectionId connectionId
- * @param {*} param command
+ * @param {*} connectionJson optional json of connection configuration
+ * @param {*} command optional command
  * @return {*} promise to the result
  */
-export async function callConnectionsAPI(operation, successCallback, connectionId, param) {
+export async function callConnectionsAPI(operation, successCallback, connectionId, connectionJson, command) {
   Utils.assert((env() !== 'things' || Environments.current().solutionId), 'No solutionId configured in environment');
   const params = config[env()][operation];
+  // if (param && param.charAt(0) === '"' && param.charAt(str.length -1) === '"') {
+  //   param = param.substr(1, param.length -2);
+  // };
   try {
     const response = await fetch(Environments.current().api_uri + params.path.replace('{{solutionId}}',
         Environments.current().solutionId).replace('{{connectionId}}', connectionId), {
@@ -295,8 +299,9 @@ export async function callConnectionsAPI(operation, successCallback, connectionI
       body: params.body ?
           JSON.stringify(params.body)
               .replace('{{connectionId}}', connectionId)
-              .replace('{{param}}', param) :
-          param,
+              .replace('"{{connectionJson}}"', JSON.stringify(connectionJson))
+              .replace('{{command}}', command) :
+          connectionJson ? JSON.stringify(connectionJson) : command,
     });
     if (!response.ok) {
       Utils.showError('Error calling connections API', response.statusText, response.status);
@@ -320,6 +325,7 @@ export async function callConnectionsAPI(operation, successCallback, connectionI
         }
       }).catch((error) => {
         Utils.showError('Error calling connections API', error);
+        throw error;
       }).finally(() => {
         document.body.style.cursor = 'default';
       });

diff --git a/ui/modules/connections/connections.js b/ui/modules/connections/connections.js
@@ -56,14 +56,13 @@ export function ready() {
   dom.tabConnections.onclick = loadConnections;
 
   dom.buttonCreateConnection.onclick = () => {
-    const selectedTemplate = document.querySelector('input[name=connectionTemplate]:checked').value;
-    setConnection(connectionTemplates[selectedTemplate]);
-    if (API.env() === 'things') {
-      delete theConnection['id'];
-    } else {
-      theConnection.id = Math.random().toString(36).replace('0.', '');
+    const newConnection = JSON.parse(JSON.stringify(
+        connectionTemplates[document.querySelector('input[name=connectionTemplate]:checked').value]));
+    if (API.env() !== 'things') {
+      newConnection.id = Math.random().toString(36).replace('0.', '');
     }
-    API.callConnectionsAPI('createConnection', loadConnections, null, JSON.stringify(theConnection));
+    setConnection(newConnection);
+    API.callConnectionsAPI('createConnection', loadConnections, null, newConnection);
   };
 
   dom.tbodyConnections.addEventListener('click', (event) => {
@@ -90,7 +89,7 @@ export function ready() {
 
   dom.buttonModifyConnection.onclick = () => {
     Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
-    API.callConnectionsAPI('modifyConnection', loadConnections, dom.inputConnectionId.value, JSON.stringify(theConnection));
+    API.callConnectionsAPI('modifyConnection', loadConnections, dom.inputConnectionId.value, theConnection);
   };
 
   dom.buttonDeleteConnection.onclick = () => {
@@ -109,12 +108,12 @@ export function ready() {
 
   dom.buttonEnableConnectionLogs.onclick = () => {
     Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
-    API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, 'connectivity.commands:enableConnectionLogs');
+    API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, null, 'connectivity.commands:enableConnectionLogs');
   };
 
   dom.buttonResetConnectionLogs.onclick = () => {
     Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
-    API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, 'connectivity.commands:resetConnectionLogs');
+    API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, null, 'connectivity.commands:resetConnectionLogs');
   };
 
   dom.buttonRetrieveConnectionLogs.onclick = () => {
@@ -134,18 +133,20 @@ export function ready() {
     Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
     dom.tbodyConnectionMetrics.innerHTML = '';
     API.callConnectionsAPI('retrieveConnectionMetrics', (response) => {
-      Object.keys(response.connectionMetrics.outbound).forEach((type) => {
-        let entry = response.connectionMetrics.outbound[type];
-        Utils.addTableRow(dom.tbodyConnectionMetrics, type, false, false, 'success', entry.success.PT1M, entry.success.PT1H, entry.success.PT24H);
-        Utils.addTableRow(dom.tbodyConnectionMetrics, type, false, false, 'failure', entry.failure.PT1M, entry.failure.PT1H, entry.failure.PT24H);
-      });
+      if (response.connectionMetrics.outbound) {
+        Object.keys(response.connectionMetrics.outbound).forEach((type) => {
+          let entry = response.connectionMetrics.outbound[type];
+          Utils.addTableRow(dom.tbodyConnectionMetrics, type, false, false, 'success', entry.success.PT1M, entry.success.PT1H, entry.success.PT24H);
+          Utils.addTableRow(dom.tbodyConnectionMetrics, type, false, false, 'failure', entry.failure.PT1M, entry.failure.PT1H, entry.failure.PT24H);
+        });
+      }
     },
     dom.inputConnectionId.value);
   };
 
   dom.buttonResetConnectionMetrics.onclick = () => {
     Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
-    API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, 'connectivity.commands:resetConnectionMetrics');
+    API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, null, 'connectivity.commands:resetConnectionMetrics');
   };
 }
 
@@ -167,8 +168,8 @@ function setConnection(connection) {
 }
 
 function loadConnections() {
+  dom.tbodyConnections.innerHTML = '';
   API.callConnectionsAPI('listConnections', (connections) => {
-    dom.tbodyConnections.innerHTML = '';
     connections.forEach((connection) => {
       const id = API.env() === 'things' ? connection.id : connection;
       const row = dom.tbodyConnections.insertRow();
@@ -186,6 +187,9 @@ function loadConnections() {
         row.insertCell(-1).innerHTML = status.recoveryStatus;
       },
       id);
+      if (theConnection && id === theConnection.id) {
+        row.classList.add('table-active');
+      }
     });
   });
 };

diff --git a/ui/templates/connectionTemplates.json b/ui/templates/connectionTemplates.json
@@ -127,7 +127,7 @@
     "failoverEnabled": true,
     "uri": "http://user:password@localhost:80",
     "specificConfig": {
-      "parallelism": "2"
+      "parallelism": "1"
     },
     "sources": [],
     "targets": [
@@ -137,8 +137,7 @@
           "_/_/things/twin/events"
         ],
         "authorizationContext": [
-          "ditto:outbound-auth-subject",
-          "..."
+          "ditto:outbound-auth-subject"
         ],
         "headerMapping": {
           "content-type": "{{ header:content-type }}",