Allow to use namespaces in search in Explorer UI

ui/modules/connections/connections.js

@@ -264,9 +264,9 @@ function loadConnections() {
       row.id = id;
       if (API.env() === 'ditto_2') {
         API.callConnectionsAPI('retrieveConnection', (dittoConnection) => {
-         row.insertCell(0).innerHTML = dittoConnection.name;
-       },
-       id);
+          row.insertCell(0).innerHTML = dittoConnection.name;
+        },
+        id);
       } else {
         row.insertCell(0).innerHTML = connection.name;
       }

ui/modules/environments/environments.html

@@ -14,6 +14,10 @@ <h5>Environments</h5>
 <hr />
 <div class="row resizable_pane" style="height: 80vh">
     <div class="col-md-4 resizable_flex_column">
+        <div class="input-group has-validation">
+            <input class="form-control" id="tableValidationEnvironments" hidden="true"></input>
+            <div class="invalid-feedback"></div>
+        </div>
         <div class="table-wrap">
             <table class="table table-striped table-hover table-sm">
                 <tbody id="tbodyEnvironments"></tbody>
@@ -51,6 +55,11 @@ <h5>Environments</h5>
                         title="URI including protocol, host and port (e.g. http://localhost:8080)">API URI</label>
                     <input type="text" class="form-control form-control-sm" id="inputApiUri"></input>
                 </div>
+                <div class="input-group input-group-sm mt-1">
+                    <label class="input-group-text" data-bs-toggle="tooltip"
+                        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"></input>
+                </div>
                 <div class="input-group input-group-sm mt-1">
                     <label class="input-group-text">Ditto Version</label>
                     <select class="form-select form-select-sm" id="selectDittoVersion">

ui/modules/environments/environments.js

@@ -23,6 +23,7 @@ const STORAGE_KEY = 'ditto-ui-env';
 
 let urlSearchParams;
 let environments;
+let selectedEnvName;
 
 let settingsEditor;
 
@@ -34,8 +35,10 @@ let dom = {
   buttonUpdateJson: null,
   inputEnvironmentName: null,
   inputApiUri: null,
+  inputSearchNamespaces: null,
   selectDittoVersion: null,
   tbodyEnvironments: null,
+  tableValidationEnvironments: null,
 };
 
 let observers = [];
@@ -83,26 +86,40 @@ function notifyAll(modifiedField) {
 export async function ready() {
   Utils.getAllElementsById(dom);
 
+  Utils.addValidatorToTable(dom.tbodyEnvironments, dom.tableValidationEnvironments);
+
   urlSearchParams = new URLSearchParams(window.location.search);
   environments = await loadEnvironmentTemplates();
 
   settingsEditor = ace.edit('settingsEditor');
   settingsEditor.session.setMode('ace/mode/json');
 
   dom.buttonUpdateJson.onclick = () => {
-    environments[dom.inputEnvironmentName.value] = JSON.parse(settingsEditor.getValue());
+    Utils.assert(selectedEnvName, 'No environment selected', dom.tableValidationEnvironments);
+    environments[selectedEnvName] = JSON.parse(settingsEditor.getValue());
     environmentsJsonChanged();
   };
 
   dom.buttonUpdateFields.onclick = () => {
-    environments[dom.inputEnvironmentName.value].api_uri = dom.inputApiUri.value;
-    environments[dom.inputEnvironmentName.value].ditto_version = dom.selectDittoVersion.value;
+    Utils.assert(selectedEnvName, 'No environment selected', dom.tableValidationEnvironments);
+    if (selectedEnvName !== dom.inputEnvironmentName.value) {
+      environments[dom.inputEnvironmentName.value] = environments[selectedEnvName];
+      delete environments[selectedEnvName];
+      selectedEnvName = dom.inputEnvironmentName.value;
+    }
+    environments[selectedEnvName].api_uri = dom.inputApiUri.value;
+    environments[selectedEnvName].searchNamespaces = dom.inputSearchNamespaces.value;
+    environments[selectedEnvName].ditto_version = dom.selectDittoVersion.value;
     environmentsJsonChanged();
   };
 
   dom.tbodyEnvironments.addEventListener('click', (event) => {
     if (event.target && event.target.tagName === 'TD') {
-      dom.inputEnvironmentName.value = event.target.parentNode.id;
+      if (selectedEnvName && selectedEnvName === event.target.parentNode.id) {
+        selectedEnvName = null;
+      } else {
+        selectedEnvName = event.target.parentNode.id;
+      }
       updateEnvEditors();
     }
   });
@@ -114,14 +131,16 @@ export async function ready() {
       api_uri: dom.inputApiUri.value ? dom.inputApiUri.value : '',
       ditto_version: dom.selectDittoVersion.value ? dom.selectDittoVersion.value : '3',
     });
+    selectedEnvName = dom.inputEnvironmentName.value;
     environmentsJsonChanged();
   };
 
   dom.buttonDeleteEnvironment.onclick = () => {
-    Utils.assert(dom.inputEnvironmentName.value, 'No environment selected');
-    Utils.assert(Object.keys(environments).length >= 2, 'At least one environment is required');
-    delete environments[dom.inputEnvironmentName.value];
-    dom.inputEnvironmentName.value = null;
+    Utils.assert(selectedEnvName, 'No environment selected', dom.tableValidationEnvironments);
+    Utils.assert(Object.keys(environments).length >= 2, 'At least one environment is required',
+        dom.tableValidationEnvironments);
+    delete environments[selectedEnvName];
+    selectedEnvName = null;
     environmentsJsonChanged();
   };
 
