Merge branch '469488-default-cube-analytics-date-range' into 'master'

Default cube analytics queries to the last 7 days

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



Merged-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Approved-by: Lorena Ciutacu <lciutacu@gitlab.com>
Approved-by: Robert Hunt <rhunt@gitlab.com>
Approved-by: Olena Horal-Koretska <ohoralkoretska@gitlab.com>
Reviewed-by: Robert Hunt <rhunt@gitlab.com>
Reviewed-by: Lorena Ciutacu <lciutacu@gitlab.com>
Co-authored-by: Jiaan Louw <jlouw@gitlab.com>

ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualization_designer/analytics_visualization_preview.vue

 <script>
-import { GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { safeDump } from 'js-yaml';
 import { createAlert } from '~/alert';
 import { s__, sprintf } from '~/locale';
@@ -21,8 +21,12 @@ export default {
     GlButton,
     GlButtonGroup,
     GlLoadingIcon,
+    GlIcon,
     AnalyticsDashboardPanel,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     selectedVisualizationType: {
       type: String,
@@ -98,17 +102,29 @@ export default {
       <div
         class="gl-m-5 gl-gap-5 gl-display-flex gl-flex-wrap-reverse gl-justify-content-space-between gl-align-items-center"
       >
-        <gl-button-group>
-          <gl-button
-            v-for="buttonDisplayType in $options.PANEL_DISPLAY_TYPE_ITEMS"
-            :key="buttonDisplayType.type"
-            :selected="displayType === buttonDisplayType.type"
-            :icon="buttonDisplayType.icon"
-            :data-testid="`select-${buttonDisplayType.type}-button`"
-            @click="$emit('selectedDisplayType', buttonDisplayType.type)"
-            >{{ buttonDisplayType.title }}</gl-button
-          >
-        </gl-button-group>
+        <div class="gl-display-flex gl-gap-3">
+          <gl-button-group>
+            <gl-button
+              v-for="buttonDisplayType in $options.PANEL_DISPLAY_TYPE_ITEMS"
+              :key="buttonDisplayType.type"
+              :selected="displayType === buttonDisplayType.type"
+              :icon="buttonDisplayType.icon"
+              :data-testid="`select-${buttonDisplayType.type}-button`"
+              @click="$emit('selectedDisplayType', buttonDisplayType.type)"
+              >{{ buttonDisplayType.title }}</gl-button
+            >
+          </gl-button-group>
+          <gl-icon
+            v-gl-tooltip
+            :title="
+              s__(
+                'Analytics|The visualization preview displays only the last 7 days. Dashboard visualizations can display the entire date range.',
+              )
+            "
+            name="information-o"
+            class="gl-align-self-end gl-mb-3 gl-text-gray-500 gl-min-w-5"
+          />
+        </div>
         <ai-cube-query-feedback
           v-if="aiPromptCorrelationId"
           :correlation-id="aiPromptCorrelationId"

ee/app/assets/javascripts/analytics/analytics_dashboards/data_sources/cube_analytics.js

@@ -13,6 +13,10 @@ import {
   VISUALIZATION_TYPE_COLUMN_CHART,
   VISUALIZATION_TYPE_SINGLE_STAT,
 } from 'ee/analytics/analytics_dashboards/constants';
+import {
+  TODAY,
+  SEVEN_DAYS_AGO,
+} from 'ee/vue_shared/components/customizable_dashboard/filters/constants';
 
 // This can be any value because the cube proxy adds the real API token.
 const CUBE_API_TOKEN = '1';
@@ -106,21 +110,17 @@ const getDateRangeDimension = (query) => {
   return DATE_RANGE_FILTER_DIMENSIONS[tableKey] ?? getDynamicSchemaDateRangeDimension(query);
 };
 
-const buildDateRangeFilter = (query, queryOverrides, { startDate, endDate }) => {
-  if (!startDate && !endDate) return {};
-
-  return {
-    filters: [
-      ...(query.filters ?? []),
-      ...(queryOverrides.filters ?? []),
-      {
-        member: getDateRangeDimension(query),
-        operator: 'inDateRange',
-        values: [pikadayToString(startDate), pikadayToString(endDate)],
-      },
-    ],
-  };
-};
+const buildDateRangeFilter = (query, queryOverrides, { startDate, endDate }) => ({
+  filters: [
+    ...(query.filters ?? []),
+    ...(queryOverrides.filters ?? []),
+    {
+      member: getDateRangeDimension(query),
+      operator: 'inDateRange',
+      values: [pikadayToString(startDate ?? SEVEN_DAYS_AGO), pikadayToString(endDate ?? TODAY)],
+    },
+  ],
+});
 
 const buildAnonUsersFilter = (query, queryOverrides, { filterAnonUsers }) => {
   if (!filterAnonUsers) return {};

ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/filters/constants.js

@@ -2,6 +2,7 @@ import { __, sprintf } from '~/locale';
 import { getCurrentUtcDate, getDateInPast } from '~/lib/utils/datetime_utility';
 
 export const TODAY = getCurrentUtcDate();
+export const SEVEN_DAYS_AGO = getDateInPast(TODAY, 7);
 
 export const CUSTOM_DATE_RANGE_KEY = 'custom';
 
@@ -27,7 +28,7 @@ export const DATE_RANGE_OPTIONS = [
   {
     key: 'last_7_days',
     text: sprintf(__('Last %{days} days'), { days: 7 }),
-    startDate: getDateInPast(TODAY, 7),
+    startDate: SEVEN_DAYS_AGO,
     endDate: TODAY,
   },
   {

ee/spec/frontend/analytics/analytics_dashboards/components/data_sources/cube_analytics_spec.js

 import { CubeApi, HttpTransport, __setMockLoad } from '@cubejs-client/core';
 import fetch from 'ee/analytics/analytics_dashboards/data_sources/cube_analytics';
+import {
+  TODAY,
+  SEVEN_DAYS_AGO,
+} from 'ee/vue_shared/components/customizable_dashboard/filters/constants';
 import { pikadayToString } from '~/lib/utils/datetime_utility';
 import {
   mockResultSet,
@@ -51,8 +55,22 @@ describe('Cube Analytics Data Source', () => {
 
     itSetsUpCube();
 
-    it('loads the query with the query override', () => {
-      expect(mockLoad).toHaveBeenCalledWith(queryOverrides, cubeJsOptions);
+    it('loads the query with the query override and default filters', () => {
+      expect(mockLoad).toHaveBeenCalledWith(expect.objectContaining(queryOverrides), cubeJsOptions);
+    });
+
+    it('loads the query with the default 7 days date range filters', () => {
+      const defaultFilters = {
+        filters: [
+          {
+            member: 'TrackedEvents.derivedTstamp',
+            operator: 'inDateRange',
+            values: [pikadayToString(SEVEN_DAYS_AGO), pikadayToString(TODAY)],
+          },
+        ],
+      };
+
+      expect(mockLoad).toHaveBeenCalledWith(expect.objectContaining(defaultFilters), cubeJsOptions);
     });
   });
 
@@ -294,7 +312,7 @@ describe('Cube Analytics Data Source', () => {
 
           expect(mockLoad).toHaveBeenCalledWith(
             {
-              filters: existingFilters,
+              filters: expect.arrayContaining(existingFilters),
               measures: [queryMeasurement],
               ...expectedSegments,
             },

ee/spec/frontend/analytics/analytics_dashboards/components/visualization_designer/analytics_visualization_preview_spec.js

+import { GlIcon } from '@gitlab/ui';
 import { safeDump } from 'js-yaml';
 import AnalyticsVisualizationPreview from 'ee/analytics/analytics_dashboards/components/visualization_designer/analytics_visualization_preview.vue';
 import AiCubeQueryFeedback from 'ee/analytics/analytics_dashboards/components/visualization_designer/ai_cube_query_feedback.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 import {
   PANEL_DISPLAY_TYPES,
@@ -20,6 +22,7 @@ describe('AnalyticsVisualizationPreview', () => {
   const findVisualizationButton = () => wrapper.findByTestId('select-visualization-button');
   const findCodeButton = () => wrapper.findByTestId('select-code-button');
   const findAiCubeQueryFeedback = () => wrapper.findComponent(AiCubeQueryFeedback);
+  const findHelpIcon = () => wrapper.findComponent(GlIcon);
 
   const selectDisplayType = jest.fn();
 
@@ -27,6 +30,9 @@ describe('AnalyticsVisualizationPreview', () => {
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMountExtended(AnalyticsVisualizationPreview, {
+      directives: {
+        GlTooltip: createMockDirective('gl-tooltip'),
+      },
       propsData: {
         selectedVisualizationType: '',
         displayType: '',
@@ -48,6 +54,10 @@ describe('AnalyticsVisualizationPreview', () => {
     it('should render measurement headline', () => {
       expect(wrapper.findByTestId('measurement-hl').text()).toBe('Start by choosing a metric');
     });
+
+    it('should not render the help icon', () => {
+      expect(findHelpIcon().exists()).toBe(false);
+    });
   });
 
   describe('when loading', () => {
@@ -84,6 +94,17 @@ describe('AnalyticsVisualizationPreview', () => {
         findCodeButton().vm.$emit('click');
         expect(wrapper.emitted('selectedDisplayType')).toEqual([[PANEL_DISPLAY_TYPES.CODE]]);
       });
+
+      it('should show an icon with a tooltip explaining the preview date range', () => {
+        const helpIcon = findHelpIcon();
+        const tooltip = getBinding(helpIcon.element, 'gl-tooltip');
+
+        expect(helpIcon.props('name')).toBe('information-o');
+        expect(helpIcon.attributes('title')).toBe(
+          'The visualization preview displays only the last 7 days. Dashboard visualizations can display the entire date range.',
+        );
+        expect(tooltip).toBeDefined();
+      });
     });
 
     describe('when there is an AI prompt correlation id', () => {

locale/gitlab.pot

@@ -6151,6 +6151,9 @@ msgstr ""
 msgid "Analytics|Tables"
 msgstr ""
+msgid "Analytics|The visualization preview displays only the last 7 days. Dashboard visualizations can display the entire date range."
+msgstr ""
+
 msgid "Analytics|There was a problem generating your query. Please try again."
 msgstr ""