Environments
@@ -105,6 +110,9 @@
+
@@ -147,7 +155,7 @@
-
diff --git a/ui/main.js b/ui/main.js
index 779b9eb4c5..544cd9e40a 100644
--- a/ui/main.js
+++ b/ui/main.js
@@ -27,8 +27,8 @@ import * as MessagesIncoming from './modules/things/messagesIncoming.js';
import * as Connections from './modules/connections/connections.js';
import * as ConnectionsCRUD from './modules/connections/connectionsCRUD.js';
import * as ConnectionsMonitor from './modules/connections/connectionsMonitor.js';
+import * as Operations from './modules/operations/operations.js';
import * as Policies from './modules/policies/policies.js';
-import * as API from './modules/api.js';
import * as Utils from './modules/utils.js';
import {WoTDescription} from './modules/things/wotDescription.js';
@@ -40,10 +40,13 @@ 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('messagesIncomingHTML').innerHTML = await (await fetch('modules/things/messagesIncoming.html')).text();
+ document.getElementById('messagesIncomingHTML').innerHTML =
+ await (await fetch('modules/things/messagesIncoming.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('operationsHTML').innerHTML =
+ await (await fetch('modules/operations/operations.html')).text();
document.getElementById('environmentsHTML').innerHTML =
await (await fetch('modules/environments/environments.html')).text();
document.getElementById('authorizationHTML').innerHTML =
@@ -64,6 +67,7 @@ document.addEventListener('DOMContentLoaded', async function() {
Connections.ready();
ConnectionsCRUD.ready();
ConnectionsMonitor.ready();
+ Operations.ready();
Authorization.ready();
await Environments.ready();
@@ -94,7 +98,6 @@ document.addEventListener('DOMContentLoaded', async function() {
e.addEventListener('click', (event) => {
mainNavbar.querySelectorAll('.nav-link,.active').forEach((n) => n.classList.remove('active'));
event.currentTarget.classList.add('active');
- API.setAuthHeader(event.currentTarget.parentNode.id === 'tabConnections');
});
});
diff --git a/ui/modules/api.js b/ui/modules/api.js
index eb343316f2..b9a427673d 100644
--- a/ui/modules/api.js
+++ b/ui/modules/api.js
@@ -284,6 +284,9 @@ export function setAuthHeader(forDevOps) {
} else if (Environments.current().devopsAuth === 'bearer') {
authHeaderKey = 'Authorization';
authHeaderValue ='Bearer ' + Environments.current().bearerDevOps;
+ } else {
+ authHeaderKey = 'Basic';
+ authHeaderValue = '';
}
} else {
if (Environments.current().mainAuth === 'basic') {
@@ -295,6 +298,9 @@ export function setAuthHeader(forDevOps) {
} else if (Environments.current().mainAuth === 'bearer') {
authHeaderKey = 'Authorization';
authHeaderValue ='Bearer ' + Environments.current().bearer;
+ } else {
+ authHeaderKey = 'Basic';
+ authHeaderValue = '';
}
}
}
@@ -306,12 +312,13 @@ export function setAuthHeader(forDevOps) {
* @param {Object} body payload for the api call
* @param {Object} additionalHeaders object with additional header fields
* @param {boolean} returnHeaders request full response instead of json content
+ * @param {boolean} devOps default: false. Set true to avoid /api/2 path
* @return {Object} result as json object
*/
-export async function callDittoREST(method, path, body, additionalHeaders, returnHeaders = false) {
+export async function callDittoREST(method, path, body, additionalHeaders, returnHeaders = false, devOps = false) {
let response;
try {
- response = await fetch(Environments.current().api_uri + '/api/2' + path, {
+ response = await fetch(Environments.current().api_uri + (devOps ? '' : '/api/2') + path, {
method: method,
headers: {
'Content-Type': 'application/json',
diff --git a/ui/modules/connections/connections.js b/ui/modules/connections/connections.js
index 4e00cb4bd2..48a3b9870e 100644
--- a/ui/modules/connections/connections.js
+++ b/ui/modules/connections/connections.js
@@ -15,8 +15,8 @@
/* eslint-disable no-invalid-this */
/* eslint-disable require-jsdoc */
import * as API from '../api.js';
-import * as Environments from '../environments/environments.js';
import * as Utils from '../utils.js';
+import {TabHandler} from '../utils/tabHandler.js';
const observers = [];
@@ -39,13 +39,11 @@ let dom = {
let selectedConnectionId;
export function ready() {
- Environments.addChangeListener(onEnvironmentChanged);
-
Utils.getAllElementsById(dom);
+ new TabHandler(dom.tabConnections, dom.collapseConnections, refreshTab, 'disableConnections');
Utils.addValidatorToTable(dom.tbodyConnections, dom.tableValidationConnections);
- dom.tabConnections.onclick = onTabActivated;
dom.buttonLoadConnections.onclick = loadConnections;
dom.tbodyConnections.addEventListener('click', onConnectionsTableClick);
}
@@ -100,21 +98,10 @@ function onConnectionsTableClick(event) {
}
}
-let viewDirty = false;
-
-function onTabActivated() {
- if (viewDirty) {
- loadConnections();
- viewDirty = false;
- }
-}
-
-function onEnvironmentChanged() {
- if (dom.collapseConnections.classList.contains('show')) {
+function refreshTab(otherEnvironment) {
+ if (otherEnvironment) {
selectedConnectionId = null;
setConnection(null);
- loadConnections();
- } else {
- viewDirty = true;
}
+ loadConnections();
}
diff --git a/ui/modules/connections/connectionsCRUD.js b/ui/modules/connections/connectionsCRUD.js
index 731808e90f..8fbbe18cf8 100644
--- a/ui/modules/connections/connectionsCRUD.js
+++ b/ui/modules/connections/connectionsCRUD.js
@@ -184,7 +184,7 @@ function setConnection(connection) {
}
function onEditToggle(event) {
- const isEditing = event.detail;
+ const isEditing = event.detail.isEditing;
dom.buttonConnectionTemplates.disabled = !isEditing;
connectionEditor.setReadOnly(!isEditing);
connectionEditor.renderer.setShowGutter(isEditing);
diff --git a/ui/modules/environments/authorization.js b/ui/modules/environments/authorization.js
index 9a1752f6a0..305eba9644 100644
--- a/ui/modules/environments/authorization.js
+++ b/ui/modules/environments/authorization.js
@@ -28,6 +28,13 @@ let dom = {
collapseConnections: null,
};
+let _forDevops = false;
+
+export function setForDevops(forDevops) {
+ _forDevops = forDevops;
+ API.setAuthHeader(_forDevops);
+}
+
export function ready() {
Utils.getAllElementsById(dom);
@@ -53,15 +60,14 @@ export function ready() {
}
const mainAuths = document.querySelectorAll('input[name="main-auth"]');
- for(let i = 0; i < mainAuths.length; i++) {
+ for (let i = 0; i < mainAuths.length; i++) {
mainAuths[i].checked = mainAuths[i].value === mainAuth;
}
const devopsAuths = document.querySelectorAll('input[name="devops-auth"]');
- for(let i = 0; i < devopsAuths.length; i++) {
+ for (let i = 0; i < devopsAuths.length; i++) {
devopsAuths[i].checked = devopsAuths[i].value === devopsAuth;
}
-
};
document.getElementById('authorizeSubmit').onclick = () => {
@@ -94,5 +100,5 @@ export function onEnvironmentChanged() {
dom.dittoPreAuthenticatedUsername.value = Environments.current().dittoPreAuthenticatedUsername ?
Environments.current().dittoPreAuthenticatedUsername :
'';
- API.setAuthHeader(dom.collapseConnections.classList.contains('show'));
+ API.setAuthHeader(_forDevops);
}
diff --git a/ui/modules/environments/environments.html b/ui/modules/environments/environments.html
index 907151ff78..3f8459d5f7 100644
--- a/ui/modules/environments/environments.html
+++ b/ui/modules/environments/environments.html
@@ -46,14 +46,27 @@
Environments
title="A comma-separated list of namespaces (e.g. com.example.namespace). The given namespaces are used as a parameter for the Things search">Search Namespaces
-
diff --git a/ui/modules/environments/environments.js b/ui/modules/environments/environments.js
index ee51906b0d..827d73381a 100644
--- a/ui/modules/environments/environments.js
+++ b/ui/modules/environments/environments.js
@@ -36,6 +36,9 @@ let dom = {
inputApiUri: null,
inputSearchNamespaces: null,
selectDittoVersion: null,
+ inputTabPolicies: null,
+ inputTabConnections: null,
+ inputTabOperations: null,
};
let observers = [];
@@ -170,6 +173,9 @@ function onUpdateEnvironmentClick(event) {
environments[selectedEnvName].api_uri = dom.inputApiUri.value;
environments[selectedEnvName].searchNamespaces = dom.inputSearchNamespaces.value;
environments[selectedEnvName].ditto_version = dom.selectDittoVersion.value;
+ environments[selectedEnvName].disablePolicies = !dom.inputTabPolicies.checked;
+ environments[selectedEnvName].disableConnections = !dom.inputTabConnections.checked;
+ environments[selectedEnvName].disableOperations = !dom.inputTabOperations.checked;
} else {
environments[selectedEnvName] = JSON.parse(settingsEditor.getValue());
}
@@ -223,6 +229,9 @@ function updateEnvEditors() {
dom.inputApiUri.value = selectedEnvironment.api_uri;
dom.inputSearchNamespaces.value = selectedEnvironment.searchNamespaces ?? '';
dom.selectDittoVersion.value = selectedEnvironment.ditto_version ? selectedEnvironment.ditto_version : '3';
+ dom.inputTabPolicies.checked = !selectedEnvironment.disablePolicies;
+ dom.inputTabConnections.checked = !selectedEnvironment.disableConnections;
+ dom.inputTabOperations.checked = !selectedEnvironment.disableOperations;
} else {
dom.crudEnvironmentFields.idValue = null;
dom.crudEnvironmentJson.idValue = null;
@@ -230,6 +239,9 @@ function updateEnvEditors() {
dom.inputApiUri.value = null;
dom.inputSearchNamespaces.value = null;
dom.selectDittoVersion.value = 3;
+ dom.inputTabPolicies.checked = true;
+ dom.inputTabConnections.checked = true;
+ dom.inputTabOperations.checked = true;
}
}
@@ -304,12 +316,15 @@ async function loadEnvironmentTemplates() {
}
function onEditToggle(event) {
- dom.inputApiUri.disabled = !event.detail;
- dom.inputSearchNamespaces.disabled = !event.detail;
- dom.selectDittoVersion.disabled = !event.detail;
- settingsEditor.setReadOnly(!event.detail);
- settingsEditor.renderer.setShowGutter(event.detail);
- if (!event.detail) {
+ dom.inputApiUri.disabled = !event.detail.isEditing;
+ dom.inputSearchNamespaces.disabled = !event.detail.isEditing;
+ dom.selectDittoVersion.disabled = !event.detail.isEditing;
+ dom.inputTabPolicies.disabled = !event.detail.isEditing;
+ dom.inputTabConnections.disabled = !event.detail.isEditing;
+ dom.inputTabOperations.disabled = !event.detail.isEditing;
+ settingsEditor.setReadOnly(!event.detail.isEditing);
+ settingsEditor.renderer.setShowGutter(event.detail.isEditing);
+ if (!event.detail.isEditing) {
updateEnvEditors();
}
}
diff --git a/ui/modules/operations/operations.html b/ui/modules/operations/operations.html
new file mode 100644
index 0000000000..521ade8482
--- /dev/null
+++ b/ui/modules/operations/operations.html
@@ -0,0 +1,49 @@
+
+Ditto Services Logging
+
+
+
\ No newline at end of file
diff --git a/ui/modules/operations/operations.js b/ui/modules/operations/operations.js
new file mode 100644
index 0000000000..ad16a6690e
--- /dev/null
+++ b/ui/modules/operations/operations.js
@@ -0,0 +1,100 @@
+/*
+ * 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
+ */
+
+/* eslint-disable arrow-parens */
+/* eslint-disable prefer-const */
+/* eslint-disable require-jsdoc */
+import * as API from '../api.js';
+import * as Utils from '../utils.js';
+import {TabHandler} from '../utils/tabHandler.js';
+
+let dom = {
+ buttonLoadAllLogLevels: null,
+ divLoggers: null,
+ templateLogger: null,
+ tabOperations: null,
+ collapseOperations: null,
+};
+
+export async function ready() {
+ Utils.getAllElementsById(dom);
+ new TabHandler(dom.tabOperations, dom.collapseOperations, loadAllLogLevels, 'disableOperations');
+
+ dom.buttonLoadAllLogLevels.onclick = loadAllLogLevels;
+}
+
+function onUpdateLoggingClick(service, logConfig) {
+ API.callDittoREST('PUT', '/devops/logging/' + service, logConfig, null, false, true)
+ .then(() => {
+ loadAllLogLevels();
+ });
+}
+
+function loadAllLogLevels() {
+ API.callDittoREST('GET', '/devops/logging', null, null, false, true)
+ .then((result) => createLoggerView(result))
+ .catch((error) => {
+ dom.divLoggers.innerHTML = '';
+ });
+}
+
+function createLoggerView(allLogLevels) {
+ dom.divLoggers.innerHTML = '';
+ Object.keys(allLogLevels).sort().forEach((service, i) => {
+ addHeading(service, i);
+ Object.values(allLogLevels[service])[0].loggerConfigs.forEach((logConfig) => {
+ addLoggerRowForConfig(service, logConfig);
+ });
+ addLoggerRowForNew(service);
+ });
+
+ function addHeading(service, i) {
+ let heading = document.createElement('h6');
+ heading.innerText = service;
+ if (i > 0) {
+ heading.classList.add('mt-3');
+ }
+ dom.divLoggers.append(heading);
+ }
+
+ function addLoggerRowForConfig(service, logConfig) {
+ let row = document.createElement('div');
+ row.attachShadow({mode: 'open'});
+ row.shadowRoot.append(dom.templateLogger.content.cloneNode(true));
+ row.shadowRoot.getElementById('inputLogger').value = logConfig.logger;
+ row.shadowRoot.getElementById(logConfig.level).setAttribute('checked', '');
+ Array.from(row.shadowRoot.querySelectorAll('.btn-check')).forEach((btn) => {
+ btn.addEventListener('click', (event) => onUpdateLoggingClick(service, {
+ logger: logConfig.logger,
+ level: event.target.id,
+ }));
+ });
+ dom.divLoggers.append(row);
+ }
+
+ function addLoggerRowForNew(service) {
+ let newLoggerRow = document.createElement('div');
+ newLoggerRow.attachShadow({mode: 'open'});
+ newLoggerRow.shadowRoot.append(dom.templateLogger.content.cloneNode(true));
+ let inputLoggerElement = newLoggerRow.shadowRoot.getElementById('inputLogger');
+ inputLoggerElement.disabled = false;
+ inputLoggerElement.placeholder = 'Add new logger name and choose log level';
+ Array.from(newLoggerRow.shadowRoot.querySelectorAll('.btn-check')).forEach((btn) => {
+ btn.addEventListener('click', (event) => onUpdateLoggingClick(service, {
+ logger: inputLoggerElement.value,
+ level: event.target.id,
+ }));
+ });
+ dom.divLoggers.append(newLoggerRow);
+ }
+}
diff --git a/ui/modules/policies/policies.js b/ui/modules/policies/policies.js
index d739948dd4..872da1f835 100644
--- a/ui/modules/policies/policies.js
+++ b/ui/modules/policies/policies.js
@@ -4,8 +4,8 @@
/* eslint-disable require-jsdoc */
import * as Utils from '../utils.js';
import * as API from '../api.js';
-import * as Environments from '../environments/environments.js';
import * as Things from '../things/things.js';
+import {TabHandler} from '../utils/tabHandler.js';
let thePolicy;
let selectedEntry;
@@ -14,6 +14,8 @@ let selectedResource;
let policyTemplates;
+let tabHandler;
+
let dom = {
inputPolicyId: null,
inputPolicyEntry: null,
@@ -44,9 +46,9 @@ let subjectEditor;
let resourceEditor;
export function ready() {
- Environments.addChangeListener(onEnvironmentChanged);
-
Utils.getAllElementsById(dom);
+ tabHandler = new TabHandler(dom.tabPolicies, dom.collapsePolicies, refreshAll, 'disablePolicies');
+
loadPolicyTemplates();
@@ -57,8 +59,6 @@ export function ready() {
subjectEditor = Utils.createAceEditor('subjectEditor', 'ace/mode/json');
resourceEditor = Utils.createAceEditor('resourceEditor', 'ace/mode/json');
- dom.tabPolicies.onclick = onTabActivated;
-
dom.buttonLoadPolicy.onclick = () => {
Utils.assert(dom.inputPolicyId.value, 'Please enter a policyId', dom.inputPolicyId);
refreshPolicy(dom.inputPolicyId.value);
@@ -220,7 +220,7 @@ function validations(entryFilled, entrySelected, subjectFilled, subjectSelected,
function onThingChanged(thing) {
dom.inputPolicyId.value = (thing && thing.policyId) ? thing.policyId : null;
- viewDirty = true;
+ tabHandler.viewDirty = true;
}
function refreshWhoAmI() {
@@ -311,26 +311,13 @@ function modifyPolicyEntry(type, key, value) {
).then(() => refreshPolicy(thePolicy.policyId));
};
-let viewDirty = false;
-
-function onTabActivated() {
- if (viewDirty) {
- refreshWhoAmI();
- if (dom.inputPolicyId.value) {
- refreshPolicy(dom.inputPolicyId.value);
- }
- viewDirty = false;
- }
-}
-
-function onEnvironmentChanged(modifiedField) {
- if (!['pinnedThings', 'filterList', 'authorization'].includes(modifiedField)) {
+function refreshAll(otherEnvironment) {
+ refreshWhoAmI();
+ if (otherEnvironment) {
setThePolicy(null);
}
- if (dom.collapsePolicies.classList.contains('show')) {
- refreshWhoAmI();
- } else {
- viewDirty = true;
+ if (dom.inputPolicyId.value) {
+ refreshPolicy(dom.inputPolicyId.value);
}
}
diff --git a/ui/modules/things/attributes.js b/ui/modules/things/attributes.js
index d851e73a56..2b61dca1a3 100644
--- a/ui/modules/things/attributes.js
+++ b/ui/modules/things/attributes.js
@@ -160,7 +160,7 @@ function attributeFromString(attribute) {
}
function onEditToggle(event) {
- const isEditing = event.detail;
+ const isEditing = event.detail.isEditing;
dom.inputAttributeValue.disabled = !isEditing;
if (isEditing && dom.crudAttribute.idValue && dom.crudAttribute.idValue !== '') {
API.callDittoREST('GET', `/things/${Things.theThing.thingId}/attributes/${dom.crudAttribute.idValue}`,
diff --git a/ui/modules/things/features.js b/ui/modules/things/features.js
index b81c845c1c..fcb7f3c3b1 100644
--- a/ui/modules/things/features.js
+++ b/ui/modules/things/features.js
@@ -230,7 +230,7 @@ function onThingChanged(thing) {
}
function onEditToggle(event) {
- const isEditing = event.detail;
+ const isEditing = event.detail.isEditing;
if (isEditing && dom.crudFeature.idValue && dom.crudFeature.idValue !== '') {
API.callDittoREST('GET', `/things/${Things.theThing.thingId}/features/${dom.crudFeature.idValue}`, null, null, true)
.then((response) => {
diff --git a/ui/modules/things/things.js b/ui/modules/things/things.js
index 2c0aaa2a48..f259369843 100644
--- a/ui/modules/things/things.js
+++ b/ui/modules/things/things.js
@@ -1,3 +1,4 @@
+/* eslint-disable new-cap */
/*
* Copyright (c) 2022 Contributors to the Eclipse Foundation
*
@@ -14,8 +15,8 @@
// @ts-check
import * as API from '../api.js';
-import * as Environments from '../environments/environments.js';
import * as Utils from '../utils.js';
+import {TabHandler} from '../utils/tabHandler.js';
import * as ThingsSearch from './thingsSearch.js';
export let theThing;
@@ -39,11 +40,8 @@ export function addChangeListener(observer) {
* Initializes components. Should be called after DOMContentLoaded event
*/
export async function ready() {
- Environments.addChangeListener(onEnvironmentChanged);
-
Utils.getAllElementsById(dom);
-
- dom.tabThings.onclick = onTabActivated;
+ TabHandler(dom.tabThings, dom.collapseThings, refreshView);
}
/**
@@ -73,26 +71,6 @@ export function setTheThing(thingJson) {
observers.forEach((observer) => observer.call(null, theThing, isNewThingId));
}
-let viewDirty = false;
-
-function onTabActivated() {
- if (viewDirty) {
- refreshView();
- viewDirty = false;
- }
- // dom.searchFilterEdit.focus();
-}
-
-function onEnvironmentChanged(modifiedField) {
- if (!['pinnedThings', 'filterList', 'messageTemplates'].includes(modifiedField)) {
- if (dom.collapseThings.classList.contains('show')) {
- refreshView();
- } else {
- viewDirty = true;
- }
- }
-}
-
function refreshView() {
ThingsSearch.performLastSearch();
}
diff --git a/ui/modules/things/thingsCRUD.js b/ui/modules/things/thingsCRUD.js
index 4be416be9d..5f5fdb9644 100644
--- a/ui/modules/things/thingsCRUD.js
+++ b/ui/modules/things/thingsCRUD.js
@@ -165,7 +165,7 @@ function onThingChanged(thingJson) {
}
function onEditToggle(event) {
- const isEditing = event.detail;
+ const isEditing = event.detail.isEditing;
if (isEditing && Things.theThing) {
API.callDittoREST('GET', `/things/${Things.theThing.thingId}`, null, null, true)
.then((response) => {
diff --git a/ui/modules/utils.js b/ui/modules/utils.js
index 6b69fff8eb..7ebca92c45 100644
--- a/ui/modules/utils.js
+++ b/ui/modules/utils.js
@@ -33,6 +33,7 @@ export function ready() {
* @param {boolean} selected if true, the new row will be marked as selected
* @param {boolean} withClipBoardCopy add a clipboard button at the last column of the row
* @param {array} columnValues texts for additional columns of the row
+ * @return {Element} created row
*/
export const addTableRow = function(table, key, selected, withClipBoardCopy, ...columnValues) {
const row = table.insertRow();
@@ -47,6 +48,7 @@ export const addTableRow = function(table, key, selected, withClipBoardCopy, ...
if (withClipBoardCopy) {
addClipboardCopyToRow(row);
}
+ return row;
};
/**
diff --git a/ui/modules/utils/crudToolbar.js b/ui/modules/utils/crudToolbar.js
index 8ac04543bd..de9939b2fa 100644
--- a/ui/modules/utils/crudToolbar.js
+++ b/ui/modules/utils/crudToolbar.js
@@ -16,10 +16,12 @@ import * as Utils from '../utils.js';
class CrudToolbar extends HTMLElement {
isEditing = false;
isEditDisabled = false;
+ isCreateDisabled = false;
+ isDeleteDisabled = false;
dom = {
label: null,
inputIdValue: null,
- buttonCrudEdit: null,
+ buttonEdit: null,
buttonCreate: null,
buttonUpdate: null,
buttonDelete: null,
@@ -33,7 +35,7 @@ class CrudToolbar extends HTMLElement {
set idValue(newValue) {
this.dom.inputIdValue.value = newValue;
- if (newValue && newValue !== '') {
+ if (!this.isDeleteDisabled && newValue && newValue !== '') {
this.dom.buttonDelete.removeAttribute('hidden');
} else {
this.dom.buttonDelete.setAttribute('hidden', '');
@@ -44,17 +46,30 @@ class CrudToolbar extends HTMLElement {
return this.isEditDisabled;
}
+ set createDisabled(newValue) {
+ this.isCreateDisabled = newValue;
+ this.setButtonState(this.dom.buttonCreate, newValue);
+ }
+
+ set deleteDisabled(newValue) {
+ this.isDeleteDisabled = newValue;
+ this.setButtonState(this.dom.buttonDelete, newValue);
+ }
+
set editDisabled(newValue) {
this.isEditDisabled = newValue;
if (!this.isEditing) {
- if (this.isEditDisabled) {
- this.dom.buttonCrudEdit.setAttribute('hidden', '');
- } else {
- this.dom.buttonCrudEdit.removeAttribute('hidden');
- }
+ this.setButtonState(this.dom.buttonEdit, newValue);
}
}
+ setButtonState(button, isDisabled) {
+ if (isDisabled) {
+ button.setAttribute('hidden', '');
+ } else {
+ button.removeAttribute('hidden');
+ }
+ }
get validationElement() {
return this.dom.inputIdValue;
}
@@ -68,8 +83,8 @@ class CrudToolbar extends HTMLElement {
this.shadowRoot.append(document.getElementById('templateCrudToolbar').content.cloneNode(true));
setTimeout(() => {
Utils.getAllElementsById(this.dom, this.shadowRoot);
- this.dom.buttonCrudEdit.onclick = () => this.toggleEdit();
- this.dom.buttonCancel.onclick = () => this.toggleEdit();
+ this.dom.buttonEdit.onclick = () => this.toggleEdit(false);
+ this.dom.buttonCancel.onclick = () => this.toggleEdit(true);
this.dom.label.innerText = this.getAttribute('label') || 'Label';
this.dom.buttonCreate.onclick = this.eventDispatcher('onCreateClick');
this.dom.buttonUpdate.onclick = this.eventDispatcher('onUpdateClick');
@@ -85,22 +100,22 @@ class CrudToolbar extends HTMLElement {
};
}
- toggleEdit() {
+ toggleEdit(isCancel) {
this.isEditing = !this.isEditing;
document.getElementById('modalCrudEdit').classList.toggle('editBackground');
this.dom.divRoot.classList.toggle('editForground');
if (this.isEditing || this.isEditDisabled) {
- this.dom.buttonCrudEdit.setAttribute('hidden', '');
+ this.dom.buttonEdit.setAttribute('hidden', '');
} else {
- this.dom.buttonCrudEdit.removeAttribute('hidden');
+ this.dom.buttonEdit.removeAttribute('hidden');
}
this.dom.buttonCancel.toggleAttribute('hidden');
if (this.isEditing) {
if (this.dom.inputIdValue.value) {
this.dom.buttonUpdate.toggleAttribute('hidden');
- } else {
+ } else if (!this.isCreateDisabled) {
this.dom.buttonCreate.toggleAttribute('hidden');
}
} else {
@@ -114,7 +129,10 @@ class CrudToolbar extends HTMLElement {
this.dom.inputIdValue.disabled = !allowIdChange;
this.dispatchEvent(new CustomEvent('onEditToggle', {
composed: true,
- detail: this.isEditing,
+ detail: {
+ isEditing: this.isEditing,
+ isCancel: isCancel,
+ },
}));
}
}
diff --git a/ui/modules/utils/tabHandler.js b/ui/modules/utils/tabHandler.js
new file mode 100644
index 0000000000..be7b5a4f74
--- /dev/null
+++ b/ui/modules/utils/tabHandler.js
@@ -0,0 +1,54 @@
+/*
+ * 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
+ */
+/* eslint-disable require-jsdoc */
+import * as Environments from '../environments/environments.js';
+import * as Authorization from '../environments/authorization.js';
+
+export function TabHandler(domTabItem, domTabContent, onRefreshTab, envDisabledKey) {
+ const _domTabItem = domTabItem;
+ const _domTabContent = domTabContent;
+ const _refreshTab = onRefreshTab;
+ const _envDisabledKey = envDisabledKey;
+ let viewDirty = false;
+
+ _domTabItem.addEventListener('click', onTabActivated);
+ Environments.addChangeListener(onEnvironmentChanged);
+
+ return {
+ set viewDirty(newValue) {
+ viewDirty = newValue;
+ },
+ };
+
+ function onTabActivated() {
+ Authorization.setForDevops(_domTabItem.dataset.auth === 'devOps');
+
+ if (viewDirty) {
+ _refreshTab.call(null, false);
+ viewDirty = false;
+ }
+ }
+
+ function onEnvironmentChanged(modifiedField) {
+ _domTabItem.toggleAttribute('hidden', Environments.current()[_envDisabledKey] ?? false);
+ if (!['pinnedThings', 'filterList', 'messageTemplates'].includes(modifiedField)) {
+ if (_domTabContent.classList.contains('show')) {
+ _refreshTab.call(null, true);
+ } else {
+ viewDirty = true;
+ }
+ }
+ }
+}
+
+
diff --git a/ui/templates/environmentTemplates.json b/ui/templates/environmentTemplates.json
index 5bca6192b7..3621c71123 100644
--- a/ui/templates/environmentTemplates.json
+++ b/ui/templates/environmentTemplates.json
@@ -30,6 +30,8 @@
"defaultDittoPreAuthenticatedUsername": null,
"defaultUsernamePasswordDevOps": null,
"mainAuth": "basic",
- "devopsAuth": null
+ "devopsAuth": null,
+ "disableConnections": true,
+ "disableOperations": true
}
}
\ No newline at end of file