@@ -165,21 +184,24 @@ export function environmentsJsonChanged(modifiedField) {
   function updateEnvTable() {
     dom.tbodyEnvironments.innerHTML = '';
     Object.keys(environments).forEach((key) => {
-      Utils.addTableRow(dom.tbodyEnvironments, key, key === dom.inputEnvironmentName.value);
+      Utils.addTableRow(dom.tbodyEnvironments, key, key === selectedEnvName);
     });
   }
 }
 
 function updateEnvEditors() {
-  const selectedEnvironment = environments[dom.inputEnvironmentName.value];
-  if (selectedEnvironment) {
+  if (selectedEnvName) {
+    const selectedEnvironment = environments[selectedEnvName];
+    dom.inputEnvironmentName.value = selectedEnvName;
     settingsEditor.setValue(JSON.stringify(selectedEnvironment, null, 2), -1);
     dom.inputApiUri.value = selectedEnvironment.api_uri;
+    dom.inputSearchNamespaces.value = selectedEnvironment.searchNamespaces ?? '';
     dom.selectDittoVersion.value = selectedEnvironment.ditto_version ? selectedEnvironment.ditto_version : '3';
   } else {
     dom.inputEnvironmentName.value = null;
     settingsEditor.setValue('');
     dom.inputApiUri.value = null;
+    dom.inputSearchNamespaces.value = null;
     dom.selectDittoVersion.value = 3;
   }
 }

ui/modules/things/fields.js

@@ -32,7 +32,7 @@ export function getQueryParameter() {
     Environments.current().fieldList = [];
   }
   const fields = Environments.current().fieldList.filter((f) => f.active).map((f) => f.path);
-  return 'fields=thingId' + (fields !== '' ? ',' + fields : '');
+  return 'fields=thingId' + (fields.length > 0 ? ',' + fields : '');
 }
 
 

ui/modules/things/things.js

@@ -212,7 +212,6 @@ function fillThingsTable(thingsList) {
     }
     return result;
   }
-
 }
 
 /**
@@ -223,9 +222,12 @@ function fillThingsTable(thingsList) {
 export function searchThings(filter, cursor) {
   document.body.style.cursor = 'progress';
 
+  const namespaces = Environments.current().searchNamespaces;
+
   API.callDittoREST('GET',
       '/search/things?' + Fields.getQueryParameter() +
       ((filter && filter !== '') ? '&filter=' + encodeURIComponent(filter) : '') +
+      ((namespaces && namespaces !== '') ? '&namespaces=' + namespaces : '') +
       '&option=sort(%2BthingId)' +
       // ',size(3)' +
       (cursor ? ',cursor(' + cursor + ')' : ''),