From 3d5fb63879afbcae6fd54b1db25b648850772b77 Mon Sep 17 00:00:00 2001
From: thfries <thomas.fries0@gmail.com>
Date: Mon, 13 Mar 2023 20:14:19 +0100
Subject: [PATCH 1/7] UI - New Operations tab * added new tab * changed way to
 control right auth user * extended api to allow devops path * utils to add
 table row now returns row * crud editor returns explicit cancel action * crud
 editor now with option without delete or create

Signed-off-by: thfries <thomas.fries0@gmail.com>
---
 ui/index.html                             |  12 +-
 ui/main.js                                |   9 +-
 ui/modules/api.js                         |   5 +-
 ui/modules/connections/connectionsCRUD.js |   2 +-
 ui/modules/environments/environments.js   |  12 +-
 ui/modules/operations/operations.html     |  50 ++++++++
 ui/modules/operations/operations.js       | 143 ++++++++++++++++++++++
 ui/modules/things/attributes.js           |   2 +-
 ui/modules/things/features.js             |   2 +-
 ui/modules/things/thingsCRUD.js           |   2 +-
 ui/modules/utils.js                       |   2 +
 ui/modules/utils/crudToolbar.js           |  46 ++++---
 12 files changed, 257 insertions(+), 30 deletions(-)
 create mode 100644 ui/modules/operations/operations.html
 create mode 100644 ui/modules/operations/operations.js

diff --git a/ui/index.html b/ui/index.html
index 6905061c8a..e3e4026858 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -72,11 +72,16 @@
                             Policies
                         </a>
                     </li>
-                    <li class="nav-item" id="tabConnections">
+                    <li class="nav-item" id="tabConnections" data-auth="devOps">
                         <a class="nav-link" data-bs-target="#collapseConnections:not(.show)" data-bs-toggle="collapse">
                             Connections
                         </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
+                        </a>
+                    </li>
                     <li class="nav-item" id="tabEnvironments">
                         <a class="nav-link" data-bs-target="#collapseSettings:not(.show)" data-bs-toggle="collapse">
                             Environments
@@ -105,6 +110,9 @@
         <div class="collapse" id=collapseConnections data-bs-parent="#page-content">
             <div id="connectionsHTML"></div>
         </div>
+        <div class="collapse" id=collapseOperations data-bs-parent="#page-content">
+            <div id="operationsHTML"></div>
+        </div>
         <div class="collapse" id="collapseSettings" data-bs-parent="#page-content">
             <div id="environmentsHTML"></div>
         </div>
@@ -147,7 +155,7 @@
         <div class="input-group input-group-sm mb-1 mt-1 has-validation">
             <label class="input-group-text" id="label">Default</label>
             <input type="text" class="form-control" disabled id="inputIdValue">
-            <button class="btn btn-outline-primary btn-sm" id="buttonCrudEdit"
+            <button class="btn btn-outline-primary btn-sm" id="buttonEdit"
                 data-bs-toggle="tooltip" title="Edit">
                 Edit
             </button>
diff --git a/ui/main.js b/ui/main.js
index 779b9eb4c5..e4ac09c699 100644
--- a/ui/main.js
+++ b/ui/main.js
@@ -27,6 +27,7 @@ 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';
@@ -40,10 +41,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 +68,7 @@ document.addEventListener('DOMContentLoaded', async function() {
   Connections.ready();
   ConnectionsCRUD.ready();
   ConnectionsMonitor.ready();
+  Operations.ready();
   Authorization.ready();
   await Environments.ready();
 
@@ -94,7 +99,7 @@ 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');
+      API.setAuthHeader(event.currentTarget.parentNode.dataset.auth === 'devOps');
     });
   });
 
diff --git a/ui/modules/api.js b/ui/modules/api.js
index eb343316f2..47d7b3676f 100644
--- a/ui/modules/api.js
+++ b/ui/modules/api.js
@@ -306,12 +306,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/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/environments.js b/ui/modules/environments/environments.js
index ee51906b0d..68036d4bea 100644
--- a/ui/modules/environments/environments.js
+++ b/ui/modules/environments/environments.js
@@ -304,12 +304,12 @@ 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;
+  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..f85912d0cd
--- /dev/null
+++ b/ui/modules/operations/operations.html
@@ -0,0 +1,50 @@
+<!--
+  ~ Copyright (c) 2022 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
+  -->
+<h5>Ditto Services Logging</h5>
+<hr />
+<div class="row resizable_pane" style="height: 80vh">
+    <div class="col-md-6 resizable_flex_column">
+        <div class="input-group input-group-sm mt-1 mb-1" role="group">
+            <div style="flex-grow: 1;"></div>
+            <button class="btn btn-outline-primary btn-sm button_round_left" id="buttonLoadAllLogLevels">
+                <i class="bi bi-arrow-clockwise"></i>
+                Refresh
+            </button>
+        </div>
+        <div class="input-group has-validation">
+            <input class="form-control" id="tableValidationOpsLogging" hidden="true"></input>
+            <div class="invalid-feedback"></div>
+        </div>
+        <div class="table-wrap">
+            <table class="table table-striped table-hover table-sm">
+                <thead>
+                    <tr>
+                        <th>Service</th>
+                        <th>Level</th>
+                        <th>Logger</th>
+                    </tr>
+                </thead>
+                <tbody id="tbodyOpsLogging"></tbody>
+            </table>
+        </div>
+    </div>
+    <div class="col-md-6 resizable_flex_column">
+        <crud-toolbar label="Service Logging" id="crudOpsLoggingJson" style="flex-grow: 1;" disableCreate disableDelete>
+            <div class="ace_container" style="flex-grow: 1;">
+                <div>
+                    <div class="script_editor" id="opsLoggingEditor"></div>
+                </div>
+            </div>
+        </crud-toolbar>
+    <div>
+</div>
\ 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..ed0f7acbea
--- /dev/null
+++ b/ui/modules/operations/operations.js
@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) 2022 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 Environments from '../environments/environments.js';
+import * as Utils from '../utils.js';
+
+let opsLoggingEditor;
+
+let allLogLevels;
+
+let dom = {
+  buttonLoadAllLogLevels: null,
+  tableValidationOpsLogging: null,
+  tbodyOpsLogging: null,
+  crudOpsLoggingJson: null,
+  tabOperations: null,
+  collapseOperations: null,
+};
+
+export async function ready() {
+  Environments.addChangeListener(onEnvironmentChanged);
+
+  Utils.getAllElementsById(dom);
+
+  Utils.addValidatorToTable(dom.tbodyOpsLogging, dom.tableValidationOpsLogging);
+
+  dom.tabOperations.onclick = onTabActivated;
+
+  opsLoggingEditor = Utils.createAceEditor('opsLoggingEditor', 'ace/mode/json', true);
+
+  dom.buttonLoadAllLogLevels.onclick = loadAllLogLevels;
+  dom.tbodyOpsLogging.addEventListener('click', onLoggingTableClick);
+
+  dom.crudOpsLoggingJson.editDisabled = true;
+  dom.crudOpsLoggingJson.createDisabled = true;
+  dom.crudOpsLoggingJson.deleteDisabled = true;
+
+  dom.crudOpsLoggingJson.addEventListener('onEditToggle', onEditToggle);
+  dom.crudOpsLoggingJson.addEventListener('onUpdateClick', onUpdateLoggingClick);
+}
+
+function onLoggingTableClick(event) {
+  if (event.target && event.target.tagName === 'TD') {
+    if (isSelected(event.target.parentNode.id, event.target.parentNode.logLevel)) {
+      updateLogEditor();
+    } else {
+      updateLogEditor(event.target.parentNode.id, event.target.parentNode.logLevel);
+    }
+  }
+}
+
+function updateLogEditor(logService, logLevel) {
+  if (logService) {
+    dom.crudOpsLoggingJson.idValue = logService;
+    dom.crudOpsLoggingJson.editDisabled = false;
+    opsLoggingEditor.setValue(JSON.stringify(logLevel, null, 2), -1);
+  } else {
+    dom.crudOpsLoggingJson.idValue = null;
+    dom.crudOpsLoggingJson.editDisabled = true;
+    opsLoggingEditor.setValue('');
+  }
+}
+
+let undoLogLevel;
+
+function onEditToggle(event) {
+  opsLoggingEditor.setReadOnly(!event.detail.isEditing);
+  opsLoggingEditor.renderer.setShowGutter(event.detail.isEditing);
+  if (event.detail.isEditing) {
+    undoLogLevel = JSON.parse(opsLoggingEditor.getValue());
+  } else if (event.detail.isCancel) {
+    updateLogEditor(dom.crudOpsLoggingJson.idValue, undoLogLevel);
+  }
+}
+
+function onUpdateLoggingClick() {
+  API.callDittoREST('PUT', '/devops/logging/' + dom.crudOpsLoggingJson.idValue,
+      JSON.parse(opsLoggingEditor.getValue()), null, false, true)
+      .then(() => {
+        loadAllLogLevels();
+        dom.crudOpsLoggingJson.toggleEdit();
+      });
+}
+
+let viewDirty = false;
+
+function onTabActivated() {
+  if (viewDirty) {
+    loadAllLogLevels();
+    viewDirty = false;
+  }
+}
+
+function onEnvironmentChanged() {
+  if (dom.collapseOperations.classList.contains('show')) {
+    dom.tbodyOpsLogging.innerHTML = '';
+    updateLogEditor();
+    loadAllLogLevels();
+  } else {
+    viewDirty = true;
+  }
+}
+
+function loadAllLogLevels() {
+  API.callDittoREST('GET', '/devops/logging', null, null, false, true)
+      .then((result) => {
+        allLogLevels = result;
+        dom.tbodyOpsLogging.innerHTML = '';
+        Object.keys(allLogLevels).forEach((service) => {
+          Object.values(allLogLevels[service])[0].loggerConfigs.forEach((logConfig) => {
+            const row = Utils.addTableRow(dom.tbodyOpsLogging, service,
+                isSelected(service, logConfig),
+                false,
+                logConfig.level,
+                logConfig.logger);
+            row.logLevel = logConfig;
+          });
+        });
+      })
+      .catch((error) => {
+      });
+}
+
+function isSelected(logService, logConfig) {
+  const selectedService = dom.crudOpsLoggingJson.idValue;
+  const selectedLogLevel = opsLoggingEditor.getValue() ? JSON.parse(opsLoggingEditor.getValue()) : null;
+  return (selectedLogLevel && logService === selectedService && logConfig.level === selectedLogLevel.level && logConfig.logger === selectedLogLevel.logger)
+}
+
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/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,
+      },
     }));
   }
 }

From 71acc960152c1d97385a0f3104ad18f9b28dc521 Mon Sep 17 00:00:00 2001
From: thfries <thomas.fries0@gmail.com>
Date: Sat, 18 Mar 2023 21:14:40 +0100
Subject: [PATCH 2/7] UI - Operations Tab: new logger view

Signed-off-by: thfries <thomas.fries0@gmail.com>
---
 ui/modules/operations/operations.html |  49 +++++-----
 ui/modules/operations/operations.js   | 128 +++++++++-----------------
 2 files changed, 65 insertions(+), 112 deletions(-)

diff --git a/ui/modules/operations/operations.html b/ui/modules/operations/operations.html
index f85912d0cd..a078bbf57d 100644
--- a/ui/modules/operations/operations.html
+++ b/ui/modules/operations/operations.html
@@ -13,7 +13,7 @@
 <h5>Ditto Services Logging</h5>
 <hr />
 <div class="row resizable_pane" style="height: 80vh">
-    <div class="col-md-6 resizable_flex_column">
+    <div class="col-md-12 resizable_flex_column">
         <div class="input-group input-group-sm mt-1 mb-1" role="group">
             <div style="flex-grow: 1;"></div>
             <button class="btn btn-outline-primary btn-sm button_round_left" id="buttonLoadAllLogLevels">
@@ -21,30 +21,29 @@ <h5>Ditto Services Logging</h5>
                 Refresh
             </button>
         </div>
-        <div class="input-group has-validation">
-            <input class="form-control" id="tableValidationOpsLogging" hidden="true"></input>
-            <div class="invalid-feedback"></div>
-        </div>
-        <div class="table-wrap">
-            <table class="table table-striped table-hover table-sm">
-                <thead>
-                    <tr>
-                        <th>Service</th>
-                        <th>Level</th>
-                        <th>Logger</th>
-                    </tr>
-                </thead>
-                <tbody id="tbodyOpsLogging"></tbody>
-            </table>
-        </div>
-    </div>
-    <div class="col-md-6 resizable_flex_column">
-        <crud-toolbar label="Service Logging" id="crudOpsLoggingJson" style="flex-grow: 1;" disableCreate disableDelete>
-            <div class="ace_container" style="flex-grow: 1;">
-                <div>
-                    <div class="script_editor" id="opsLoggingEditor"></div>
+        <div id="divLoggers"></div>
+        <template id="templateLogger">
+            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+                integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+            <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.3/font/bootstrap-icons.min.css"
+                rel="stylesheet"
+                integrity="sha512-YzwGgFdO1NQw1CZkPoGyRkEnUTxPSbGWXvGiXrWk8IeSqdyci0dEDYdLLjMxq1zCoU0QBa4kHAFiRhUL3z2bow=="
+                crossorigin="anonymous" referrerpolicy="no-referrer" />
+            <link href="index.css" rel="stylesheet" />
+    
+            <div class="input-group input-group-sm mb-1">
+                <input class="form-control" type="text" disabled id="inputLogger"></input>
+                <div class="btn-group" role="group">
+                    <input type="radio" class="btn-check" id="debug" autocomplete="off">
+                    <label class="btn btn-sm btn-outline-secondary" for="debug">DEBUG</label>
+                    <input type="radio" class="btn-check" id="info" autocomplete="off">
+                    <label class="btn btn-sm btn-outline-success" for="info">INFO</label>
+                    <input type="radio" class="btn-check" id="warn" autocomplete="off">
+                    <label class="btn btn-sm btn-outline-warning" for="warn">WARN</label>
+                    <input type="radio" class="btn-check" id="error" autocomplete="off">
+                    <label class="btn btn-sm btn-outline-danger" for="error">ERROR</label>
                 </div>
             </div>
-        </crud-toolbar>
-    <div>
+        </template>
+    </div>
 </div>
\ No newline at end of file
diff --git a/ui/modules/operations/operations.js b/ui/modules/operations/operations.js
index ed0f7acbea..d91d2adba3 100644
--- a/ui/modules/operations/operations.js
+++ b/ui/modules/operations/operations.js
@@ -18,82 +18,65 @@ import * as API from '../api.js';
 import * as Environments from '../environments/environments.js';
 import * as Utils from '../utils.js';
 
-let opsLoggingEditor;
-
-let allLogLevels;
-
 let dom = {
   buttonLoadAllLogLevels: null,
-  tableValidationOpsLogging: null,
-  tbodyOpsLogging: null,
-  crudOpsLoggingJson: null,
+  divLoggers: null,
+  templateLogger: null,
   tabOperations: null,
   collapseOperations: null,
 };
 
 export async function ready() {
   Environments.addChangeListener(onEnvironmentChanged);
-
   Utils.getAllElementsById(dom);
 
-  Utils.addValidatorToTable(dom.tbodyOpsLogging, dom.tableValidationOpsLogging);
-
   dom.tabOperations.onclick = onTabActivated;
-
-  opsLoggingEditor = Utils.createAceEditor('opsLoggingEditor', 'ace/mode/json', true);
-
   dom.buttonLoadAllLogLevels.onclick = loadAllLogLevels;
-  dom.tbodyOpsLogging.addEventListener('click', onLoggingTableClick);
-
-  dom.crudOpsLoggingJson.editDisabled = true;
-  dom.crudOpsLoggingJson.createDisabled = true;
-  dom.crudOpsLoggingJson.deleteDisabled = true;
-
-  dom.crudOpsLoggingJson.addEventListener('onEditToggle', onEditToggle);
-  dom.crudOpsLoggingJson.addEventListener('onUpdateClick', onUpdateLoggingClick);
 }
 
-function onLoggingTableClick(event) {
-  if (event.target && event.target.tagName === 'TD') {
-    if (isSelected(event.target.parentNode.id, event.target.parentNode.logLevel)) {
-      updateLogEditor();
-    } else {
-      updateLogEditor(event.target.parentNode.id, event.target.parentNode.logLevel);
-    }
-  }
-}
-
-function updateLogEditor(logService, logLevel) {
-  if (logService) {
-    dom.crudOpsLoggingJson.idValue = logService;
-    dom.crudOpsLoggingJson.editDisabled = false;
-    opsLoggingEditor.setValue(JSON.stringify(logLevel, null, 2), -1);
-  } else {
-    dom.crudOpsLoggingJson.idValue = null;
-    dom.crudOpsLoggingJson.editDisabled = true;
-    opsLoggingEditor.setValue('');
-  }
+function onUpdateLoggingClick(service, logConfig) {
+  API.callDittoREST('PUT', '/devops/logging/' + service, logConfig, null, false, true)
+      .then(() => {
+        loadAllLogLevels();
+      });
 }
 
-let undoLogLevel;
-
-function onEditToggle(event) {
-  opsLoggingEditor.setReadOnly(!event.detail.isEditing);
-  opsLoggingEditor.renderer.setShowGutter(event.detail.isEditing);
-  if (event.detail.isEditing) {
-    undoLogLevel = JSON.parse(opsLoggingEditor.getValue());
-  } else if (event.detail.isCancel) {
-    updateLogEditor(dom.crudOpsLoggingJson.idValue, undoLogLevel);
-  }
+function loadAllLogLevels() {
+  API.callDittoREST('GET', '/devops/logging', null, null, false, true)
+      .then((result) => createLoggerView(result))
+      .catch((error) => {
+      });
 }
 
-function onUpdateLoggingClick() {
-  API.callDittoREST('PUT', '/devops/logging/' + dom.crudOpsLoggingJson.idValue,
-      JSON.parse(opsLoggingEditor.getValue()), null, false, true)
-      .then(() => {
-        loadAllLogLevels();
-        dom.crudOpsLoggingJson.toggleEdit();
-      });
+function createLoggerView(allLogLevels) {
+  dom.divLoggers.innerHTML = '';
+  Object.keys(allLogLevels).sort().forEach((service, i) => {
+    let heading = document.createElement('h6');
+    heading.innerText = service;
+    if (i > 0) {
+      heading.classList.add('mt-3');
+    }
+    dom.divLoggers.append(heading);
+    Object.values(allLogLevels[service])[0].loggerConfigs.forEach((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.service = service;
+            btn.logger = logConfig.logger;
+            btn.addEventListener('click', (event) => {
+              onUpdateLoggingClick(event.target.service, {
+                logger: event.target.logger,
+                level: event.target.id,
+              });
+            });
+          });
+      dom.divLoggers.append(row);
+    });
+  });
 }
 
 let viewDirty = false;
@@ -107,37 +90,8 @@ function onTabActivated() {
 
 function onEnvironmentChanged() {
   if (dom.collapseOperations.classList.contains('show')) {
-    dom.tbodyOpsLogging.innerHTML = '';
-    updateLogEditor();
     loadAllLogLevels();
   } else {
     viewDirty = true;
   }
 }
-
-function loadAllLogLevels() {
-  API.callDittoREST('GET', '/devops/logging', null, null, false, true)
-      .then((result) => {
-        allLogLevels = result;
-        dom.tbodyOpsLogging.innerHTML = '';
-        Object.keys(allLogLevels).forEach((service) => {
-          Object.values(allLogLevels[service])[0].loggerConfigs.forEach((logConfig) => {
-            const row = Utils.addTableRow(dom.tbodyOpsLogging, service,
-                isSelected(service, logConfig),
-                false,
-                logConfig.level,
-                logConfig.logger);
-            row.logLevel = logConfig;
-          });
-        });
-      })
-      .catch((error) => {
-      });
-}
-
-function isSelected(logService, logConfig) {
-  const selectedService = dom.crudOpsLoggingJson.idValue;
-  const selectedLogLevel = opsLoggingEditor.getValue() ? JSON.parse(opsLoggingEditor.getValue()) : null;
-  return (selectedLogLevel && logService === selectedService && logConfig.level === selectedLogLevel.level && logConfig.logger === selectedLogLevel.logger)
-}
-

From 58852bc9087534a054ea83b950103019a8ac758d Mon Sep 17 00:00:00 2001
From: thfries <thomas.fries0@gmail.com>
Date: Sat, 18 Mar 2023 21:44:58 +0100
Subject: [PATCH 3/7] UI - operations tab - refresh not scrolling

---
 ui/modules/operations/operations.html | 14 +++++++-------
 ui/modules/operations/operations.js   | 19 ++++++++-----------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/ui/modules/operations/operations.html b/ui/modules/operations/operations.html
index a078bbf57d..db18c2d115 100644
--- a/ui/modules/operations/operations.html
+++ b/ui/modules/operations/operations.html
@@ -12,15 +12,15 @@
   -->
 <h5>Ditto Services Logging</h5>
 <hr />
+<div class="input-group input-group-sm mt-1 mb-1" role="group">
+    <div style="flex-grow: 1;"></div>
+    <button class="btn btn-outline-primary btn-sm button_round_left" id="buttonLoadAllLogLevels">
+        <i class="bi bi-arrow-clockwise"></i>
+        Refresh
+    </button>
+</div>
 <div class="row resizable_pane" style="height: 80vh">
     <div class="col-md-12 resizable_flex_column">
-        <div class="input-group input-group-sm mt-1 mb-1" role="group">
-            <div style="flex-grow: 1;"></div>
-            <button class="btn btn-outline-primary btn-sm button_round_left" id="buttonLoadAllLogLevels">
-                <i class="bi bi-arrow-clockwise"></i>
-                Refresh
-            </button>
-        </div>
         <div id="divLoggers"></div>
         <template id="templateLogger">
             <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
diff --git a/ui/modules/operations/operations.js b/ui/modules/operations/operations.js
index d91d2adba3..f251a6a7b5 100644
--- a/ui/modules/operations/operations.js
+++ b/ui/modules/operations/operations.js
@@ -63,17 +63,14 @@ function createLoggerView(allLogLevels) {
       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.service = service;
-            btn.logger = logConfig.logger;
-            btn.addEventListener('click', (event) => {
-              onUpdateLoggingClick(event.target.service, {
-                logger: event.target.logger,
-                level: event.target.id,
-              });
-            });
-          });
+      Array.from(row.shadowRoot.querySelectorAll('.btn-check')).forEach((btn) => {
+        btn.service = service;
+        btn.logger = logConfig.logger;
+        btn.addEventListener('click', (event) => onUpdateLoggingClick(event.target.service, {
+          logger: event.target.logger,
+          level: event.target.id,
+        }));
+      });
       dom.divLoggers.append(row);
     });
   });

