diff --git a/web/src/components/alerts/AddAlert.vue b/web/src/components/alerts/AddAlert.vue index 852ce57f80..d301454828 100644 --- a/web/src/components/alerts/AddAlert.vue +++ b/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; } diff --git a/web/src/components/alerts/PreviewAlert.vue b/web/src/components/alerts/PreviewAlert.vue index c343af7580..b43007afdc 100644 --- a/web/src/components/alerts/PreviewAlert.vue +++ b/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", diff --git a/web/src/components/alerts/ScheduledAlert.vue b/web/src/components/alerts/ScheduledAlert.vue index 58c420de3c..0c7d097481 100644 --- a/web/src/components/alerts/ScheduledAlert.vue +++ b/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" /> diff --git a/web/src/plugins/logs/Index.vue b/web/src/plugins/logs/Index.vue index 40cb604f2a..208c562b69 100644 --- a/web/src/plugins/logs/Index.vue +++ b/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; diff --git a/web/src/plugins/logs/IndexList.vue b/web/src/plugins/logs/IndexList.vue index 127abb1fc1..6e0205f5b1 100644 --- a/web/src/plugins/logs/IndexList.vue +++ b/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", diff --git a/web/src/plugins/traces/Index.vue b/web/src/plugins/traces/Index.vue index 3683d7f854..a489e1e909 100644 --- a/web/src/plugins/traces/Index.vue +++ b/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); } }, diff --git a/web/src/plugins/traces/IndexList.vue b/web/src/plugins/traces/IndexList.vue index 6d7c202a92..3c038fcb2a 100644 --- a/web/src/plugins/traces/IndexList.vue +++ b/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 = () => { diff --git a/web/src/plugins/traces/SpanBlock.vue b/web/src/plugins/traces/SpanBlock.vue index caece60713..5cd69dabcd 100644 --- a/web/src/plugins/traces/SpanBlock.vue +++ b/web/src/plugins/traces/SpanBlock.vue @@ -100,7 +100,7 @@ along with this program. If not, see . :span="span" :spanData="spanData" :baseTracePosition="baseTracePosition" - > + /> @@ -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; }); diff --git a/web/src/plugins/traces/TraceDetailsSidebar.vue b/web/src/plugins/traces/TraceDetailsSidebar.vue index 1ddc3917e0..7f8e22c532 100644 --- a/web/src/plugins/traces/TraceDetailsSidebar.vue +++ b/web/src/plugins/traces/TraceDetailsSidebar.vue @@ -30,7 +30,7 @@ along with this program. If not, see . @click="closeSidebar" > -
+
. > Service Name: {{ span.service_name }}
+
+ Duration: + {{ getDuration }} +
+ formatTimeWithSuffix(props.span.duration) + ); + onBeforeMount(() => { spanDetails.value = getFormattedSpanDetails(); }); @@ -519,6 +532,7 @@ export default defineComponent({ formatStackTrace, getExceptionEvents, exceptionEventColumns, + getDuration, }; }, });