fix: streams filtering (#2808)

1. Duplicated streams on clicking Refresh Stats on streams page multiple
times
2. Filtering streams was not working as expected

web/src/views/LogStream.vue

@@ -34,10 +34,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <NoData />
       </template>
       <template #header-selection="scope">
-        <q-checkbox v-model="scope.selected" size="sm" color="secondary" />
+        <q-checkbox v-model="scope.selected"
+size="sm" color="secondary" />
       </template>
       <template #body-selection="scope">
-        <q-checkbox v-model="scope.selected" size="sm" color="secondary" />
+        <q-checkbox v-model="scope.selected"
+size="sm" color="secondary" />
       </template>
       <template #body-cell-actions="props">
         <q-td :props="props">
@@ -196,7 +198,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </q-card-section>
 
         <q-card-actions class="confirmActions">
-          <q-btn v-close-popup="true" unelevated no-caps class="q-mr-sm">
+          <q-btn v-close-popup="true" unelevated
+no-caps class="q-mr-sm">
             {{ t("logStream.cancel") }}
           </q-btn>
           <q-btn
@@ -243,6 +246,7 @@ import { outlinedDelete } from "@quasar/extras/material-icons-outlined";
 import { cloneDeep } from "lodash-es";
 import useStreams from "@/composables/useStreams";
 import AddStream from "@/components/logstream/AddStream.vue";
+import { watch } from "vue";
 
 export default defineComponent({
   name: "PageLogStream",
@@ -356,6 +360,17 @@ export default defineComponent({
       }
     });
 
+    // As filter data don't gets called when search input is cleared.
+    // So calling onChangeStreamFilter to filter again
+    watch(
+      () => filterQuery.value,
+      (value) => {
+        if (!value) {
+          onChangeStreamFilter(selectedStreamType.value);
+        }
+      }
+    );
+
     const getLogStream = (refresh: boolean = false) => {
       if (store.state.selectedOrganization != null) {
         previousOrgIdentifier.value =
@@ -371,6 +386,7 @@ export default defineComponent({
         let counter = 1;
         getStreams("", false, false)
           .then((res: any) => {
+            logStream.value = [];
             let doc_num = "";
             let storage_size = "";
             let compressed_size = "";
@@ -397,7 +413,7 @@ export default defineComponent({
                 };
               })
             );
-            duplicateStreamList.value = logStream.value;
+            duplicateStreamList.value = [...logStream.value];
 
             logStream.value.forEach((element: any) => {
               if (element.name == router.currentRoute.value.query.dialog) {
@@ -531,14 +547,18 @@ export default defineComponent({
     const filterData = (rows: any, terms: any) => {
       var filtered = [];
       terms = terms.toLowerCase();
-      for (var i = 0; i < rows.length; i++) {
+
+      for (var i = 0; i < duplicateStreamList.value.length; i++) {
         if (
-          (selectedStreamType.value === rows[i]["stream_type"] ||
+          (selectedStreamType.value ===
+            duplicateStreamList.value[i]["stream_type"] ||
             selectedStreamType.value === "all") &&
-          (rows[i]["name"].toLowerCase().includes(terms) ||
-            rows[i]["stream_type"].toLowerCase().includes(terms))
+          (duplicateStreamList.value[i]["name"].toLowerCase().includes(terms) ||
+            duplicateStreamList.value[i]["stream_type"]
+              .toLowerCase()
+              .includes(terms))
         ) {
-          filtered.push(rows[i]);
+          filtered.push(duplicateStreamList.value[i]);
         }
       }
       return filtered;