From 71de001d40c22b55f59327347fb160fb16ea5350 Mon Sep 17 00:00:00 2001
From: thfries <thomas.fries0@gmail.com>
Date: Thu, 23 Mar 2023 19:11:29 +0100
Subject: [PATCH 4/7] UI - change header info on new files

Signed-off-by: thfries <thomas.fries0@gmail.com>
---
 ui/modules/operations/operations.html | 2 +-
 ui/modules/operations/operations.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/modules/operations/operations.html b/ui/modules/operations/operations.html
index db18c2d115..b385dc98ae 100644
--- a/ui/modules/operations/operations.html
+++ b/ui/modules/operations/operations.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2022 Contributors to the Eclipse Foundation
+  ~ Copyright (c) 2023 Contributors to the Eclipse Foundation
   ~
   ~ See the NOTICE file(s) distributed with this work for additional
   ~ information regarding copyright ownership.
diff --git a/ui/modules/operations/operations.js b/ui/modules/operations/operations.js
index f251a6a7b5..25cfd81026 100644
--- a/ui/modules/operations/operations.js
+++ b/ui/modules/operations/operations.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Contributors to the Eclipse Foundation
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.

From d09faefeae7f3cd8b26533375e6c009089ff2076 Mon Sep 17 00:00:00 2001
From: thfries <thomas.fries0@gmail.com>
Date: Sun, 26 Mar 2023 14:42:27 +0200
Subject: [PATCH 5/7] UI - Operations tab - make tabs optional - fixed auth
 header mixing from wrong environment - operations tab not getting right auth
 header

Signed-off-by: thfries <thomas.fries0@gmail.com>
---
 ui/main.js                                |  2 -
 ui/modules/api.js                         |  6 +++
 ui/modules/connections/connections.js     | 23 +++-------
 ui/modules/environments/authorization.js  | 14 ++++--
 ui/modules/environments/environments.html | 17 ++++++-
 ui/modules/environments/environments.js   | 15 +++++++
 ui/modules/operations/operations.js       | 23 ++--------
 ui/modules/policies/policies.js           | 35 +++++----------
 ui/modules/things/things.js               | 28 ++----------
 ui/modules/utils/tabHandler.js            | 54 +++++++++++++++++++++++
 ui/templates/environmentTemplates.json    |  4 +-
 11 files changed, 125 insertions(+), 96 deletions(-)
 create mode 100644 ui/modules/utils/tabHandler.js

diff --git a/ui/main.js b/ui/main.js
index e4ac09c699..544cd9e40a 100644
--- a/ui/main.js
+++ b/ui/main.js
@@ -29,7 +29,6 @@ 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';
 
@@ -99,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.dataset.auth === 'devOps');
     });
   });
 
diff --git a/ui/modules/api.js b/ui/modules/api.js
index 47d7b3676f..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 = '';
     }
   }
 }
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/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 @@ <h5>Environments</h5>
                             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</label>
                         <input type="text" class="form-control form-control-sm" spellcheck="false" id="inputSearchNamespaces" disabled></input>
                     </div>
-                    <div class="input-group input-group-sm mt-1">
+                    <div class="input-group input-group-sm mt-1 mb-3">
                         <label class="input-group-text">Ditto Version</label>
                         <select class="form-select form-select-sm" id="selectDittoVersion" disabled>
                             <option selecte value="3">3</option>
                             <option value="2">2</option>
                         </select>
                     </div>    
-                </crud-toolbar>
+                    <label class="form-label">Optional Tabs</label>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="inputTabPolicies" disabled>
+                        <label class="form-check-label" for="inputTabPolicies">Policies</label>
+                      </div>
+                      <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="inputTabConnections" disabled>
+                        <label class="form-check-label" for="inputTabConnections">Connections</label>
+                      </div>
+                      <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="inputTabOperations" disabled>
+                        <label class="form-check-label" for="inputTabOperations">Operations</label>
+                      </div>
+            </crud-toolbar>
             </div>
             <div class="tab-pane container no-margin" id="tabEnvJson">
                 <crud-toolbar label="Name" id="crudEnvironmentJson" allowIdChange>
diff --git a/ui/modules/environments/environments.js b/ui/modules/environments/environments.js
index 68036d4bea..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;
   }
 }
 
