From 2909d0cb98c2fa9ec72aaa65685771470d2ed6bb Mon Sep 17 00:00:00 2001 From: Omkar Kesarkhane <127078473+omkarK06@users.noreply.github.com> Date: Fri, 11 Jul 2025 14:17:23 +0530 Subject: [PATCH] fix: fixed traces scatter chart rendering (#7526) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### **PR Type** Bug fix, Enhancement ___ ### **Description** - Hide original-data toggle for traces streams - Auto redraw scatter chart on component mount - Remove redundant v-show guard on histogram - Refactor schema UI formatting and logic ___ ### **Changes diagram** ```mermaid flowchart LR A["Stream type != \"traces\"?"] -- evaluates --> B["showStoreOriginalDataToggle"] B -- true --> C["Display \"Store Original Data\" toggle"] D["SearchResult.vue onMounted"] -- triggers --> E["reDrawChart() scatter chart"] ``` ___ ### **Changes walkthrough** 📝
Relevant files
Enhancement
schema.vue
Schema UI toggle & formatting cleanup                                       
web/src/components/logstream/schema.vue
  • Added showStoreOriginalDataToggle computed property
  • Applied v-if="showStoreOriginalDataToggle" to toggle
  • Re-indented and reformatted tabs & icon tooltip blocks
  • Cleaned up watchers and trailing commas
    		• +88/-69 
    Formatting
    Index.vue
    Clean traces index code formatting                                             
    web/src/plugins/traces/Index.vue
  • Removed commented-out AST parser code
  • Broke long ternary expressions onto multiple lines
  • Reformatted query range assignment for readability
    		• +8/-14   
    Bug fix
    SearchResult.vue
    Ensure scatter chart redraw                                                           
    web/src/plugins/traces/SearchResult.vue
  • Imported onMounted and invoked reDrawChart() on mount
  • Removed v-show="searchObj.meta.showHistogram" guard
  • Ensured scatter chart always redraws after mount
    		• +11/-2   
    ___ >
    Need help?
  • Type /help how to ... in the comments thread for any questions about PR-Agent usage.
  • Check out the documentation for more information.
    • --- web/src/components/logstream/schema.vue | 159 +++++++++++++----------- web/src/plugins/traces/Index.vue | 22 ++-- web/src/plugins/traces/SearchResult.vue | 13 +- 3 files changed, 108 insertions(+), 86 deletions(-) diff --git a/web/src/components/logstream/schema.vue b/web/src/components/logstream/schema.vue index de9113be05..e5221c5f49 100644 --- a/web/src/components/logstream/schema.vue +++ b/web/src/components/logstream/schema.vue @@ -227,6 +227,7 @@ along with this program. If not, see . > .
    -
    - -
    - - + +
    + - Other fields show only the schema fields that existed before the stream was configured to use a user-defined schema. - - + + Other fields show only the schema fields that existed + before the stream was configured to use a user-defined + schema. + + +
    +
    + +
    + + + + + Add Field(s) +
    - -
    - - - - - Add Field(s) - -
    -
    @@ -561,7 +567,11 @@ along with this program. If not, see .
    [ - { + { value: "schemaFields", label: `User Defined Schema (${indexData.value.defined_schema_fields.length})`, disabled: !hasUserDefinedSchema.value, @@ -811,8 +822,7 @@ export default defineComponent({ label: `${computedSchemaFieldsName.value} (${indexData.value.schema.length})`, disabled: false, hide: false, - } - + }, ]); const mainTabs = computed(() => [ { @@ -826,15 +836,15 @@ export default defineComponent({ disabled: false, }, ]); - //here we are making the schema field name dynamic based on the user defined schema - //1. if there is UDS the it should be other fields + //here we are making the schema field name dynamic based on the user defined schema + //1. if there is UDS the it should be other fields //2. if there is no UDS then it should be all fields - const computedSchemaFieldsName = computed(()=>{ - if(!hasUserDefinedSchema.value){ - return 'All Fields' + const computedSchemaFieldsName = computed(() => { + if (!hasUserDefinedSchema.value) { + return "All Fields"; } - return 'Other Fields' - }) + return "Other Fields"; + }); const streamIndexType = [ { label: "Full text search", value: "fullTextSearchKey" }, @@ -857,13 +867,17 @@ export default defineComponent({ storeOriginalData.value = false; approxPartition.value = false; }); - //here we added a watcher to + + const showStoreOriginalDataToggle = computed(() => { + return modelValue.stream_type !== "traces"; + }); + //here we added a watcher to //1. if user defined schema is enabled then we need to show the schema fields tab and also need to make sure that it would be the active tab //2. if user defined schema is disabled then we need to show the all fields tab and also need to make sure that it would be the active tab watch(hasUserDefinedSchema, (newVal) => { - if(newVal){ + if (newVal) { activeTab.value = "schemaFields"; - }else{ + } else { activeTab.value = "allFields"; } }); @@ -1242,10 +1256,14 @@ export default defineComponent({ modifiedSettings, ) .then(async (res) => { - if(store.state.logs.logs.data.stream.selectedStream.includes(indexData.value.name)) { + if ( + store.state.logs.logs.data.stream.selectedStream.includes( + indexData.value.name, + ) + ) { store.dispatch("logs/setIsInitialized", false); } - + await getStream( indexData.value.name, indexData.value.stream_type, @@ -1686,6 +1704,7 @@ export default defineComponent({ redDaysList, deleteDates, IsdeleteBtnVisible, + showStoreOriginalDataToggle, }; }, created() { diff --git a/web/src/plugins/traces/Index.vue b/web/src/plugins/traces/Index.vue index 3a73cb3d09..7a669d08a1 100644 --- a/web/src/plugins/traces/Index.vue +++ b/web/src/plugins/traces/Index.vue @@ -528,9 +528,6 @@ function buildSearch() { "[INDEX_NAME]", searchObj.data.stream.selectedStream.value, ); - // const parsedSQL = parser.astify(req.query.sql); - // const unparsedSQL = parser.sqlify(parsedSQL); - // console.log(unparsedSQL); req.query.sql = b64EncodeUnicode(req.query.sql); @@ -774,7 +771,8 @@ async function extractFields() { ); searchObj.data.datetime.queryRangeRestrictionInHour = -1; if ( - (stream.settings.max_query_range > 0 || store.state.zoConfig.max_query_range > 0) && + (stream.settings.max_query_range > 0 || + store.state.zoConfig.max_query_range > 0) && (searchObj.data.datetime.queryRangeRestrictionInHour > stream.settings.max_query_range || stream.settings.max_query_range == 0 || @@ -782,7 +780,9 @@ async function extractFields() { searchObj.data.datetime.queryRangeRestrictionInHour != 0 ) { searchObj.data.datetime.queryRangeRestrictionInHour = - stream.settings.max_query_range > 0 ? stream.settings.max_query_range : store.state.zoConfig.max_query_range; + stream.settings.max_query_range > 0 + ? stream.settings.max_query_range + : store.state.zoConfig.max_query_range; searchObj.data.datetime.queryRangeRestrictionMsg = t( "search.queryRangeRestrictionMsg", { @@ -957,7 +957,7 @@ function generateHistogramData() { autosize: true, }; - if (searchObj.data.queryResults.hits) { + if (searchObj.data?.queryResults?.hits?.length) { searchObj.data.queryResults.hits.forEach( (bucket: { zo_sql_timestamp: string | number | Date; @@ -976,10 +976,7 @@ function generateHistogramData() { layout: layout, }; - if ( - searchObj.meta.showHistogram == true && - searchResultRef.value?.reDrawChart - ) { + if (searchResultRef.value?.reDrawChart) { searchResultRef.value.reDrawChart(); } } @@ -1036,10 +1033,7 @@ onActivated(() => { loadPageData(); } - if ( - searchObj.meta.showHistogram == true && - router.currentRoute.value.path.indexOf("/traces") > -1 - ) { + if (router.currentRoute.value.path.indexOf("/traces") > -1) { setTimeout(() => { if (searchResultRef.value) searchResultRef.value.reDrawChart(); }, 300); diff --git a/web/src/plugins/traces/SearchResult.vue b/web/src/plugins/traces/SearchResult.vue index 6f935891c5..9fe1f5ecbc 100644 --- a/web/src/plugins/traces/SearchResult.vue +++ b/web/src/plugins/traces/SearchResult.vue @@ -23,7 +23,6 @@ along with this program. If not, see . data-test="logs-search-result-bar-chart" id="traces_scatter_chart" :data="plotChart" - v-show="searchObj.meta.showHistogram" style="height: 150px" @updated:dataZoom="onChartUpdate" @click="onChartClick" @@ -59,7 +58,13 @@ along with this program. If not, see .