Коммит f00563b5 создал по автору Jiaan Louw's avatar Jiaan Louw
Просмотр файлов

Merge branch '392467-remove-the-default-date-range-limit-from-analytics-dashboards' into 'master' 

Remove the default date range limit from analytics dashboards

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



Merged-by: default avatarJiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Approved-by: default avatarElwyn Benson <ebenson@gitlab.com>
Approved-by: default avatarJiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Reviewed-by: default avatarJiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Co-authored-by: default avatarRobert Hunt <rhunt@gitlab.com>
владельцы fa0792bc a48a7958
Скрыть пробелы
Построчно Рядом
ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboard.vue
Просмотр файла @ f00563b5
......@@ -154,6 +154,7 @@ export default {
:available-visualizations="availableVisualizations"
:default-filters="defaultFilters"
:is-saving="isSaving"
:date-range-limit="0"
show-date-range-filter
sync-url-filters
@save="saveDashboard"
......
ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue
Просмотр файла @ f00563b5
......@@ -39,6 +39,11 @@ export default {
type: Array,
required: true,
},
dateRangeLimit: {
type: Number,
required: false,
default: 0,
},
showDateRangeFilter: {
type: Boolean,
required: false,
......@@ -289,6 +294,7 @@ export default {
:default-option="filters.dateRangeOption"
:start-date="filters.startDate"
:end-date="filters.endDate"
:date-range-limit="dateRangeLimit"
@change="setDateRangeFilter"
/>
</section>
......
ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/filters/constants.js
Просмотр файла @ f00563b5
import { __, sprintf } from '~/locale';
import { __, n__, sprintf } from '~/locale';
import { getDateInPast } from '~/lib/utils/datetime_utility';
export const MAX_DATE_RANGE = 31;
export const TODAY = new Date();
export const CUSTOM_DATE_RANGE_KEY = 'custom';
......@@ -45,12 +43,9 @@ export const DATE_RANGE_OPTIONS = [
},
];
export const DATE_RANGE_FILTER_I18N = {
tooltip: sprintf(__('Date range limited to %{number} days'), {
number: MAX_DATE_RANGE,
}),
to: __('To'),
from: __('From'),
};
export const I18N_DATE_RANGE_FILTER_TOOLTIP = (dateRangeLimit = 0) =>
n__('Date range limited to %d day', 'Date range limited to %d days', dateRangeLimit);
export const I18N_DATE_RANGE_FILTER_TO = __('To');
export const I18N_DATE_RANGE_FILTER_FROM = __('From');
export const DEFAULT_SELECTED_OPTION_INDEX = 1;
ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/filters/date_range_filter.vue
Просмотр файла @ f00563b5
......@@ -3,10 +3,11 @@ import { GlDaterangePicker, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { dateRangeOptionToFilter, getDateRangeOption } from '../utils';
import {
TODAY,
MAX_DATE_RANGE,
DATE_RANGE_OPTIONS,
DEFAULT_SELECTED_OPTION_INDEX,
DATE_RANGE_FILTER_I18N,
I18N_DATE_RANGE_FILTER_TOOLTIP,
I18N_DATE_RANGE_FILTER_TO,
I18N_DATE_RANGE_FILTER_FROM,
} from './constants';
export default {
......@@ -32,6 +33,11 @@ export default {
required: false,
default: null,
},
dateRangeLimit: {
type: Number,
required: false,
default: 0,
},
},
data() {
return {
......@@ -54,6 +60,13 @@ export default {
);
},
},
dateRangeTooltip() {
if (this.dateRangeLimit) {
return I18N_DATE_RANGE_FILTER_TOOLTIP(this.dateRangeLimit);
}
return null;
},
},
methods: {
selectOption(option) {
......@@ -68,9 +81,9 @@ export default {
this.showDateRangePicker = showDateRangePicker;
},
},
DATE_RANGE_FILTER_I18N,
I18N_DATE_RANGE_FILTER_TO,
I18N_DATE_RANGE_FILTER_FROM,
DATE_RANGE_OPTIONS,
MAX_DATE_RANGE,
TODAY,
};
</script>
......@@ -94,10 +107,10 @@ export default {
:default-start-date="dateRange.startDate"
:default-end-date="dateRange.endDate"
:default-max-date="$options.TODAY"
:max-date-range="$options.MAX_DATE_RANGE"
:to-label="$options.DATE_RANGE_FILTER_I18N.to"
:from-label="$options.DATE_RANGE_FILTER_I18N.from"
:tooltip="$options.DATE_RANGE_FILTER_I18N.tooltip"
:max-date-range="dateRangeLimit"
:to-label="$options.I18N_DATE_RANGE_FILTER_TO"
:from-label="$options.I18N_DATE_RANGE_FILTER_FROM"
:tooltip="dateRangeTooltip"
same-day-selection
/>
</div>
......
ee/spec/frontend/analytics/analytics_dashboards/components/analytics_dashboard_spec.js
Просмотр файла @ f00563b5
......@@ -82,6 +82,7 @@ describe('AnalyticsDashboard', () => {
expect(findDashboard().props()).toMatchObject({
initialDashboard: dashboard,
defaultFilters: buildDefaultDashboardFilters(''),
dateRangeLimit: 0,
showDateRangeFilter: true,
syncUrlFilters: true,
});
......
ee/spec/frontend/vue_shared/components/customizable_dashboard/customizable_dashboard_spec.js
Просмотр файла @ f00563b5
......@@ -265,35 +265,57 @@ describe('CustomizableDashboard', () => {
describe('when the date range filter is enabled and configured', () => {
const defaultFilters = buildDefaultDashboardFilters('');
beforeEach(() => {
loadCSSFile.mockResolvedValue();
describe('by default', () => {
beforeEach(() => {
loadCSSFile.mockResolvedValue();
createWrapper({ showDateRangeFilter: true, syncUrlFilters: true, defaultFilters });
});
createWrapper({ showDateRangeFilter: true, syncUrlFilters: true, defaultFilters });
});
it('shows the date range filter and passes the default options and filters', () => {
expect(findDateRangeFilter().props()).toMatchObject({
startDate: defaultFilters.startDate,
endDate: defaultFilters.endDate,
defaultOption: defaultFilters.dateRangeOption,
it('shows the date range filter and passes the default options and filters', () => {
expect(findDateRangeFilter().props()).toMatchObject({
startDate: defaultFilters.startDate,
endDate: defaultFilters.endDate,
defaultOption: defaultFilters.dateRangeOption,
dateRangeLimit: 0,
});
});
});
it('syncronizes the filters with the URL', () => {
expect(findUrlSync().props()).toMatchObject({
historyUpdateMethod: HISTORY_REPLACE_UPDATE_METHOD,
query: filtersToQueryParams(defaultFilters),
it('synchronizes the filters with the URL', () => {
expect(findUrlSync().props()).toMatchObject({
historyUpdateMethod: HISTORY_REPLACE_UPDATE_METHOD,
query: filtersToQueryParams(defaultFilters),
});
});
});
it('sets the panel filters to the default date range', () => {
expect(findPanels().at(0).props().filters).toStrictEqual(defaultFilters);
it('sets the panel filters to the default date range', () => {
expect(findPanels().at(0).props().filters).toStrictEqual(defaultFilters);
});
it('updates the panel filters when the date range is changed', async () => {
await findDateRangeFilter().vm.$emit('change', mockDateRangeFilterChangePayload);
expect(findPanels().at(0).props().filters).toStrictEqual(mockDateRangeFilterChangePayload);
});
});
it('updates the panel filters when the date range is changed', async () => {
await findDateRangeFilter().vm.$emit('change', mockDateRangeFilterChangePayload);
describe.each([0, 12, 31])('when given a date range limit of %d', (dateRangeLimit) => {
beforeEach(() => {
loadCSSFile.mockResolvedValue();
createWrapper({
showDateRangeFilter: true,
syncUrlFilters: true,
defaultFilters,
dateRangeLimit,
});
});
expect(findPanels().at(0).props().filters).toStrictEqual(mockDateRangeFilterChangePayload);
it('passes the date range limit to the date range filter', async () => {
expect(findDateRangeFilter().props()).toMatchObject({
dateRangeLimit,
});
});
});
});
});
ee/spec/frontend/vue_shared/components/customizable_dashboard/filters/date_range_filter_spec.js
Просмотр файла @ f00563b5
......@@ -5,8 +5,9 @@ import {
DATE_RANGE_OPTIONS,
DEFAULT_SELECTED_OPTION_INDEX,
TODAY,
MAX_DATE_RANGE,
DATE_RANGE_FILTER_I18N,
I18N_DATE_RANGE_FILTER_TOOLTIP,
I18N_DATE_RANGE_FILTER_TO,
I18N_DATE_RANGE_FILTER_FROM,
} from 'ee/vue_shared/components/customizable_dashboard/filters/constants';
import { dateRangeOptionToFilter } from 'ee/vue_shared/components/customizable_dashboard/utils';
......@@ -71,35 +72,54 @@ describe('DateRangeFilter', () => {
});
describe('date range picker', () => {
const { startDate, endDate } = DATE_RANGE_OPTIONS[DEFAULT_SELECTED_OPTION_INDEX];
describe('by default', () => {
const { startDate, endDate } = DATE_RANGE_OPTIONS[DEFAULT_SELECTED_OPTION_INDEX];
beforeEach(() => {
createWrapper({ startDate, endDate });
});
beforeEach(() => {
createWrapper({ startDate, endDate });
});
it('does not emit a new date range when the option shows the date range picker', async () => {
await findDropdownItems().at(customRangeOptionIndex).vm.$emit('click');
it('does not emit a new date range when the option shows the date range picker', async () => {
await findDropdownItems().at(customRangeOptionIndex).vm.$emit('click');
expect(wrapper.emitted('change')).toBeUndefined();
});
expect(wrapper.emitted('change')).toBeUndefined();
it('shows the date range picker with the provided date range when the option enables it', async () => {
expect(findDateRangePicker().exists()).toBe(false);
await findDropdownItems().at(customRangeOptionIndex).vm.$emit('click');
expect(findDateRangePicker().props()).toMatchObject({
toLabel: I18N_DATE_RANGE_FILTER_TO,
fromLabel: I18N_DATE_RANGE_FILTER_FROM,
tooltip: null,
defaultMaxDate: TODAY,
maxDateRange: 0,
value: {
startDate,
endDate,
},
defaultStartDate: startDate,
defaultEndDate: endDate,
});
});
});
it('shows the date range picker with the provided date range when the option enables it', async () => {
expect(findDateRangePicker().exists()).toBe(false);
await findDropdownItems().at(customRangeOptionIndex).vm.$emit('click');
expect(findDateRangePicker().props()).toMatchObject({
toLabel: DATE_RANGE_FILTER_I18N.to,
fromLabel: DATE_RANGE_FILTER_I18N.from,
tooltip: DATE_RANGE_FILTER_I18N.tooltip,
defaultMaxDate: TODAY,
maxDateRange: MAX_DATE_RANGE,
value: {
startDate,
endDate,
},
defaultStartDate: startDate,
defaultEndDate: endDate,
describe.each([0, 12, 31])('when given a date range limit of %d', (dateRangeLimit) => {
beforeEach(() => {
createWrapper({ dateRangeLimit });
});
it('shows the date range picker with date range limit applied', async () => {
expect(findDateRangePicker().exists()).toBe(false);
await findDropdownItems().at(customRangeOptionIndex).vm.$emit('click');
expect(findDateRangePicker().props()).toMatchObject({
tooltip: dateRangeLimit ? I18N_DATE_RANGE_FILTER_TOOLTIP(dateRangeLimit) : null,
maxDateRange: dateRangeLimit,
});
});
});
});
......
locale/gitlab.pot
Просмотр файла @ f00563b5
......@@ -13421,6 +13421,11 @@ msgstr ""
msgid "Date range"
msgstr ""
 
msgid "Date range limited to %d day"
msgid_plural "Date range limited to %d days"
msgstr[0] ""
msgstr[1] ""
msgid "Date range limited to %{number} days"
msgstr ""
 
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать