Merge pull request eclipse-ditto#1864 from eclipse-ditto/feature/add-search-count-to-ui

Enhance things search slot by displaying the amount of matching things

Author: thjaeckle

Diff for: ui/modules/things/things.html

@@ -24,6 +24,9 @@
                     <input autocomplete="false" name="hidden" type="text" style="display:none;">
                     <input type="search" class="form-control form-control-sm" id="searchFilterEdit" name="search"
                            spellcheck=false autocomplete="off" />
+                    <span class="input-group-text" id="searchFilterCount" data-bs-toggle="tooltip"
+                          title="Amount of things matching the filter">
+                    </span>
                     <button type="button" id="searchThings" class="btn btn-outline-primary btn-sm" data-bs-toggle="tooltip"
                         title="Search things by thingId or valid ditto search filter">
                         search

Diff for: ui/modules/things/thingsSearch.ts

@@ -30,6 +30,7 @@ let lastSearch = '';
 let theSearchCursor;
 
 const dom = {
+  searchFilterCount: null,
   thingsTableHead: null,
   thingsTableBody: null,
   searchFilterEdit: null,
@@ -76,7 +77,7 @@ function onThingsTableClicked(event) {
  * Tests if the search filter is an RQL. If yes, things search is called otherwise just things get
  * @param {String} filter search filter string containing an RQL or a thingId
  */
-export function searchTriggered(filter) {
+export function searchTriggered(filter: string) {
   lastSearch = filter;
   const regex = /^(eq\(|ne\(|gt\(|ge\(|lt\(|le\(|in\(|like\(|ilike\(|exists\(|and\(|or\(|not\().*/;
   if (filter === '' || regex.test(filter)) {
@@ -113,13 +114,15 @@ export function performLastSearch() {
  * @param {Array} thingIds Array of thingIds
  */
 export function getThings(thingIds) {
+  dom.searchFilterCount.innerHTML = '';
   dom.thingsTableBody.innerHTML = '';
   const fieldsQueryParameter = Fields.getQueryParameter();
   if (thingIds.length > 0) {
     API.callDittoREST('GET',
         `/things?${fieldsQueryParameter}&ids=${thingIds}&option=sort(%2BthingId)`)
         .then((thingJsonArray) => {
           fillThingsTable(thingJsonArray);
+          dom.searchFilterCount.innerHTML = '#: ' + thingJsonArray.length;
           notifyAll(thingIds, fieldsQueryParameter);
         })
         .catch((error) => {
@@ -134,19 +137,38 @@ export function getThings(thingIds) {
 
 function resetAndClearViews(retainThing = false) {
   theSearchCursor = null;
+  dom.searchFilterCount.innerHTML = '';
   dom.thingsTableHead.innerHTML = '';
   dom.thingsTableBody.innerHTML = '';
   if (!retainThing) {
     Things.setTheThing(null);
   }
 }
 
+/**
+ * Calls Ditto search API to perform a count and adds the count to the UI.
+ * @param {String} filter Ditto search filter (rql)
+ */
+function countThings(filter: string) {
+  dom.searchFilterCount.innerHTML = '';
+  const namespaces = Environments.current().searchNamespaces
+  API.callDittoREST('GET',
+    '/search/things/count' +
+    ((filter && filter !== '') ? '?filter=' + encodeURIComponent(filter) : '') +
+    ((namespaces && namespaces !== '') ? '&namespaces=' + namespaces : ''), null, null
+  ).then((countResult) => {
+    dom.searchFilterCount.innerHTML = '#: ' + countResult;
+  }).catch((error) => {
+    notifyAll();
+  });
+}
+
 /**
  * Calls Ditto search api and fills UI with the result
  * @param {String} filter Ditto search filter (rql)
  * @param {boolean} isMore (optional) use cursor from previous search for additional pages
  */
-function searchThings(filter, isMore = false) {
+function searchThings(filter: string, isMore = false) {
   document.body.style.cursor = 'progress';
 
   const namespaces = Environments.current().searchNamespaces;
@@ -162,6 +184,7 @@ function searchThings(filter, isMore = false) {
     if (isMore) {
       removeMoreFromThingList();
     } else {
+      countThings(filter);
       resetAndClearViews(true);
     }
     fillThingsTable(searchResult.items);
@@ -212,7 +235,7 @@ export function removeMoreFromThingList() {
  * Fills the things table UI with the given things
  * @param {Array} thingsList Array of thing json objects
  */
-function fillThingsTable(thingsList) {
+function fillThingsTable(thingsList: any[]) {
   const activeFields = Environments.current().fieldList.filter((f) => f.active);
   fillHeaderRow();
   let thingSelected = false;