feat: views/instances/startup UI add result filter and sort by duration desc (#2835)

qxo · SteKoe · web-flow · commit a69fe96ff496 · 2024-05-24T10:57:32.000+02:00
filter by name/startupStep.name/startupStep.tags
and if the filter input is number will filter by duration

and the result will be sorted  by duration desc.

Co-authored-by: Stephan Köninger &lt;stephan.koeninger@codecentric.de&gt;
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/startup/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/startup/index.vue
@@ -18,34 +18,51 @@
   <sba-instance-section :error="error">
     <template #before>
       <sba-sticky-subnav>
-        <div class="inline-flex items-center">
-          <div class="mx-3">
-            <sba-button v-if="!isExpanded" @click="expandTree">
-              <svg
-                class="h-4 w-4"
-                fill="currentColor"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </sba-button>
-            <sba-button v-if="isExpanded" @click="expandTree">
-              <svg
-                class="h-4 w-4"
-                fill="currentColor"
-                viewBox="0 0 16 16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </sba-button>
+        <div class="flex gap-2">
+          <sba-button v-if="!isExpanded" @click="expandTree">
+            <svg
+              class="h-4 w-4"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </sba-button>
+          <sba-button v-if="isExpanded" @click="expandTree">
+            <svg
+              class="h-4 w-4"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </sba-button>
+          <div class="flex-1">
+            <sba-input
+              v-model="filter"
+              :placeholder="
+                $t('term.filter') +
+                ' by name/tags(key,value) or number for filter(duration)'
+              "
+              name="filter"
+              type="search"
+            >
+              <template #prepend>
+                <font-awesome-icon icon="filter" />
+              </template>
+              <template #append>
+                <span v-text="filteredSize" /> /
+                <span v-text="totalSize" />
+              </template>
+            </sba-input>
           </div>
         </div>
       </sba-sticky-subnav>
@@ -57,6 +74,8 @@
           v-if="hasLoaded"
           :expand="expandedNodes"
           :tree="eventTree"
+          :filter="filter"
+          @after-filter-action="afterFilterAction"
           @change="saveTreeState"
         />
       </div>
@@ -85,6 +104,9 @@ export default {
     expandedNodes: null,
     eventTree: null,
     isExpanded: false,
+    filter: null,
+    filteredSize: '',
+    totalSize: '',
   }),
   async created() {
     await this.fetchStartup();
@@ -111,11 +133,16 @@ export default {
       try {
         const res = await this.instance.fetchStartup();
         this.eventTree = StartupActuatorService.parseAsTree(res.data);
+        this.totalSize = this.eventTree.getEvents().length;
+        this.filteredSize = this.totalSize;
       } catch (error) {
         console.warn('Fetching startup failed:', error);
         this.error = error;
       }
     },
+    afterFilterAction(filteredSize) {
+      this.filteredSize = filteredSize;
+    },
     expandEventId() {
       let queryParams = this.$router.currentRoute.query;
       if (queryParams && queryParams.id) {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/startup/tree-table.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/startup/tree-table.vue
@@ -28,7 +28,7 @@
     </div>
     <ul v-if="tree">
       <tree-item
-        v-for="(eventNode, index) in tree.getRoots()"
+        v-for="(eventNode, index) in filteredTree"
         :key="index"
         :item="eventNode"
         :expand="expandedNodes"
@@ -39,12 +39,57 @@
 </template>
 
 <script>
+import orderBy from 'lodash/orderBy';
+
 import { StartupActuatorEventTree } from '@/services/startup-activator-tree';
 import TreeItem from '@/views/instances/startup/tree-item';
 
+const filterProperty = (needle) => (property, name) => {
+  if ('tags' == name && property && property.length > 0) {
+    return property.find((x) => findByFilter(needle, x));
+  }
+  return (
+    name.toString().toLowerCase().includes(needle) ||
+    (property && property.toString().toLowerCase().includes(needle))
+  );
+};
+
+const findByFilter = (needle, properties, keys) => {
+  if (!properties) {
+    return false;
+  }
+  const fn1 = filterProperty(needle);
+  if (!keys) {
+    keys = Object.keys(properties);
+  }
+  return keys.find((key) => {
+    return fn1(properties[key], key);
+  });
+};
+
+const filterResults = (needle) => (startupEvent) => {
+  if (!startupEvent || !startupEvent.startupStep) {
+    return null;
+  }
+  if (typeof needle == 'function') {
+    return needle(startupEvent) ? startupEvent : null;
+  }
+  var ret =
+    findByFilter(needle, startupEvent, ['name']) ||
+    findByFilter(needle, startupEvent.startupStep, ['name', 'tags']);
+  if (ret) {
+    return startupEvent;
+  }
+  return null;
+};
+
 export default {
   components: { TreeItem },
   props: {
+    filter: {
+      type: String,
+      default: '',
+    },
     tree: {
       type: StartupActuatorEventTree,
       required: true,
@@ -55,15 +100,38 @@ export default {
       default: null,
     },
   },
-  emits: ['change'],
+  emits: ['change', 'after-filter-action'],
   data: () => ({
     expandedNodes: new Set(),
     isExpanded: false,
+    resultSize: '',
   }),
   computed: {
     treeSize() {
       return new Set(this.tree.getEvents()).size;
     },
+    filteredTree() {
+      if (!this.tree) {
+        return [];
+      }
+      if (!this.filter) {
+        return this.tree.getRoots();
+      }
+      var xfilter;
+      if (/^[0-9.]+$/.test(this.filter)) {
+        const timeLimt = parseFloat(this.filter);
+        xfilter = function (x) {
+          return x.duration >= timeLimt;
+        };
+      } else {
+        xfilter = this.filter.toLowerCase();
+      }
+      const results = this.tree
+        .getEvents()
+        .map(filterResults(xfilter))
+        .filter((ps) => ps && Object.keys(ps.startupStep).length > 0);
+      return orderBy(results, (o) => -o.duration);
+    },
   },
   watch: {
     expand(expandedNodes) {
@@ -74,6 +142,12 @@ export default {
         expandedNodes: this.expandedNodes,
       });
     },
+    filteredTree: {
+      deep: true,
+      handler: function (newVal) {
+        this.$emit('after-filter-action', newVal.length);
+      },
+    },
   },
   created() {
     if (this.expand) {
