feat: region selection on logs page

web/src/composables/useLogs.ts

@@ -49,6 +49,7 @@ import useStreams from "@/composables/useStreams";
 import searchService from "@/services/search";
 import type { LogsQueryPayload } from "@/ts/interfaces/query";
 import savedviewsService from "@/services/saved_views";
+import config from "@/aws-exports";
 
 const defaultObject = {
   organizationIdetifier: "",
@@ -118,6 +119,7 @@ const defaultObject = {
     scrollInfo: {},
     flagWrapContent: false,
     pageType: "logs", // 'logs' or 'stream
+    regions: [],
   },
   data: {
     query: <any>"",
@@ -486,6 +488,13 @@ const useLogs = () => {
         },
       };
 
+      if (
+        config.isEnterprise == "true" &&
+        store.state.zoConfig.super_cluster_enabled
+      ) {
+        req["regions"] = searchObj.meta.regions;
+      }
+
       if (searchObj.data.stream.selectedStreamFields.length == 0) {
         const streamData: any = getStream(
           searchObj.data.stream.selectedStream.value,
@@ -788,6 +797,13 @@ const useLogs = () => {
         sql_mode: searchObj.meta.sqlMode ? "full" : "context",
       };
 
+      if (
+        config.isEnterprise == "true" &&
+        store.state.zoConfig.super_cluster_enabled
+      ) {
+        partitionQueryReq["regions"] = queryReq.query.regions;
+      }
+
       await searchService
         .partition({
           org_identifier: searchObj.organizationIdetifier,
@@ -1992,6 +2008,7 @@ const useLogs = () => {
           query_context: query_context,
           query_fn: query_fn,
           stream_type: searchObj.data.stream.streamType,
+          regions: searchObj.meta.regions.join(","),
         })
         .then((res) => {
           searchObj.loading = false;
@@ -2435,6 +2452,12 @@ const useLogs = () => {
     return modifiedSql;
   }
 
+  const getRegionInfo = () => {
+    searchService.get_regions().then((res) => {
+      store.dispatch("setRegionInfo", res.data);
+    });
+  };
+
   return {
     searchObj,
     getStreams,
@@ -2468,6 +2491,7 @@ const useLogs = () => {
     getHistogramQueryData,
     fnParsedSQL,
     addOrderByToQuery,
+    getRegionInfo,
   };
 };
 

web/src/locales/languages/en.json

@@ -110,7 +110,8 @@
     "applySearch": "Adjust filter parameters and click 'Run query'.",
     "searchSavedView": "Search Saved View",
     "streamNotExist": "The following [STREAM_NAME] stream(s) not found. Please verify if the streams exist.",
-    "noFieldFound": "No fields found for selected stream"
+    "noFieldFound": "No fields found for selected stream",
+    "regionTitle": "Select Region"
   },
   "menu": {
     "home": "Home",

web/src/plugins/logs/Index.vue

@@ -138,7 +138,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-test="logs-search-no-stream-selected-text"
                     class="text-center col-10 q-mx-auto"
                   >
-                    <q-icon name="info" color="primary" size="md" /> Select a
+                    <q-icon name="info"
+color="primary" size="md" /> Select a
                     stream and press 'Run query' to continue. Additionally, you
                     can apply additional filters and adjust the date range to
                     enhance search.
@@ -157,7 +158,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-test="logs-search-error-message"
                     class="text-center q-mx-auto col-10"
                   >
-                    <q-icon name="info" color="primary" size="md" />
+                    <q-icon name="info"
+color="primary" size="md" />
                     {{ t("search.noRecordFound") }}
                   </h6>
                 </div>
@@ -174,7 +176,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-test="logs-search-error-message"
                     class="text-center q-mx-auto col-10"
                   >
-                    <q-icon name="info" color="primary" size="md" />
+                    <q-icon name="info"
+color="primary" size="md" />
                     {{ t("search.applySearch") }}
                   </h6>
                 </div>
@@ -367,6 +370,7 @@ export default defineComponent({
       getHistogramQueryData,
       fnParsedSQL,
       addOrderByToQuery,
+      getRegionInfo,
     } = useLogs();
     const searchResultRef = ref(null);
     const searchBarRef = ref(null);
@@ -439,9 +443,16 @@ export default defineComponent({
       refreshHistogramChart();
     });
 
-    onBeforeMount(() => {
+    onBeforeMount(async () => {
       searchObj.loading = true;
       searchObj.meta.pageType = "logs";
+      if (
+        config.isEnterprise == "true" &&
+        store.state.zoConfig.super_cluster_enabled
+      ) {
+        await getRegionInfo();
+      }
+
       resetSearchObj();
       resetStreamData();
       searchObj.organizationIdetifier =

web/src/plugins/logs/IndexList.vue

@@ -665,6 +665,7 @@ export default defineComponent({
             query_context: query_context,
             query_fn: query_fn,
             type: searchObj.data.stream.streamType,
+            regions: searchObj.meta.regions.join(","),
           })
           .then((res: any) => {
             if (res.data.hits.length) {

web/src/plugins/logs/SearchBar.vue

@@ -34,14 +34,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           no-caps
           size="sm"
           icon="restart_alt"
-          class="q-pr-sm q-pl-xs reset-filters q-ml-md"
+          class="q-pr-sm q-pl-xs reset-filters q-ml-xs"
           @click="resetFilters"
         />
         <syntax-guide
           data-test="logs-search-bar-sql-mode-toggle-btn"
           :sqlmode="searchObj.meta.sqlMode"
         ></syntax-guide>
-        <q-btn-group class="q-ml-sm no-outline q-pa-none no-border">
+        <q-btn-group class="q-ml-xs no-outline q-pa-none no-border">
           <q-btn-dropdown
             data-test="logs-search-saved-views-btn"
             v-model="savedViewDropdownModel"
@@ -271,7 +271,7 @@ color="grey" size="xs" />
           size="32px"
         />
         <q-btn-group
-          class="q-ml-sm no-outline q-pa-none no-border float-left q-mr-sm"
+          class="no-outline q-pa-none no-border float-left q-mr-xs"
           :disable="!searchObj.meta.toggleFunction"
         >
           <q-btn-dropdown
@@ -320,10 +320,10 @@ color="grey" size="xs" />
             </q-list>
           </q-btn-dropdown>
         </q-btn-group>
-        <q-btn-group class="q-ml-xs no-outline q-pa-none no-border">
+        <q-btn-group class="no-outline q-pa-none no-border">
           <q-btn-dropdown
             data-test="logs-search-bar-reset-function-btn"
-            class="q-mr-sm download-logs-btn q-px-xs"
+            class="q-mr-xs download-logs-btn q-px-xs"
             size="sm"
             icon="download"
             :title="t('search.exportLogs')"
@@ -361,7 +361,7 @@ clickable v-close-popup>
         </q-btn-group>
         <q-btn
           data-test="logs-search-bar-share-link-btn"
-          class="q-mr-sm download-logs-btn q-px-sm"
+          class="q-mr-xs download-logs-btn q-px-sm"
           size="sm"
           icon="share"
           :title="t('search.shareLink')"
@@ -382,13 +382,60 @@ clickable v-close-popup>
             @on:timezone-change="updateTimezone"
           />
         </div>
-        <div class="search-time float-left q-mr-sm">
+        <div class="search-time float-left q-mr-xs">
           <div class="flex">
             <auto-refresh-interval
-              class="q-mr-sm q-px-none logs-auto-refresh-interval"
+              class="q-mr-xs q-px-none logs-auto-refresh-interval"
               v-model="searchObj.meta.refreshInterval"
               @update:model-value="onRefreshIntervalUpdate"
             />
+            <q-btn-group
+              class="no-outline q-pa-none no-border"
+              v-if="
+                config.isEnterprise == 'true' &&
+                Object.keys(store.state.regionInfo).length > 0 &&
+                store.state.zoConfig.super_cluster_enabled
+              "
+            >
+              <q-btn-dropdown
+                data-test="logs-search-bar-region-btn"
+                class="q-mr-xs region-dropdown-btn q-px-xs"
+                :title="t('search.regionTitle')"
+                label="Region"
+              >
+                <q-list class="region-dropdown-list">
+                  <q-item
+                    class="q-pa-sm"
+                    clickable
+                    v-close-popup
+                    v-for="item in Object.keys(store.state.regionInfo)"
+                    :key="'region-key-' + item"
+                  >
+                    <q-item-section
+                      class="full-width"
+                      @click.stop="
+                        handleRegionsSelection(
+                          item,
+                          searchObj.meta.regions.includes(item)
+                        )
+                      "
+                    >
+                      <q-icon
+                        size="xs"
+                        :name="
+                          searchObj.meta.regions.includes(item)
+                            ? 'check_circle'
+                            : 'radio_button_unchecked'
+                        "
+                        class="float-left"
+                      ></q-icon>
+                      <q-item-label>{{ item }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </q-btn-group>
+
             <!-- <q-separator vertical inset /> -->
             <q-btn
               data-test="logs-search-bar-refresh-btn"
@@ -2196,6 +2243,17 @@ export default defineComponent({
       return filtered;
     };
 
+    const handleRegionsSelection = (item, isSelected) => {
+      if (isSelected) {
+        const index = searchObj.meta.regions.indexOf(item);
+        if (index > -1) {
+          searchObj.meta.regions.splice(index, 1);
+        }
+      } else {
+        searchObj.meta.regions.push(item);
+      }
+    };
+
     return {
       t,
       store,
@@ -2262,6 +2320,8 @@ export default defineComponent({
       localSavedViews,
       loadSavedView,
       filterSavedViewFn,
+      config,
+      handleRegionsSelection,
     };
   },
   computed: {
@@ -2570,7 +2630,7 @@ export default defineComponent({
   }
 
   .search-button {
-    min-width: 96px;
+    min-width: 70px;
     line-height: 29px;
     font-weight: bold;
     text-transform: initial;
@@ -2714,4 +2774,37 @@ export default defineComponent({
   line-height: 24px !important;
   font-weight: bold !important;
 }
+
+.region-dropdown-btn {
+  text-transform: capitalize;
+  font-weight: 600;
+  font-size: 12px;
+  padding-left: 8px;
+  height: 30px;
+  padding-top: 3px;
+
+  .q-btn-dropdown__arrow {
+    margin-left: 0px !important;
+  }
+}
+
+.download-logs-btn {
+  .q-btn-dropdown__arrow {
+    margin-left: 0px !important;
+  }
+}
+
+.region-dropdown-list {
+  min-width: 150px;
+
+  .q-item__section {
+    display: inline-block;
+  }
+
+  .q-item__label {
+    margin-left: 20px;
+    text-transform: capitalize;
+    margin-top: 2px;
+  }
+}
 </style>

web/src/plugins/logs/SyntaxGuide.vue

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     size="sm"
     dense
     flat
-    class="q-ml-sm q-pa-xs syntax-guide-button"
+    class="q-ml-xs q-pa-xs syntax-guide-button"
     :class="sqlmode ? 'sql-mode' : 'normal-mode'"
     :label="t('search.syntaxGuideLabel')"
     icon="help"

web/src/services/search.ts

@@ -36,6 +36,7 @@ const search = {
     query_context,
     query_fn,
     stream_type,
+    regions,
   }: {
     org_identifier: string;
     index: string;
@@ -44,11 +45,16 @@ const search = {
     query_context: any;
     query_fn: any;
     stream_type: string;
+    regions: string;
   }) => {
     let url = `/api/${org_identifier}/${index}/_around?key=${key}&size=${size}&sql=${query_context}&type=${stream_type}`;
     if (query_fn.trim() != "") {
       url = url + `&query_fn=${query_fn}`;
     }
+
+    if (regions.trim()!= "") {
+      url = url + `&regions=${regions}`;
+    }
     return http().get(url);
   },
   metrics_query_range: ({
@@ -136,6 +142,10 @@ const search = {
     const url = `/api/query_manager/${traceID}`;
     return http().delete(url);
   },
+  get_regions: () => {
+    const url = `/api/clusters`;
+    return http().get(url);
+  },
 };
 
 export default search;

web/src/services/stream.ts

@@ -65,12 +65,14 @@ const stream = {
     query_context,
     query_fn,
     type,
+    regions,
   }: any) => {
     const fieldsString = fields.join(",");
     let url = `/api/${org_identifier}/${stream_name}/_values?fields=${fieldsString}&size=${size}&start_time=${start_time}&end_time=${end_time}`;
     if (query_context) url = url + `&sql=${query_context}`;
     if (query_fn?.trim()) url = url + `&query_fn=${query_fn}`;
     if (type) url += "&type=" + type;
+    if (regions) url += "&regions=" + regions;
     return http().get(url);
   },