Skip to content

Commit

Permalink
Explorer-ui Changed create connection flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@thfries
thfries committed Jul 14, 2022
1 parent 16c19a9 commit 52580c0
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 21 deletions.
13 changes: 10 additions & 3 deletions ui/modules/api.js
View file
Expand Up @@ -304,14 +304,21 @@ export async function callConnectionsAPI(operation, successCallback, connectionI
connectionJson ? JSON.stringify(connectionJson) : command,
});
if (!response.ok) {
Utils.showError('Error calling connections API', response.statusText, response.status);
response.json()
.then((dittoErr) => {
Utils.showError(dittoErr.description, dittoErr.message, dittoErr.status);
})
.catch((err) => {
Utils.showError('No error details from Ditto', response.statusText, response.status);
});
throw new Error('An error occured: ' + response.status);
}
if (operation !== 'connectionCommand') {
if (operation !== 'connectionCommand' && response.status !== 204) {
document.body.style.cursor = 'progress';
response.json().then((data) => {
if (data && data['?'] && data['?']['?'].status >= 400) {
Utils.showError(JSON.stringify(data['?']['?'].payload, data['?']['?'].status));
const dittoErr = data['?']['?'];
Utils.showError(dittoErr.description, dittoErr.message, dittoErr.status);
} else {
if (params.unwrapJsonPath) {
params.unwrapJsonPath.split('.').forEach(function(node) {
Expand Down
4 changes: 2 additions & 2 deletions ui/modules/connections/connections.html
View file
Expand Up @@ -38,8 +38,8 @@ <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" id="buttonModifyConnection" data-bs-toggle="tooltip"
title="Modify connection with the given id and connection configuration json">
<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
</button>
Expand Down
35 changes: 23 additions & 12 deletions ui/modules/connections/connections.js
View file
Expand Up @@ -14,7 +14,7 @@ let dom = {
tbodyConnectionMetrics: null,
buttonLoadConnections: null,
buttonCreateConnection: null,
buttonModifyConnection: null,
buttonSaveConnection: null,
buttonDeleteConnection: null,
buttonRetrieveConnectionStatus: null,
buttonRetrieveConnectionLogs: null,
Expand Down Expand Up @@ -87,37 +87,43 @@ export function ready() {
theConnection = JSON.parse(connectionEditor.getValue());
});

dom.buttonModifyConnection.onclick = () => {
Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
API.callConnectionsAPI('modifyConnection', loadConnections, dom.inputConnectionId.value, theConnection);
dom.buttonSaveConnection.onclick = () => {
if (dom.inputConnectionId.value) {
API.callConnectionsAPI('modifyConnection', loadConnections, dom.inputConnectionId.value, theConnection);
} else {
if (API.env() === 'things') {
delete theConnection.id;
}
API.callConnectionsAPI('createConnection', loadConnections, null, theConnection);
}
};

dom.buttonDeleteConnection.onclick = () => {
Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
API.callConnectionsAPI('deleteConnection', loadConnections, dom.inputConnectionId.value);
setConnection(null);
};

dom.buttonRetrieveConnectionStatus.onclick = () => {
Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
API.callConnectionsAPI('retrieveStatus', (connectionStatus) => {
dom.textareaConnectionStatusDetail.value = JSON.stringify(connectionStatus, null, 2);
},
dom.inputConnectionId.value);
};

dom.buttonEnableConnectionLogs.onclick = () => {
Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, null, 'connectivity.commands:enableConnectionLogs');
};

dom.buttonResetConnectionLogs.onclick = () => {
Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, null, 'connectivity.commands:resetConnectionLogs');
};

dom.buttonRetrieveConnectionLogs.onclick = () => {
Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
dom.tbodyConnectionLogs.innerHTML = '';
dom.textareaConnectionLogDetail.value = null;
API.callConnectionsAPI('retrieveConnectionLogs', (response) => {
Expand All @@ -130,7 +136,7 @@ export function ready() {
};

dom.buttonRetrieveConnectionMetrics.onclick = () => {
Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
dom.tbodyConnectionMetrics.innerHTML = '';
API.callConnectionsAPI('retrieveConnectionMetrics', (response) => {
if (response.connectionMetrics.outbound) {
Expand All @@ -145,14 +151,14 @@ export function ready() {
};

dom.buttonResetConnectionMetrics.onclick = () => {
Utils.assert(dom.inputConnectionId.value, 'Please selected a connection');
Utils.assert(dom.inputConnectionId.value, 'Please select a connection');
API.callConnectionsAPI('connectionCommand', null, dom.inputConnectionId.value, null, 'connectivity.commands:resetConnectionMetrics');
};
}

function setConnection(connection) {
theConnection = connection;
dom.inputConnectionId.value = theConnection ? theConnection.id : '';
dom.inputConnectionId.value = (theConnection && theConnection.id) ? theConnection.id : null;
connectionEditor.setValue(theConnection ? JSON.stringify(theConnection, null, 2) : '');
const withJavaScript = theConnection && theConnection.mappingDefinitions && theConnection.mappingDefinitions.javascript;
incomingEditor.setValue(withJavaScript ?
Expand All @@ -169,6 +175,7 @@ function setConnection(connection) {

function loadConnections() {
dom.tbodyConnections.innerHTML = '';
let connectionSelected = false;
API.callConnectionsAPI('listConnections', (connections) => {
connections.forEach((connection) => {
const id = API.env() === 'things' ? connection.id : connection;
Expand All @@ -189,8 +196,12 @@ function loadConnections() {
id);
if (theConnection && id === theConnection.id) {
row.classList.add('table-active');
connectionSelected = true;
}
});
if (!connectionSelected) {
setConnection(null);
}
});
};

Expand Down
4 changes: 1 addition & 3 deletions ui/modules/environments/authorization.js
View file
Expand Up @@ -27,8 +27,6 @@ let dom = {
};

export function ready() {
Environments.addChangeListener(onEnvironmentChanged);

Utils.getAllElementsById(dom);

document.getElementById('authorizeBearer').onclick = () => {
Expand All @@ -45,7 +43,7 @@ export function ready() {
};
};

function onEnvironmentChanged() {
export function onEnvironmentChanged() {
let usernamePassword = Environments.current().usernamePassword ? Environments.current().usernamePassword : ':';
dom.userName.value = usernamePassword.split(':')[0];
dom.password.value = usernamePassword.split(':')[1];
Expand Down
6 changes: 5 additions & 1 deletion ui/modules/environments/environments.js
View file
Expand Up @@ -11,10 +11,10 @@
* SPDX-License-Identifier: EPL-2.0
*/

import * as API from '../api.js';
/* eslint-disable arrow-parens */
/* eslint-disable prefer-const */
/* eslint-disable require-jsdoc */
import * as Authorization from '../environments/authorization.js';
import * as Utils from '../utils.js';

let environments = {
Expand Down Expand Up @@ -52,6 +52,9 @@ export function addChangeListener(observer) {
}

function notifyAll() {
// Notify Authorization first to set right auth header
Authorization.onEnvironmentChanged();
// Notify others
observers.forEach(observer => observer.call());
}

Expand Down Expand Up @@ -118,6 +121,7 @@ export function environmentsJsonChanged() {
updateEnvSelector();
updateEnvEditors();
updateEnvTable();

notifyAll();
}

Expand Down

0 comments on commit 52580c0

Please sign in to comment.