Merge branch 'drosse/tracing-remove-scatter-chart-fixed-range' into 'master'

Tracing - Remove fixed boundaries from scatter chart

Closes gitlab-org/opstrace/opstrace#2519

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/139572



Merged-by: Phil Hughes <me@iamphill.com>
Approved-by: Alex Pennells <apennells@gitlab.com>
Approved-by: Phil Hughes <me@iamphill.com>
Co-authored-by: Daniele Rossetti <drossetti@gitlab.com>

ee/app/assets/javascripts/tracing/list/tracing_list.vue

@@ -8,7 +8,6 @@ import UrlSync from '~/vue_shared/components/url_sync.vue';
 import { contentTop, isMetaClick } from '~/lib/utils/common_utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { DEFAULT_SORTING_OPTION } from '~/observability/constants';
-import { periodFilterToDate } from '../trace_utils';
 import {
   queryToFilterObj,
   filterObjToQuery,
@@ -47,8 +46,6 @@ export default {
       traces: [],
       filters: queryToFilterObj(filterQuery),
       nextPageToken: null,
-      chartRangeMin: null,
-      chartRangeMax: null,
       highlightedTraceId: null,
       sortBy: sortBy || DEFAULT_SORTING_OPTION,
     };
@@ -77,7 +74,7 @@ export default {
     this.fetchTraces();
   },
   methods: {
-    async fetchTraces({ skipUpdatingChartRange = false } = {}) {
+    async fetchTraces() {
       this.loading = true;
 
       try {
@@ -90,12 +87,6 @@ export default {
           pageSize: PAGE_SIZE,
           sortBy: this.sortBy,
         });
-        if (!skipUpdatingChartRange) {
-          const { min, max } = periodFilterToDate(this.filters);
-          this.chartRangeMax = max;
-          this.chartRangeMin = min;
-        }
-
         this.traces = [...this.traces, ...traces];
         if (nextPageToken) {
           this.nextPageToken = nextPageToken;
@@ -169,8 +160,6 @@ export default {
       />
       <scatter-chart
         :height="$options.CHART_HEIGHT"
-        :range-min="chartRangeMin"
-        :range-max="chartRangeMax"
         :traces="traces"
         @chart-item-selected="chartItemSelected"
         @chart-item-over="debouncedChartItemOver"

ee/spec/frontend/tracing/list/tracing_list_spec.js

@@ -3,7 +3,6 @@ import { nextTick } from 'vue';
 import { filterObjToFilterToken } from 'ee/tracing/list/filter_bar/filters';
 import FilteredSearch from 'ee/tracing/list/filter_bar/tracing_filtered_search.vue';
 import ScatterChart from 'ee/tracing/list/tracing_scatter_chart.vue';
-import * as traceUtils from 'ee/tracing/trace_utils';
 import TracingTableList from 'ee/tracing/list/tracing_table.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import TracingList from 'ee/tracing/list/tracing_list.vue';
@@ -491,15 +490,7 @@ describe('TracingList', () => {
   });
 
   describe('scatter chart', () => {
-    const mockPeriodFilter = (filter) =>
-      jest.spyOn(traceUtils, 'periodFilterToDate').mockReturnValue(filter);
-
     beforeEach(async () => {
-      mockPeriodFilter({
-        min: new Date('2023-10-09 12:30:00'),
-        max: new Date('2023-10-09 15:30:00'),
-      });
-
       await mountComponent();
 
       wrapper.vm.$refs.tableList.$el.querySelector = jest
@@ -513,34 +504,6 @@ describe('TracingList', () => {
       const chart = findScatterChart();
       expect(chart.exists()).toBe(true);
       expect(chart.props('traces')).toEqual(mockResponse.traces);
-      expect(chart.props('rangeMin')).toEqual(new Date('2023-10-09 12:30:00'));
-      expect(chart.props('rangeMax')).toEqual(new Date('2023-10-09 15:30:00'));
-    });
-
-    it('updates the chart boundaries when changing the filters', async () => {
-      mockPeriodFilter({
-        min: new Date('2023-01-01 00:00:00'),
-        max: new Date('2023-01-02 00:00:00'),
-      });
-
-      await setFilters({});
-
-      const chart = findScatterChart();
-      expect(chart.props('rangeMin')).toEqual(new Date('2023-01-01 00:00:00'));
-      expect(chart.props('rangeMax')).toEqual(new Date('2023-01-02 00:00:00'));
-    });
-
-    it('does not updates the chart boundaries when scrolling down', async () => {
-      mockPeriodFilter({
-        min: new Date('2023-01-01 00:00:00'),
-        max: new Date('2023-01-02 00:00:00'),
-      });
-
-      await bottomReached();
-
-      const chart = findScatterChart();
-      expect(chart.props('rangeMin')).toEqual(new Date('2023-10-09 12:30:00'));
-      expect(chart.props('rangeMax')).toEqual(new Date('2023-10-09 15:30:00'));
     });
 
     it('goes to the trace details page on item selection', () => {