From 0d2b35906ff25884f0bb67e517e6ed1d4fbd85b5 Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Sat, 23 Mar 2024 10:18:33 +0530
Subject: [PATCH] feat: Quick mode fixes (#3079)

---
 web/src/components/settings/General.vue | 154 +++++++++++++++---------
 web/src/composables/useLogs.ts          |  56 ++++++---
 web/src/locales/languages/en.json       |   2 +-
 web/src/plugins/logs/Index.vue          |  25 ++--
 web/src/plugins/logs/IndexList.vue      |  40 ++++--
 web/src/plugins/logs/SearchBar.vue      | 123 ++++++++++++++++---
 6 files changed, 293 insertions(+), 107 deletions(-)

diff --git a/web/src/components/settings/General.vue b/web/src/components/settings/General.vue
index b50e9598df..973ad108a0 100644
--- a/web/src/components/settings/General.vue
+++ b/web/src/components/settings/General.vue
@@ -65,8 +65,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <q-separator />
       <div class="q-mx-lg">
         <div class="q-gutter-sm row q-mt-xs">
-          <div v-if="editingText || store.state.zoConfig.custom_logo_text == ''" class="q-gutter-md row items-start">
-            <q-input 
+          <div
+            v-if="editingText || store.state.zoConfig.custom_logo_text == ''"
+            class="q-gutter-md row items-start"
+          >
+            <q-input
               color="input-border"
               bg-color="input-bg"
               class="q-py-md showLabelOnTop"
@@ -76,43 +79,54 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               dense
               data-test="settings_ent_logo_custom_text"
               :label="t('settings.customLogoText')"
-              v-model="customText"  
+              v-model="customText"
             />
-            <div class="btn-group relative-position vertical-middle" style="margin-top: 55px;">
-            <q-btn
-              data-test="settings_ent_logo_custom_text_save_btn"
-              :loading="onSubmit.isLoading.value"
-              :label="t('dashboard.save')"
-              class="text-bold no-border q-mr-sm"
-              color="secondary"
-              size="sm"
-              type="submit"
-              no-caps
-              @click="updateCustomText"
-            />
-            
-              <q-btn type="button" size="sm" :label="t('common.cancel')" @click="editingText=!editingText"></q-btn>
-            
+            <div
+              class="btn-group relative-position vertical-middle"
+              style="margin-top: 55px"
+            >
+              <q-btn
+                data-test="settings_ent_logo_custom_text_save_btn"
+                :loading="onSubmit.isLoading.value"
+                :label="t('dashboard.save')"
+                class="text-bold no-border q-mr-sm"
+                color="secondary"
+                size="sm"
+                type="submit"
+                no-caps
+                @click="updateCustomText"
+              />
+
+              <q-btn
+                type="button"
+                size="sm"
+                :label="t('common.cancel')"
+                @click="editingText = !editingText"
+              ></q-btn>
             </div>
           </div>
-          <div v-else style="margin-top: 17px;">
-            <q-label class="q-pt-md text-bold">{{ t("settings.customLogoText") }}</q-label><br />
-            {{ store.state.zoConfig.custom_logo_text || "<No Text Available>" }}
-              <q-btn
-                data-test="settings_ent_logo_custom_text_edit_btn"
-                :loading="onSubmit.isLoading.value"
-                icon="edit"
-                size="sm"
-                class="text-bold"
-                type="submit"
-                @click="editingText=!editingText"
-              />
+          <div v-else style="margin-top: 17px">
+            <q-label class="q-pt-md text-bold">{{
+              t("settings.customLogoText")
+            }}</q-label
+            ><br />
+            {{ store.state.zoConfig.custom_logo_text || "No Text Available" }}
+            <q-btn
+              data-test="settings_ent_logo_custom_text_edit_btn"
+              :loading="onSubmit.isLoading.value"
+              icon="edit"
+              size="sm"
+              class="text-bold"
+              type="submit"
+              @click="editingText = !editingText"
+            />
           </div>
-          
         </div>
         <q-separator class="q-mt-sm"></q-separator>
         <div class="q-gutter-sm row q-mt-xs">
-          <q-label class="q-pt-sm text-bold full-width">{{ t("settings.customLogoTitle") }} </q-label><br />
+          <q-label class="q-pt-sm text-bold full-width"
+            >{{ t("settings.customLogoTitle") }} </q-label
+          ><br />
           <div
             v-if="
               store.state.zoConfig.hasOwnProperty('custom_logo_img') &&
@@ -126,17 +140,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 `data:image; base64, ` + store.state.zoConfig.custom_logo_img
               "
               :alt="t('settings.logoLabel')"
-              style="max-width: 150px; max-height: 31px;"
+              style="max-width: 150px; max-height: 31px"
               class="q-mx-md"
             />
-            <q-btn icon="delete"
-            data-test="setting_ent_custom_logo_img_delete_btn"
-@click="confirmDeleteLogo()" class="q-mx-md" size="sm"
-              ></q-btn
-            >
-        </div>
+            <q-btn
+              icon="delete"
+              data-test="setting_ent_custom_logo_img_delete_btn"
+              @click="confirmDeleteLogo()"
+              class="q-mx-md"
+              size="sm"
+            ></q-btn>
+          </div>
           <q-file
-          data-test="setting_ent_custom_logo_img_file_upload"
+            data-test="setting_ent_custom_logo_img_file_upload"
             v-else
             v-model="files"
             :label="t('settings.logoLabel')"
@@ -164,6 +180,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     size="lg"
     color="primary"
   ></q-spinner-hourglass>
+  <q-dialog v-model="confirmDeleteImage">
+    <q-card>
+      <q-card-section>
+        {{ t("settings.deleteLogoMessage") }}
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          data-test="logs-search-bar-confirm-dialog-cancel-btn"
+          :label="t('confirmDialog.cancel')"
+          color="primary"
+          @click="cancelConfirmDialog"
+        />
+        <q-btn
+          data-test="logs-search-bar-confirm-dialog-ok-btn"
+          :label="t('confirmDialog.ok')"
+          color="positive"
+          @click="confirmDialogOK"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script lang="ts">
@@ -182,21 +220,15 @@ import configService from "@/services/config";
 export default defineComponent({
   name: "PageGeneralSettings",
   methods: {
+    cancelConfirmDialog() {
+      this.confirmDeleteImage = false;
+    },
+    confirmDialogOK() {
+      this.confirmDeleteImage = false;
+      this.deleteLogo();
+    },
     confirmDeleteLogo() {
-      this.$q
-        .dialog({
-          title: this.t("settings.deleteLogoTitle"),
-          message: this.t("settings.deleteLogoMessage"),
-          cancel: true,
-          persistent: true,
-          ok: {
-            color: "negative",
-            label: this.t("common.delete"),
-          },
-        })
-        .onOk(() => {
-          this.deleteLogo();
-        });
+      this.confirmDeleteImage = true;
     },
   },
   setup() {
@@ -210,6 +242,7 @@ export default defineComponent({
     const loadingState = ref(false);
     const customText = ref("");
     const editingText = ref(false);
+    const files = ref(null);
 
     customText.value = store.state.zoConfig.custom_logo_text;
 
@@ -272,6 +305,8 @@ export default defineComponent({
               await configService.get_config().then((res: any) => {
                 store.dispatch("setConfig", res.data);
               });
+
+              files.value = null;
             } else {
               q.notify({
                 type: "negative",
@@ -370,13 +405,15 @@ export default defineComponent({
               timeout: 2000,
             });
           }
-        }).catch((err) => {
+        })
+        .catch((err) => {
           q.notify({
             type: "negative",
             message: err?.message || "Something went wrong.",
             timeout: 2000,
           });
-        }).finally(() => {
+        })
+        .finally(() => {
           loadingState.value = false;
         });
     };
@@ -394,8 +431,8 @@ export default defineComponent({
       router,
       scrapeIntereval,
       onSubmit,
-      files: ref(null),
-      counterLabelFn(CounterLabelParams: { filesNumber: any; totalSize: any; }) {
+      files,
+      counterLabelFn(CounterLabelParams: { filesNumber: any; totalSize: any }) {
         return `(Only .png, .jpg, .jpeg, .svg formats & size <=20kb & Max Size: 150x30px) ${CounterLabelParams.filesNumber} file | ${CounterLabelParams.totalSize}`;
       },
       filesImages: ref(null),
@@ -416,6 +453,7 @@ export default defineComponent({
       customText,
       editingText,
       updateCustomText,
+      confirmDeleteImage: ref(false),
     };
   },
 });
diff --git a/web/src/composables/useLogs.ts b/web/src/composables/useLogs.ts
index d0a7049d3d..ca6aae04ba 100644
--- a/web/src/composables/useLogs.ts
+++ b/web/src/composables/useLogs.ts
@@ -455,7 +455,9 @@ const useLogs = () => {
       let query = searchObj.data.editorValue;
       const req: any = {
         query: {
-          sql: 'select [FIELD_LIST][QUERY_FUNCTIONS] from "[INDEX_NAME]" [WHERE_CLAUSE]',
+          sql: searchObj.meta.sqlMode
+            ? query
+            : 'select [FIELD_LIST][QUERY_FUNCTIONS] from "[INDEX_NAME]" [WHERE_CLAUSE]',
           start_time: (new Date().getTime() - 900000) * 1000,
           end_time: new Date().getTime() * 1000,
           from:
@@ -544,6 +546,7 @@ const useLogs = () => {
       }
 
       if (searchObj.meta.sqlMode == true) {
+        searchObj.data.query = query;
         const parsedSQL: any = fnParsedSQL();
 
         if (parsedSQL.orderby == null) {
@@ -1565,8 +1568,26 @@ const useLogs = () => {
               index = searchObj.data.stream.interestingFieldList.indexOf(
                 row.name
               );
-              if (index == -1) {
-                searchObj.data.stream.interestingFieldList.push(row.name);
+              if (index == -1 && row.name != "*") {
+                // searchObj.data.stream.interestingFieldList.push(row.name);
+                for (const stream of searchObj.data.stream
+                  .selectedStreamFields) {
+                  if ((stream as { name: string }).name == row.name) {
+                    searchObj.data.stream.interestingFieldList.push(row.name);
+                    const localInterestingFields: any =
+                      useLocalInterestingFields();
+                    let localFields: any = {};
+                    if (localInterestingFields.value != null) {
+                      localFields = localInterestingFields.value;
+                    }
+                    localFields[
+                      searchObj.organizationIdetifier +
+                        "_" +
+                        searchObj.data.stream.selectedStream.value
+                    ] = searchObj.data.stream.interestingFieldList;
+                    useLocalInterestingFields(localFields);
+                  }
+                }
               }
             }
 
@@ -1795,7 +1816,6 @@ const useLogs = () => {
         }
         query_context = b64EncodeUnicode(query_context);
       }
-      alert(query_context)
 
       let query_fn: any = "";
       if (
@@ -2100,23 +2120,27 @@ const useLogs = () => {
     }
   };
 
-  const onStreamChange = async () => {
+  const onStreamChange = async (queryStr: string) => {
     let query = searchObj.meta.sqlMode
-      ? `SELECT [FIELD_LIST] FROM "${searchObj.data.stream.selectedStream.value}"`
+      ? queryStr != ""
+        ? queryStr
+        : `SELECT [FIELD_LIST] FROM "${searchObj.data.stream.selectedStream.value}"`
       : "";
 
     await extractFields();
 
-    if (
-      searchObj.data.stream.interestingFieldList.length > 0 &&
-      searchObj.meta.quickMode
-    ) {
-      query = query.replace(
-        "[FIELD_LIST]",
-        searchObj.data.stream.interestingFieldList.join(",")
-      );
-    } else {
-      query = query.replace("[FIELD_LIST]", "*");
+    if (queryStr == "") {
+      if (
+        searchObj.data.stream.interestingFieldList.length > 0 &&
+        searchObj.meta.quickMode
+      ) {
+        query = query.replace(
+          "[FIELD_LIST]",
+          searchObj.data.stream.interestingFieldList.join(",")
+        );
+      } else {
+        query = query.replace("[FIELD_LIST]", "*");
+      }
     }
 
     searchObj.data.editorValue = query;
diff --git a/web/src/locales/languages/en.json b/web/src/locales/languages/en.json
index a702021fe9..ccbf87801c 100644
--- a/web/src/locales/languages/en.json
+++ b/web/src/locales/languages/en.json
@@ -801,7 +801,7 @@
     "logoLabel": "Drag & Drop Logo Image",
     "customLogoTitle": "Custom Logo",
     "deleteLogoTitle": "Delete Logo",
-    "deleteLogoMessage": "Are you sure you want to delete this logo image?",
+    "deleteLogoMessage": "Are you sure you want to delete this logo image? Click Ok to delete.",
     "deleteLogo": "Delete Logo",
     "logo": "Logo",
     "customLogoText": "Custom Logo Text"
diff --git a/web/src/plugins/logs/Index.vue b/web/src/plugins/logs/Index.vue
index 5be4248075..3ddf344af0 100644
--- a/web/src/plugins/logs/Index.vue
+++ b/web/src/plugins/logs/Index.vue
@@ -567,11 +567,6 @@ export default defineComponent({
         }
       } catch (e) {
         console.log("Logs : Error in setQuery");
-        $q.notify({
-          message: "Error while setting up query",
-          color: "negative",
-          timeout: 2000,
-        });
       }
     };
 
@@ -644,6 +639,15 @@ export default defineComponent({
           }
         } else {
           //add the field in the query
+          if (parsedSQL.columns.length > 0) {
+            // iterate and remove the * from the query
+            parsedSQL.columns = removeFieldByName(
+              parsedSQL.columns,
+              "*",
+              parsedSQL.orderby
+            );
+          }
+
           parsedSQL.columns.push({
             expr: {
               type: "column_ref",
@@ -843,10 +847,17 @@ export default defineComponent({
     },
     quickMode(newVal) {
       if (newVal == true) {
+        let field_list: string = "*";
+        if (this.searchObj.data.stream.interestingFieldList.length > 0) {
+          field_list =
+            this.searchObj.data.stream.interestingFieldList.join(",");
+        }
         if (this.searchObj.meta.sqlMode == true) {
           this.searchObj.data.query = this.searchObj.data.query.replace(
-            "*",
-            this.searchObj.data.stream.interestingFieldList.join(",")
+            /SELECT\s+(.*?)\s+FROM/i,
+            (match, fields) => {
+              return `SELECT ${field_list} FROM`;
+            }
           );
           this.setQuery(newVal);
           this.updateUrlQueryParams();
diff --git a/web/src/plugins/logs/IndexList.vue b/web/src/plugins/logs/IndexList.vue
index 92525ece78..1d3eae6162 100644
--- a/web/src/plugins/logs/IndexList.vue
+++ b/web/src/plugins/logs/IndexList.vue
@@ -39,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         hide-selected
         fill-input
         @filter="filterStreamFn"
-        @update:model-value="onStreamChange"
+        @update:model-value="onStreamChange('')"
       >
         <template #no-option>
           <q-item>
@@ -88,10 +88,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :title="props.row.name"
               >
                 <div
-                  class="field_label ellipsis full-width"
+                  class="field_label full-width"
                   :data-test="`logs-field-list-item-${props.row.name}`"
                 >
-                  {{ props.row.name }}
+                  <div
+                    class="ellipsis"
+                    style="max-width: 90% !important; display: inline-block"
+                  >
+                    {{ props.row.name }}
+                  </div>
                   <span class="float-right">
                     <q-icon
                       :data-test="`log-search-index-list-interesting-${props.row.name}-field-btn`"
@@ -189,10 +194,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :data-test="`log-search-expand-${props.row.name}-field-btn`"
                   >
                     <div
-                      class="field_label ellipsis full-width"
+                      class="field_label full-width"
                       :data-test="`logs-field-list-item-${props.row.name}`"
                     >
-                      {{ props.row.name }}
+                      <div
+                        class="ellipsis"
+                        style="max-width: 90% !important; display: inline-block"
+                      >
+                        {{ props.row.name }}
+                      </div>
                       <span class="float-right">
                         <q-icon
                           :data-test="`log-search-index-list-interesting-${props.row.name}-field-btn`"
@@ -710,8 +720,24 @@ export default defineComponent({
         const index = searchObj.data.stream.interestingFieldList.indexOf(
           field.name
         );
-        if (index == -1) {
-          searchObj.data.stream.interestingFieldList.push(field.name);
+        if (index == -1 && field.name != "*") {
+          // searchObj.data.stream.interestingFieldList.push(field.name);
+          for (const stream of searchObj.data.stream.selectedStreamFields) {
+            if ((stream as { name: string }).name == field.name) {
+              searchObj.data.stream.interestingFieldList.push(field.name);
+              const localInterestingFields: any = useLocalInterestingFields();
+              let localFields: any = {};
+              if (localInterestingFields.value != null) {
+                localFields = localInterestingFields.value;
+              }
+              localFields[
+                searchObj.organizationIdetifier +
+                  "_" +
+                  searchObj.data.stream.selectedStream.value
+              ] = searchObj.data.stream.interestingFieldList;
+              useLocalInterestingFields(localFields);
+            }
+          }
         }
       }
 
diff --git a/web/src/plugins/logs/SearchBar.vue b/web/src/plugins/logs/SearchBar.vue
index 5258a20880..1745b31ba8 100644
--- a/web/src/plugins/logs/SearchBar.vue
+++ b/web/src/plugins/logs/SearchBar.vue
@@ -657,7 +657,12 @@ import AutoRefreshInterval from "@/components/AutoRefreshInterval.vue";
 import stream from "@/services/stream";
 import { getConsumableDateTime } from "@/utils/commons";
 import useSqlSuggestions from "@/composables/useSuggestions";
-import { mergeDeep, b64DecodeUnicode, getImageURL } from "@/utils/zincutils";
+import {
+  mergeDeep,
+  b64DecodeUnicode,
+  getImageURL,
+  useLocalInterestingFields,
+} from "@/utils/zincutils";
 import savedviewsService from "@/services/saved_views";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import { cloneDeep } from "lodash-es";
@@ -791,6 +796,7 @@ export default defineComponent({
       resetStreamData,
       loadStreamLists,
       fnParsedSQL,
+      onStreamChange,
     } = useLogs();
     const queryEditorRef = ref(null);
 
@@ -878,18 +884,68 @@ export default defineComponent({
     }
 
     const updateQueryValue = (value: string) => {
-      searchObj.data.editorValue = value;
-
       if (searchObj.meta.quickMode == true) {
         const parsedSQL = fnParsedSQL();
 
+        if (
+          parsedSQL != undefined &&
+          parsedSQL.hasOwnProperty("from") &&
+          parsedSQL?.from.length > 0 &&
+          parsedSQL?.from[0].table !==
+            searchObj.data.stream.selectedStream.value
+        ) {
+          searchObj.data.stream.selectedStream = {
+            label: parsedSQL.from[0].table,
+            value: parsedSQL.from[0].table,
+          };
+          searchObj.data.stream.selectedStreamFields = [];
+          onStreamChange(value);
+        }
+        // if (
+        //   parsedSQL.hasOwnProperty("columns") &&
+        //   parsedSQL?.columns.length > 0
+        // ) {
+        //   const columnNames = getColumnNames(parsedSQL?.columns);
+        //   searchObj.data.stream.interestingFieldList = [];
+        //   for (const [index, col] of columnNames.entries()) {
+        //     if (
+        //       !searchObj.data.stream.interestingFieldList.includes(col) &&
+        //       col != "*"
+        //     ) {
+        //       // searchObj.data.stream.interestingFieldList.push(col);
+        //       for (const stream of searchObj.data.streamResults.list) {
+        //         if (stream.value == col) {
+        //           searchObj.data.stream.interestingFieldList.push(col);
+        //         }
+        //       }
+        //     }
+        //   }
         if (parsedSQL?.columns.length > 0) {
           const columnNames = getColumnNames(parsedSQL?.columns);
-
           searchObj.data.stream.interestingFieldList = [];
           for (const col of columnNames) {
-            if (!searchObj.data.stream.interestingFieldList.includes(col)) {
-              searchObj.data.stream.interestingFieldList.push(col);
+            if (
+              !searchObj.data.stream.interestingFieldList.includes(col) &&
+              col != "*"
+            ) {
+              // searchObj.data.stream.interestingFieldList.push(col);
+              for (const stream of searchObj.data.stream.selectedStreamFields) {
+                if (stream.name == col) {
+                  searchObj.data.stream.interestingFieldList.push(col);
+                  const localInterestingFields: any =
+                    useLocalInterestingFields();
+                  let localFields: any = {};
+                  if (localInterestingFields.value != null) {
+                    localFields = localInterestingFields.value;
+                  }
+                  localFields[
+                    searchObj.organizationIdetifier +
+                      "_" +
+                      searchObj.data.stream.selectedStream.value
+                  ] = searchObj.data.stream.interestingFieldList;
+                  useLocalInterestingFields(localFields);
+                }
+              }
             }
           }
 
@@ -905,6 +961,8 @@ export default defineComponent({
         }
       }
 
+      searchObj.data.editorValue = value;
+
       updateAutoComplete(value);
       try {
         if (searchObj.meta.sqlMode == true) {
@@ -1997,23 +2055,52 @@ export default defineComponent({
           }
           this.searchObj.data.query = currentQuery.join("| ");
         } else {
-          if (currentQuery != "") {
-            if (
-              this.searchObj.meta.sqlMode == true &&
-              currentQuery.toString().toLowerCase().indexOf("where") == -1
+          // if (currentQuery != "") {
+          //   if (
+          //     this.searchObj.meta.sqlMode == true &&
+          //     currentQuery.toString().toLowerCase().indexOf("where") == -1
+          //   ) {
+          //     currentQuery += " where " + filter;
+          //   } else {
+          //     currentQuery += " and " + filter;
+          //   }
+          // } else {
+          //   if (this.searchObj.meta.sqlMode == true) {
+          //     currentQuery = "where " + filter;
+          //   } else {
+          //     currentQuery = filter;
+          //   }
+          // }
+
+          if (this.searchObj.meta.sqlMode == true) {
+            // if query contains order by clause or limit clause then add where clause before that
+            // if query contains where clause then add filter after that with and operator and keep order by or limit after that
+            // if query does not contain where clause then add where clause before filter
+            if (currentQuery[0].toLowerCase().indexOf("where") != -1) {
+              currentQuery[0] = currentQuery[0].replace(/where/gi, (match) => {
+                return match + " " + filter + " and ";
+              });
+            } else if (
+              currentQuery[0].toLowerCase().indexOf("order by") != -1 ||
+              currentQuery[0].toLowerCase().indexOf("limit") != -1
             ) {
-              currentQuery += " where " + filter;
+              currentQuery[0] = currentQuery[0].replace(
+                /order by|limit/gi,
+                (match) => {
+                  return " where " + filter + " " + match;
+                }
+              );
             } else {
-              currentQuery += " and " + filter;
+              currentQuery[0] += " where " + filter;
             }
           } else {
-            if (this.searchObj.meta.sqlMode == true) {
-              currentQuery = "where " + filter;
-            } else {
-              currentQuery = filter;
-            }
+            
+            currentQuery[0].length == 0
+              ? (currentQuery[0] = filter)
+              : (currentQuery[0] += " and " + filter);
           }
-          this.searchObj.data.query = currentQuery;
+
+          this.searchObj.data.query = currentQuery[0];
         }
         this.searchObj.data.stream.addToFilter = "";
         if (this.queryEditorRef?.setValue)