@@ -307,6 +319,9 @@ function onEditToggle(event) {
   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) {
diff --git a/ui/modules/operations/operations.js b/ui/modules/operations/operations.js
index 25cfd81026..8e41c928fc 100644
--- a/ui/modules/operations/operations.js
+++ b/ui/modules/operations/operations.js
@@ -15,8 +15,8 @@
 /* eslint-disable prefer-const */
 /* 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';
 
 let dom = {
   buttonLoadAllLogLevels: null,
@@ -27,10 +27,9 @@ let dom = {
 };
 
 export async function ready() {
-  Environments.addChangeListener(onEnvironmentChanged);
   Utils.getAllElementsById(dom);
+  new TabHandler(dom.tabOperations, dom.collapseOperations, loadAllLogLevels, 'disableOperations');
 
-  dom.tabOperations.onclick = onTabActivated;
   dom.buttonLoadAllLogLevels.onclick = loadAllLogLevels;
 }
 
@@ -45,6 +44,7 @@ function loadAllLogLevels() {
   API.callDittoREST('GET', '/devops/logging', null, null, false, true)
       .then((result) => createLoggerView(result))
       .catch((error) => {
+        dom.divLoggers.innerHTML = '';
       });
 }
 
@@ -75,20 +75,3 @@ function createLoggerView(allLogLevels) {
     });
   });
 }
-
-let viewDirty = false;
-
-function onTabActivated() {
-  if (viewDirty) {
-    loadAllLogLevels();
-    viewDirty = false;
-  }
-}
-
-function onEnvironmentChanged() {
-  if (dom.collapseOperations.classList.contains('show')) {
-    loadAllLogLevels();
-  } else {
-    viewDirty = true;
-  }
-}
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/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/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

From a0c03062f097f40102c736e4e11a148438dfddf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20J=C3=A4ckle?= <thomas.jaeckle@beyonnex.io>
Date: Wed, 29 Mar 2023 21:31:56 +0200
Subject: [PATCH 6/7] UI - added option to define new logger for each service
 in Operations / Logging functionality
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Thomas Jäckle <thomas.jaeckle@beyonnex.io>
---
 ui/modules/operations/operations.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/ui/modules/operations/operations.js b/ui/modules/operations/operations.js
index 8e41c928fc..7e324696fa 100644
--- a/ui/modules/operations/operations.js
+++ b/ui/modules/operations/operations.js
@@ -73,5 +73,18 @@ function createLoggerView(allLogLevels) {
       });
       dom.divLoggers.append(row);
     });
+    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);
   });
 }

From b01c0cb2f4ffc49aec8d41f18cbd505baa19a251 Mon Sep 17 00:00:00 2001
From: thfries <thomas.fries0@gmail.com>
Date: Thu, 30 Mar 2023 19:47:41 +0200
Subject: [PATCH 7/7] UI - operations tab - remove spellcheck from input -
 split loggerView into smaller functions

Signed-off-by: thfries <thomas.fries0@gmail.com>
---
 ui/modules/operations/operations.html |  2 +-
 ui/modules/operations/operations.js   | 42 +++++++++++++++++----------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/ui/modules/operations/operations.html b/ui/modules/operations/operations.html
index b385dc98ae..521ade8482 100644
--- a/ui/modules/operations/operations.html
+++ b/ui/modules/operations/operations.html
@@ -32,7 +32,7 @@ <h5>Ditto Services Logging</h5>
             <link href="index.css" rel="stylesheet" />
     
             <div class="input-group input-group-sm mb-1">
-                <input class="form-control" type="text" disabled id="inputLogger"></input>
+                <input class="form-control" type="text" disabled id="inputLogger" spellcheck="false"></input>
                 <div class="btn-group" role="group">
                     <input type="radio" class="btn-check" id="debug" autocomplete="off">
                     <label class="btn btn-sm btn-outline-secondary" for="debug">DEBUG</label>
diff --git a/ui/modules/operations/operations.js b/ui/modules/operations/operations.js
index 7e324696fa..ad16a6690e 100644
--- a/ui/modules/operations/operations.js
+++ b/ui/modules/operations/operations.js
@@ -51,28 +51,38 @@ function loadAllLogLevels() {
 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);
-    Object.values(allLogLevels[service])[0].loggerConfigs.forEach((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.service = service;
-        btn.logger = logConfig.logger;
-        btn.addEventListener('click', (event) => onUpdateLoggingClick(event.target.service, {
-          logger: event.target.logger,
-          level: event.target.id,
-        }));
-      });
-      dom.divLoggers.append(row);
+  }
+
+  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));
@@ -86,5 +96,5 @@ function createLoggerView(allLogLevels) {
       }));
     });
     dom.divLoggers.append(newLoggerRow);
-  });
+  }
 }