fix: alerts folders UI improvements (#6398)

1. code refactoring for alert list

---------

Co-authored-by: omkark06 <omkar@zinclabs.io>
Co-authored-by: udev <uddhavdave1@gmail.com>

src/handler/http/models/alerts/responses.rs

@@ -44,6 +44,7 @@ pub struct ListAlertsResponseBodyItem {
     pub enabled: bool,
     pub last_triggered_at: Option<i64>,
     pub last_satisfied_at: Option<i64>,
+    pub is_real_time: bool,
 }
 
 /// HTTP response body for `EnableAlert` endpoint.
@@ -101,6 +102,7 @@ impl TryFrom<(meta_folders::Folder, meta_alerts::Alert, Option<Trigger>)>
             enabled: alert.enabled,
             last_triggered_at,
             last_satisfied_at,
+            is_real_time: alert.is_real_time,
         })
     }
 }

web/src/components/alerts/ImportAlert.vue

@@ -708,6 +708,7 @@ export default defineComponent({
           name: "alertList",
           query: {
             org_identifier: store.state.selectedOrganization.identifier,
+            folder: selectedFolderId.value,
           },
         });
       }

web/src/components/common/sidebar/SelectFolderDropDown.vue

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <q-select
         v-model="selectedFolder"
         :label="t('dashboard.selectFolderLabel')"
-        :options="store.state.organizationData.foldersByType[type].map((item: any)=> {return {label: item.name, value: item.folderId}})"
+        :options="store.state.organizationData.foldersByType[type]?.map((item: any)=> {return {label: item.name, value: item.folderId}})"
         :data-test="`${type}-index-dropdown-stream_type`"
         input-debounce="0"
         behavior="menu"
@@ -74,6 +74,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   import AddFolder from "./AddFolder.vue";
   import { useRoute } from "vue-router";
 import { computed } from "vue";
+import { getFoldersListByType } from "@/utils/commons";
 
   export default defineComponent({
     name: "SelectedFolderDropdown",
@@ -109,7 +110,7 @@ import { computed } from "vue";
         // use activeFolderId if available
         // else use router query if available
         // else use default
-        const activeFolderData = store.state.organizationData.foldersByType[props.type].find(
+        const activeFolderData = store.state.organizationData.foldersByType[props.type]?.find(
           (item: any) =>
             item.folderId === (props.activeFolderId ?? route.query.folder ?? "default")
         );
@@ -136,9 +137,10 @@ import { computed } from "vue";
         return props.style ? props.style : 'height: 42px';
       });
 
-      onActivated(() => {
+      onActivated(async () => {
         // refresh selected folder
         selectedFolder.value = getInitialFolderValue();
+        await getFoldersListByType(store, props.type);
       });
 
       watch(

web/src/locales/languages/en.json

@@ -932,7 +932,7 @@
     "add": "Add alert",
     "edit": "Edit",
     "clone": "Clone alert",
-    "search": "Search alert",
+    "search": "Search Alert",
     "move": "Move alert",
     "name": "Name",
     "save": "Save",
@@ -943,7 +943,7 @@
     "alertType": "Alert Type",
     "streamType": "Stream Type",
     "state": "State",
-    "realTime": "Real Time",
+    "realTime": "Real-Time",
     "scheduled": "Scheduled",
     "minutes": "Minutes",
     "hours": "Hours",