fix: log UI issues (#2488)

fix #2478 #2480 #2479 #2487 #2489 #2477

web/src/components/alerts/AddAlert.vue

@@ -941,6 +941,7 @@ export default defineComponent({
 
       if (input.query_condition.aggregation) {
         if (
+          isNaN(input.trigger_condition.threshold) ||
           !input.query_condition.aggregation.having.value.toString().trim()
             .length ||
           !input.query_condition.aggregation.having.column ||
@@ -959,7 +960,8 @@ export default defineComponent({
       }
 
       if (
-        !input.trigger_condition.threshold.toString().trim().length ||
+        isNaN(input.trigger_condition.threshold) ||
+        input.trigger_condition.threshold < 1 ||
         !input.trigger_condition.operator
       ) {
         notify &&
@@ -1028,8 +1030,9 @@ export default defineComponent({
   },
 
   created() {
+    // TODO OK: Refactor this code
     this.formData.ingest = ref(false);
-    this.formData = { ...defaultValue, ...this.modelValue };
+    this.formData = { ...defaultValue, ...cloneDeep(this.modelValue) };
     this.formData.is_real_time = this.formData.is_real_time.toString();
     this.beingUpdated = this.isUpdated;
     this.updateStreams(false)?.then(() => {
@@ -1042,7 +1045,7 @@ export default defineComponent({
     ) {
       this.beingUpdated = true;
       this.disableColor = "grey-5";
-      this.formData = this.modelValue;
+      this.formData = cloneDeep(this.modelValue);
       this.isAggregationEnabled = !!this.formData.query_condition.aggregation;
     }
 

web/src/components/alerts/PreviewAlert.vue

@@ -183,8 +183,8 @@ const refreshData = () => {
 
   if (
     props.selectedTab === "custom" &&
-    props.formData.query_condition.aggregation.group_by.length > 0 &&
-    props.formData.query_condition.aggregation.group_by[0].trim() !== ""
+    props.formData.query_condition?.aggregation?.group_by?.length > 0 &&
+    props.formData.query_condition?.aggregation?.group_by[0]?.trim() !== ""
   ) {
     xAxis.push({
       alias: "x_axis_2",

web/src/components/alerts/ScheduledAlert.vue

@@ -348,7 +348,7 @@
                     type="number"
                     dense
                     filled
-                    min="0"
+                    min="1"
                     style="background: none"
                     @update:model-value="updateTrigger"
                   />

web/src/plugins/logs/Index.vue

@@ -329,7 +329,7 @@ export default defineComponent({
           });
         }
       }
-    }
+    },
   },
   setup() {
     const store = useStore();
@@ -387,10 +387,6 @@ export default defineComponent({
     //     console.log(e);
     //   }
     // }
-
-    onDeactivated(() => {
-      resetStreamData();
-    });
     onUnmounted(() => {
       resetSearchObj();
       resetStreamData();
@@ -687,7 +683,7 @@ export default defineComponent({
       }
     },
     fullSQLMode(newVal) {
-      if(newVal) {
+      if (newVal) {
         this.setQuery(newVal);
       } else {
         this.searchObj.meta.sqlMode = false;

web/src/plugins/logs/IndexList.vue

@@ -477,12 +477,12 @@ export default defineComponent({
       try {
         let query_context = "";
         let query = searchObj.data.query;
-        if (searchObj.meta.sqlMode == true) {
+        if (searchObj.meta.sqlMode && query.trim().length) {
           const parsedSQL: any = parser.astify(query);
           //hack add time stamp column to parsedSQL if not already added
           query_context =
             b64EncodeUnicode(parser.sqlify(parsedSQL).replace(/`/g, '"')) || "";
-        } else {
+        } else if (query.trim().length) {
           let parseQuery = query.split("|");
           let queryFunctions = "";
           let whereClause = "";
@@ -569,6 +569,7 @@ export default defineComponent({
             fieldValues.value[name]["isLoading"] = false;
           });
       } catch (err) {
+        console.log(err);
         $q.notify({
           type: "negative",
           message: "Error while fetching field values",

web/src/plugins/traces/Index.vue

@@ -1372,6 +1372,7 @@ export default defineComponent({
       refreshTimezone,
       indexListRef,
       copyTracesUrl,
+      extractFields,
     };
   },
   computed: {
@@ -1448,7 +1449,7 @@ export default defineComponent({
           if (oldStream.value) this.setQuery(this.searchObj.meta.sqlMode);
           setTimeout(() => {
             this.runQueryFn();
-            extractFields();
+            this.extractFields();
           }, 500);
         }
       },

web/src/plugins/traces/IndexList.vue

@@ -439,48 +439,52 @@ export default defineComponent({
       values: string[],
       prevValues: string[]
     ) => {
-      const parser = new Parser();
+      try {
+        const parser = new Parser();
 
-      const valuesString = values
-        .map((value: string) => "'" + value + "'")
-        .join(",");
+        const valuesString = values
+          .map((value: string) => "'" + value + "'")
+          .join(",");
 
-      let query = `SELECT * FROM ${selectedStreamName.value} `;
+        let query = `SELECT * FROM '${selectedStreamName.value}' `;
 
-      if (!searchObj.data.editorValue?.length) {
-        searchObj.data.editorValue = `${column} IN (${valuesString})`;
-      } else if (!prevValues.length) {
-        searchObj.data.editorValue += ` AND ${column} IN (${valuesString})`;
+        if (!searchObj.data.editorValue?.length) {
+          searchObj.data.editorValue = `${column} IN (${valuesString})`;
+        } else if (!prevValues.length) {
+          searchObj.data.editorValue += ` AND ${column} IN (${valuesString})`;
+        }
+
+        query += " WHERE " + searchObj.data.editorValue;
+
+        const parsedQuery: any = parser.astify(query);
+
+        if (!values.length) {
+          parsedQuery.where = removeCondition(parsedQuery.where, column);
+        } else if (prevValues.length) {
+          modifyWhereClause(parsedQuery?.where, column, values);
+        }
+
+        // Convert the AST back to SQL query
+        let modifiedQuery = parser.sqlify(parsedQuery);
+        if (modifiedQuery) {
+          searchObj.data.editorValue = (modifiedQuery.split("WHERE")[1] || "")
+            .replace(/`/g, "")
+            .trim();
+
+          // Saving query in this variable, as while switching back from advance to basic we don't have to recreate the query from filters
+          searchObj.data.advanceFiltersQuery = searchObj.data.editorValue;
+        }
+
+        if (
+          column === "service_name" &&
+          expandedFilters.value.includes("operation_name")
+        )
+          getSpecialFieldsValues("operation_name");
+
+        filterExpandedFieldValues();
+      } catch (e) {
+        console.log("Error while creating query from filters");
       }
-
-      query += " WHERE " + searchObj.data.editorValue;
-
-      const parsedQuery: any = parser.astify(query);
-
-      if (!values.length) {
-        parsedQuery.where = removeCondition(parsedQuery.where, column);
-      } else if (prevValues.length) {
-        modifyWhereClause(parsedQuery?.where, column, values);
-      }
-
-      // Convert the AST back to SQL query
-      let modifiedQuery = parser.sqlify(parsedQuery);
-      if (modifiedQuery) {
-        searchObj.data.editorValue = (modifiedQuery.split("WHERE")[1] || "")
-          .replace(/`/g, "")
-          .trim();
-
-        // Saving query in this variable, as while switching back from advance to basic we don't have to recreate the query from filters
-        searchObj.data.advanceFiltersQuery = searchObj.data.editorValue;
-      }
-
-      if (
-        column === "service_name" &&
-        expandedFilters.value.includes("operation_name")
-      )
-        getSpecialFieldsValues("operation_name");
-
-      filterExpandedFieldValues();
     };
 
     const filterExpandedFieldValues = () => {

web/src/plugins/traces/SpanBlock.vue

@@ -100,7 +100,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :span="span"
         :spanData="spanData"
         :baseTracePosition="baseTracePosition"
-      ></span-details>
+      />
     </template>
   </div>
 </template>
@@ -218,11 +218,14 @@ export default defineComponent({
         style.left =
           getLeftPosition.value * onePercent - labelWidth + 10 + "px";
       } else {
+        const left =
+          getLeftPosition.value +
+          (Math.floor(getWidth.value) ? getWidth.value : 1);
+
         style.left =
-          (getLeftPosition.value +
-            (Math.floor(getWidth.value) ? getWidth.value : 1)) *
-            onePercent +
-          "px";
+          (left * onePercent - getLeftPosition.value * onePercent < 19
+            ? getLeftPosition.value * onePercent + 19
+            : left * onePercent) + "px";
       }
       return style;
     });

web/src/plugins/traces/TraceDetailsSidebar.vue

@@ -30,7 +30,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       @click="closeSidebar"
     ></q-btn>
   </div>
-  <div class="q-pb-sm q-pt-xs flex">
+  <div class="q-pb-sm q-pt-xs flex flex-wrap">
     <div
       :title="span.operation_name"
       class="q-px-sm q-pb-none ellipsis non-selectable"
@@ -45,6 +45,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <span class="text-grey-7">Service Name: </span> {{ span.service_name }}
     </div>
+    <div
+      class="q-px-sm ellipsis non-selectable"
+      :title="getDuration"
+      style="font-size: 14px"
+    >
+      <span class="text-grey-7">Duration: </span>
+      <span>{{ getDuration }}</span>
+    </div>
   </div>
   <q-tabs
     v-model="activeTab"
@@ -310,6 +318,7 @@ import { defineComponent, onBeforeMount, ref, watch, type Ref } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
+import { formatTimeWithSuffix } from "@/utils/zincutils";
 
 export default defineComponent({
   name: "TraceDetailsSidebar",
@@ -343,6 +352,10 @@ export default defineComponent({
       }
     );
 
+    const getDuration = computed(() =>
+      formatTimeWithSuffix(props.span.duration)
+    );
+
     onBeforeMount(() => {
       spanDetails.value = getFormattedSpanDetails();
     });
@@ -519,6 +532,7 @@ export default defineComponent({
       formatStackTrace,
       getExceptionEvents,
       exceptionEventColumns,
+      getDuration,
     };
   },
 });