From 701e0b640a620788f96e397ce7fe8d66e1f7cb4e Mon Sep 17 00:00:00 2001
From: Neha P <144308844+neha00290@users.noreply.github.com>
Date: Wed, 14 Aug 2024 18:19:32 +0530
Subject: [PATCH] test: assert timestamp and all displayed in fields when uds
 enabled (#4208)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **Tests**
- Enhanced test coverage for schema functionalities, adding interactions
for log search and schema selection.
- Improved verification of `_timestamp` and `_all` fields to ensure
thorough validation of the schema selection process.
- Streamlined logging process by removing unnecessary console logging
during test execution.

- **Style**
- Improved formatting and readability in the `IndexList` component,
including adjustments to multiline expressions and conditional
renderings.
- Enhanced semantic clarity by restructuring template elements for
better organization and styling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: omkark06 <omkar@zinclabs.io>
---
 .../playwright-tests/schema.spec.js           |  32 +++--
 web/src/plugins/logs/IndexList.vue            | 133 ++++++++++--------
 2 files changed, 94 insertions(+), 71 deletions(-)

diff --git a/tests/ui-testing/playwright-tests/schema.spec.js b/tests/ui-testing/playwright-tests/schema.spec.js
index 4e0186cc3d..0003d1d53b 100644
--- a/tests/ui-testing/playwright-tests/schema.spec.js
+++ b/tests/ui-testing/playwright-tests/schema.spec.js
@@ -90,15 +90,15 @@ test.describe("Schema testcases", () => {
   });
 
   test('stream schema settings updated to be displayed under logs', async ({ page }) => {
-    page.on('console', msg => console.log(msg.text()));
-    page.on('response', async (resp) => {
-      if (resp.url().includes('api/default/')) {
-        console.log('url      -> ', resp.url());
-        console.log('code     -> ', resp.status());
-        console.log('payload  -> ', resp.request().postData());
-        console.log('response -> ', await resp.text());
-      }
-    });
+    // page.on('console', msg => console.log(msg.text()));
+    // page.on('response', async (resp) => {
+    //   if (resp.url().includes('api/default/')) {
+    //     console.log('url      -> ', resp.url());
+    //     console.log('code     -> ', resp.status());
+    //     console.log('payload  -> ', resp.request().postData());
+    //     console.log('response -> ', await resp.text());
+    //   }
+    // });
 
     await page.locator('[data-test="menu-link-\\/streams-item"]').click();
     await page.getByPlaceholder('Search Stream').click();
@@ -124,7 +124,19 @@ test.describe("Schema testcases", () => {
     // await page.locator('[data-test="logs-search-bar-refresh-btn"]').click();
     await page.locator('[data-test="log-table-column-1-\\@timestamp"] [data-test="table-row-expand-menu"]').click();
     await page.waitForTimeout(1000);
-    await page.getByText(/^arrow_drop_down_all:.*$/).click();
+     await page.getByText(/^arrow_drop_down_all:.*$/).click();
+    await page.locator('[data-test="log-search-index-list-field-search-input"]').click();
+  await page.locator('[data-test="log-search-index-list-field-search-input"]').fill('_timestamp');
+  await page.locator('[data-test="log-search-index-list-fields-table"]').getByTitle('_timestamp').click();
+  await page.locator('[data-test="log-search-index-list-field-search-input"]').click();
+  await page.locator('[data-test="log-search-index-list-field-search-input"]').fill('_all');
+  await page.locator('[data-test="log-search-index-list-fields-table"]').getByTitle('_all')
+  await page.locator('[data-test="logs-all-fields-btn"]').click();
+  await page.locator('[data-test="log-search-index-list-field-search-input"]').click();
+  await page.locator('[data-test="log-search-index-list-fields-table"]').getByTitle('_all')
+  await page.locator('[data-test="log-search-index-list-field-search-input"]').click();
+  await page.locator('[data-test="log-search-index-list-field-search-input"]').fill('_timestamp');
+  await page.locator('[data-test="log-search-index-list-fields-table"]').getByTitle('_timestamp').click();
     await page.locator('[data-test="menu-link-\\/streams-item"]').click();
     await page.getByPlaceholder('Search Stream').click();
     await page.getByPlaceholder('Search Stream').fill('e2e_automate');
diff --git a/web/src/plugins/logs/IndexList.vue b/web/src/plugins/logs/IndexList.vue
index 247abc40cd..71e836edd1 100644
--- a/web/src/plugins/logs/IndexList.vue
+++ b/web/src/plugins/logs/IndexList.vue
@@ -67,7 +67,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-model="sortedStreamFields"
         :visible-columns="['name']"
         :rows="streamFieldsRows"
-        :row-key="(row: any) => searchObj.data.stream.selectedStream[0] + row.name"
+        :row-key="
+          (row: any) => searchObj.data.stream.selectedStream[0] + row.name
+        "
         :filter="searchObj.data.stream.filterField"
         :filter-method="filterFieldFn"
         v-model:pagination="pagination"
@@ -178,7 +180,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
                 <div class="field_overlay">
                   <q-btn
-                    v-if="props.row.isSchemaField && props.row.name != store.state.zoConfig.timestamp_column"
+                    v-if="
+                      props.row.isSchemaField &&
+                      props.row.name != store.state.zoConfig.timestamp_column
+                    "
                     :icon="outlinedAdd"
                     :data-test="`log-search-index-list-filter-${props.row.name}-field-btn`"
                     style="margin-right: 0.375rem"
@@ -191,7 +196,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :data-test="`log-search-index-list-add-${props.row.name}-field-btn`"
                     v-if="
                       !searchObj.data.stream.selectedFields.includes(
-                        props.row.name
+                        props.row.name,
                       )
                     "
                     :name="outlinedVisibility"
@@ -204,7 +209,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :data-test="`log-search-index-list-remove-${props.row.name}-field-btn`"
                     v-if="
                       searchObj.data.stream.selectedFields.includes(
-                        props.row.name
+                        props.row.name,
                       )
                     "
                     :name="outlinedVisibilityOff"
@@ -228,7 +233,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     @click.stop="
                       addToInterestingFieldList(
                         props.row,
-                        props.row.isInterestingField
+                        props.row.isInterestingField,
                       )
                     "
                   />
@@ -246,7 +251,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 expanded-icon="
                   expand_less
                 "
-                @before-show="(event: any) => openFilterCreator(event, props.row)"
+                @before-show="
+                  (event: any) => openFilterCreator(event, props.row)
+                "
               >
                 <template v-slot:header>
                   <div
@@ -301,7 +308,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :data-test="`log-search-index-list-add-${props.row.name}-field-btn`"
                         v-if="
                           !searchObj.data.stream.selectedFields.includes(
-                            props.row.name
+                            props.row.name,
                           )
                         "
                         :name="outlinedVisibility"
@@ -314,7 +321,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         :data-test="`log-search-index-list-remove-${props.row.name}-field-btn`"
                         v-if="
                           searchObj.data.stream.selectedFields.includes(
-                            props.row.name
+                            props.row.name,
                           )
                         "
                         :name="outlinedVisibilityOff"
@@ -338,7 +345,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         @click.stop="
                           addToInterestingFieldList(
                             props.row,
-                            props.row.isInterestingField
+                            props.row.isInterestingField,
                           )
                         "
                       />
@@ -430,7 +437,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                 size="6px"
                                 @click="
                                   addSearchTerm(
-                                    `${props.row.name}='${value.key}'`
+                                    `${props.row.name}='${value.key}'`,
                                   )
                                 "
                                 title="Include Term"
@@ -445,7 +452,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                 size="6px"
                                 @click="
                                   addSearchTerm(
-                                    `${props.row.name}!='${value.key}'`
+                                    `${props.row.name}!='${value.key}'`,
                                   )
                                 "
                                 title="Exclude Term"
@@ -513,35 +520,39 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :options="userDefinedSchemaBtnGroupOption"
             >
               <template v-slot:user_defined_slot>
-                <q-icon name="person"></q-icon>
-                <q-icon name="schema"></q-icon>
-                <q-tooltip
-                  data-test="logs-page-fields-list-user-defined-fields-warning-tooltip"
-                  anchor="center right"
-                  self="center left"
-                  max-width="300px"
-                  class="text-body2"
-                >
-                  <span class="text-bold" color="white">{{
-                    t("search.userDefinedSchemaLabel")
-                  }}</span>
-                </q-tooltip>
+                <div data-test="logs-user-defined-fields-btn">
+                  <q-icon name="person"></q-icon>
+                  <q-icon name="schema"></q-icon>
+                  <q-tooltip
+                    data-test="logs-page-fields-list-user-defined-fields-warning-tooltip"
+                    anchor="center right"
+                    self="center left"
+                    max-width="300px"
+                    class="text-body2"
+                  >
+                    <span class="text-bold" color="white">{{
+                      t("search.userDefinedSchemaLabel")
+                    }}</span>
+                  </q-tooltip>
+                </div>
               </template>
               <template v-slot:all_fields_slot>
-                <q-icon name="schema"></q-icon>
-                <q-tooltip
-                  data-test="logs-page-fields-list-all-fields-warning-tooltip"
-                  anchor="center right"
-                  self="center left"
-                  max-width="300px"
-                  class="text-body2"
-                >
-                  <span class="text-bold" color="white">{{
-                    t("search.allFieldsLabel")
-                  }}</span>
-                  <q-separator color="white" class="q-mt-xs q-mb-xs" />
-                  {{ t("search.allFieldsWarningMsg") }}
-                </q-tooltip>
+                <div data-test="logs-all-fields-btn">
+                  <q-icon name="schema"></q-icon>
+                  <q-tooltip
+                    data-test="logs-page-fields-list-all-fields-warning-tooltip"
+                    anchor="center right"
+                    self="center left"
+                    max-width="300px"
+                    class="text-body2"
+                  >
+                    <span class="text-bold" color="white">{{
+                      t("search.allFieldsLabel")
+                    }}</span>
+                    <q-separator color="white" class="q-mt-xs q-mb-xs" />
+                    {{ t("search.allFieldsWarningMsg") }}
+                  </q-tooltip>
+                </div>
               </template>
             </q-btn-toggle>
           </div>
@@ -721,7 +732,7 @@ export default defineComponent({
         streamOptions.value = searchObj.data.stream.streamLists;
         const needle = val.toLowerCase();
         streamOptions.value = streamOptions.value.filter(
-          (v: any) => v.label.toLowerCase().indexOf(needle) > -1
+          (v: any) => v.label.toLowerCase().indexOf(needle) > -1,
         );
       });
     };
@@ -776,7 +787,7 @@ export default defineComponent({
       if (searchObj.data.stream.selectedFields.includes(row.name)) {
         searchObj.data.stream.selectedFields =
           searchObj.data.stream.selectedFields.filter(
-            (v: any) => v !== row.name
+            (v: any) => v !== row.name,
           );
       } else {
         searchObj.data.stream.selectedFields.push(row.name);
@@ -789,7 +800,7 @@ export default defineComponent({
 
     const openFilterCreator = (
       event: any,
-      { name, ftsKey, isSchemaField, streams }: any
+      { name, ftsKey, isSchemaField, streams }: any,
     ) => {
       if (ftsKey) {
         event.stopPropagation();
@@ -800,27 +811,27 @@ export default defineComponent({
       let timestamps: any =
         searchObj.data.datetime.type === "relative"
           ? getConsumableRelativeTime(
-              searchObj.data.datetime.relativeTimePeriod
+              searchObj.data.datetime.relativeTimePeriod,
             )
           : cloneDeep(searchObj.data.datetime);
 
       if (searchObj.data.stream.streamType === "enrichment_tables") {
         const stream = searchObj.data.streamResults.list.find((stream: any) =>
-          searchObj.data.stream.selectedStream.includes(stream.name)
+          searchObj.data.stream.selectedStream.includes(stream.name),
         );
         if (stream.stats) {
           timestamps = {
             startTime:
               new Date(
                 convertTimeFromMicroToMilli(
-                  stream.stats.doc_time_min - 300000000
-                )
+                  stream.stats.doc_time_min - 300000000,
+                ),
               ).getTime() * 1000,
             endTime:
               new Date(
                 convertTimeFromMicroToMilli(
-                  stream.stats.doc_time_max + 300000000
-                )
+                  stream.stats.doc_time_max + 300000000,
+                ),
               ).getTime() * 1000,
           };
         }
@@ -884,7 +895,7 @@ export default defineComponent({
 
             query_context = query_context.replace(
               "[WHERE_CLAUSE]",
-              " WHERE " + whereClause
+              " WHERE " + whereClause,
             );
           } else {
             query_context = query_context.replace("[WHERE_CLAUSE]", "");
@@ -917,8 +928,8 @@ export default defineComponent({
             streams = searchObj.data.stream.selectedStream.filter(
               (streams: any) =>
                 !searchObj.data.stream.missingStreamMultiStreamFilter.includes(
-                  streams
-                )
+                  streams,
+                ),
             );
           }
         }
@@ -934,7 +945,7 @@ export default defineComponent({
               size: 10,
               query_context:
                 b64EncodeUnicode(
-                  query_context.replace("[INDEX_NAME]", selectedStream)
+                  query_context.replace("[INDEX_NAME]", selectedStream),
                 ) || "",
               query_fn: query_fn,
               type: searchObj.data.stream.streamType,
@@ -949,7 +960,7 @@ export default defineComponent({
                   item.values.forEach((subItem: any) => {
                     if (fieldValues.value[name]["values"].length) {
                       let index = fieldValues.value[name]["values"].findIndex(
-                        (value: any) => value.key == subItem.zo_sql_key
+                        (value: any) => value.key == subItem.zo_sql_key,
                       );
                       if (index != -1) {
                         fieldValues.value[name]["values"][index].count =
@@ -971,7 +982,7 @@ export default defineComponent({
                 });
                 if (fieldValues.value[name]["values"].length > 10) {
                   fieldValues.value[name]["values"].sort(
-                    (a, b) => b.count - a.count
+                    (a, b) => b.count - a.count,
                   ); // Sort the array based on count in descending order
                   fieldValues.value[name]["values"].slice(0, 10); // Return the first 10 elements
                 }
@@ -1016,16 +1027,16 @@ export default defineComponent({
     let fieldIndex: any = -1;
     const addToInterestingFieldList = (
       field: any,
-      isInterestingField: boolean
+      isInterestingField: boolean,
     ) => {
       if (selectedFieldsName.length == 0) {
         selectedFieldsName = searchObj.data.stream.selectedStreamFields.map(
-          (item: any) => item.name
+          (item: any) => item.name,
         );
       }
       if (isInterestingField) {
         const index = searchObj.data.stream.interestingFieldList.indexOf(
-          field.name
+          field.name,
         );
         if (index > -1) {
           // only splice array when item is found
@@ -1062,7 +1073,7 @@ export default defineComponent({
         }
       } else {
         const index = searchObj.data.stream.interestingFieldList.indexOf(
-          field.name
+          field.name,
         );
         if (index == -1 && field.name != "*") {
           searchObj.data.stream.interestingFieldList.push(field.name);
@@ -1128,7 +1139,7 @@ export default defineComponent({
 
     const sortedStreamFields = () => {
       return searchObj.data.stream.selectedStreamFields.sort(
-        (a: any, b: any) => a.group - b.group
+        (a: any, b: any) => a.group - b.group,
       );
     };
 
@@ -1159,13 +1170,13 @@ export default defineComponent({
       toggleSchema,
       streamFieldsRows: computed(() => {
         let expandKeys = Object.keys(
-          searchObj.data.stream.expandGroupRows
+          searchObj.data.stream.expandGroupRows,
         ).reverse();
 
         let startIndex = 0;
         // Iterate over the keys in reverse order
         let selectedStreamFields = cloneDeep(
-          searchObj.data.stream.selectedStreamFields
+          searchObj.data.stream.selectedStreamFields,
         );
         let count = 0;
         // console.log(searchObj.data.stream.selectedStreamFields)
@@ -1188,7 +1199,7 @@ export default defineComponent({
               // console.log("========")
               selectedStreamFields.splice(
                 startIndex - count,
-                searchObj.data.stream.expandGroupRowsFieldCount[key]
+                searchObj.data.stream.expandGroupRowsFieldCount[key],
               );
             }
           } else {