Commit 982b6dd4 authored by Miguel Rincon's avatar Miguel Rincon

Enable the Add metric button for CE users

The Add Metric button should become available for all users in 12.10.
This change enables this functionality.

- Removes conditional IS_EE to display "Add metrics" button
- Move some dashboard specs from EE to CE
parent 93d29d34
......@@ -18,6 +18,7 @@ import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
import { s__ } from '~/locale';
import createFlash from '~/flash';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
import { mergeUrlParams, redirectTo, updateHistory } from '~/lib/utils/url_utility';
import invalidUrl from '~/lib/utils/invalid_url';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -46,6 +47,7 @@ export default {
GlDropdownDivider,
GlSearchBoxByType,
GlModal,
CustomMetricsFormFields,
DateTimePicker,
GraphGroup,
......@@ -204,9 +206,6 @@ export default {
};
},
computed: {
canAddMetrics() {
return this.customMetricsAvailable && this.customMetricsPath.length;
},
...mapState('monitoringDashboard', [
'dashboard',
'emptyState',
......@@ -228,8 +227,7 @@ export default {
},
addingMetricsAvailable() {
return (
IS_EE &&
this.canAddMetrics &&
this.customMetricsAvailable &&
!this.showEmptyState &&
this.firstDashboard === this.selectedDashboard
);
......
---
title: Enable the Add metric button for CE users
merge_request: 29769
author:
type: fixed
<script>
import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
import CeDashboard from '~/monitoring/components/dashboard.vue';
import AlertWidget from './alert_widget.vue';
export default {
components: {
AlertWidget,
CustomMetricsFormFields,
},
extends: CeDashboard,
data() {
......
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { GlModal, GlDeprecatedButton } from '@gitlab/ui';
import Dashboard from 'ee/monitoring/components/dashboard.vue';
import { mockApiEndpoint, propsData } from 'jest/monitoring/mock_data';
import { metricsDashboardResponse } from 'jest/monitoring/fixture_data';
import { setupStoreWithData } from 'jest/monitoring/store_utils';
import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
import Tracking from '~/tracking';
import { createStore } from '~/monitoring/stores';
import axios from '~/lib/utils/axios_utils';
describe('Dashboard', () => {
let mock;
let store;
let wrapper;
const findAddMetricButton = () => wrapper.vm.$refs.addMetricBtn;
const createComponent = (props = {}) => {
wrapper = shallowMount(Dashboard, {
propsData: { ...propsData, ...props },
stubs: {
GlDeprecatedButton,
},
store,
});
};
beforeEach(() => {
setFixtures(`
<div class="prometheus-graphs"></div>
<div class="layout-page"></div>
`);
window.gon = { ...window.gon, ee: true };
store = createStore();
mock = new MockAdapter(axios);
mock.onGet(mockApiEndpoint).reply(200, metricsDashboardResponse);
});
afterEach(() => {
mock.restore();
});
describe('add custom metrics', () => {
describe('when not available', () => {
beforeEach(() => {
createComponent({
hasMetrics: true,
customMetricsPath: '/endpoint',
});
});
it('does not render add button on the dashboard', () => {
expect(findAddMetricButton()).toBeUndefined();
});
});
describe('when available', () => {
let origPage;
beforeEach(done => {
jest.spyOn(Tracking, 'event').mockReturnValue();
createComponent({
hasMetrics: true,
customMetricsPath: '/endpoint',
customMetricsAvailable: true,
});
setupStoreWithData(wrapper.vm.$store);
origPage = document.body.dataset.page;
document.body.dataset.page = 'projects:environments:metrics';
wrapper.vm.$nextTick(done);
});
afterEach(() => {
document.body.dataset.page = origPage;
});
it('renders add button on the dashboard', () => {
expect(findAddMetricButton()).toBeDefined();
});
it('uses modal for custom metrics form', () => {
expect(wrapper.find(GlModal).exists()).toBe(true);
expect(wrapper.find(GlModal).attributes().modalid).toBe('add-metric');
});
it('adding new metric is tracked', done => {
const submitButton = wrapper.vm.$refs.submitCustomMetricsFormBtn;
wrapper.setData({
formIsValid: true,
});
wrapper.vm.$nextTick(() => {
submitButton.$el.click();
wrapper.vm.$nextTick(() => {
expect(Tracking.event).toHaveBeenCalledWith(
document.body.dataset.page,
'click_button',
{
label: 'add_new_metric',
property: 'modal',
value: undefined,
},
);
done();
});
});
});
it('renders custom metrics form fields', () => {
expect(wrapper.find(CustomMetricsFormFields).exists()).toBe(true);
});
});
});
});
import { shallowMount, mount } from '@vue/test-utils';
import { GlDropdownItem, GlDeprecatedButton } from '@gitlab/ui';
import Tracking from '~/tracking';
import { GlModal, GlDropdownItem, GlDeprecatedButton } from '@gitlab/ui';
import VueDraggable from 'vuedraggable';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
......@@ -8,6 +9,7 @@ import { metricStates } from '~/monitoring/constants';
import Dashboard from '~/monitoring/components/dashboard.vue';
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
......@@ -546,4 +548,74 @@ describe('Dashboard', () => {
});
});
});
describe('add custom metrics', () => {
const findAddMetricButton = () => wrapper.vm.$refs.addMetricBtn;
describe('when not available', () => {
beforeEach(() => {
createShallowWrapper({
hasMetrics: true,
customMetricsPath: '/endpoint',
});
});
it('does not render add button on the dashboard', () => {
expect(findAddMetricButton()).toBeUndefined();
});
});
describe('when available', () => {
let origPage;
beforeEach(done => {
jest.spyOn(Tracking, 'event').mockReturnValue();
createShallowWrapper({
hasMetrics: true,
customMetricsPath: '/endpoint',
customMetricsAvailable: true,
});
setupStoreWithData(wrapper.vm.$store);
origPage = document.body.dataset.page;
document.body.dataset.page = 'projects:environments:metrics';
wrapper.vm.$nextTick(done);
});
afterEach(() => {
document.body.dataset.page = origPage;
});
it('renders add button on the dashboard', () => {
expect(findAddMetricButton()).toBeDefined();
});
it('uses modal for custom metrics form', () => {
expect(wrapper.find(GlModal).exists()).toBe(true);
expect(wrapper.find(GlModal).attributes().modalid).toBe('add-metric');
});
it('adding new metric is tracked', done => {
const submitButton = wrapper.vm.$refs.submitCustomMetricsFormBtn;
wrapper.setData({
formIsValid: true,
});
wrapper.vm.$nextTick(() => {
submitButton.$el.click();
wrapper.vm.$nextTick(() => {
expect(Tracking.event).toHaveBeenCalledWith(
document.body.dataset.page,
'click_button',
{
label: 'add_new_metric',
property: 'modal',
value: undefined,
},
);
done();
});
});
});
it('renders custom metrics form fields', () => {
expect(wrapper.find(CustomMetricsFormFields).exists()).toBe(true);
});
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment