Skip to content

G
gitlab-ce
Commit 6bf4543e authored by Andrei Stoicescu's avatar Andrei Stoicescu
Browse files
Options

Add actions menu to monitoring dashboard header 

 - add menu with "Create new" and "Duplicate dashboard" items
 - add tests
parent d32086eb
Show whitespace changes
Inline Side-by-side
Showing with 661 additions and 210 deletions
app/assets/javascripts/monitoring/components/create_dashboard_modal.vue 0 → 100644
View file @ 6bf4543e
<script>
import { GlButton, GlModal, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import { isSafeURL } from '~/lib/utils/url_utility';
export default {
components: { GlButton, GlModal, GlSprintf },
props: {
modalId: {
type: String,
required: true,
},
projectPath: {
type: String,
required: true,
validator: isSafeURL,
},
addDashboardDocumentationPath: {
type: String,
required: true,
},
},
methods: {
cancelHandler() {
this.$refs.modal.hide();
},
},
i18n: {
titleText: s__('Metrics|Create your dashboard configuration file'),
mainText: s__(
'Metrics|To create a new dashboard, add a new YAML file to %{codeStart}.gitlab/dashboards%{codeEnd} at the root of this project.',
),
},
};
</script>
<template>
<gl-modal ref="modal" :modal-id="modalId" :title="$options.i18n.titleText">
<p>
<gl-sprintf :message="$options.i18n.mainText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<template #modal-footer>
<gl-button category="secondary" @click="cancelHandler">{{ s__('Metrics|Cancel') }}</gl-button>
<gl-button
category="secondary"
variant="info"
target="_blank"
:href="addDashboardDocumentationPath"
data-testid="create-dashboard-modal-docs-button"
>
{{ s__('Metrics|View documentation') }}
</gl-button>
<gl-button
variant="success"
data-testid="create-dashboard-modal-repo-button"
:href="projectPath"
>
{{ s__('Metrics|Open repository') }}
</gl-button>
</template>
</gl-modal>
</template>
app/assets/javascripts/monitoring/components/dashboard.vue
View file @ 6bf4543e
......@@ -72,6 +72,10 @@ export default {
type: String,
required: true,
},
addDashboardDocumentationPath: {
type: String,
required: true,
},
settingsPath: {
type: String,
required: true,
......@@ -395,6 +399,7 @@ export default {
v-if="showHeader"
ref="prometheusGraphsHeader"
class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
:add-dashboard-documentation-path="addDashboardDocumentationPath"
:default-branch="defaultBranch"
:rearrange-panels-available="rearrangePanelsAvailable"
:custom-metrics-available="customMetricsAvailable"
......
app/assets/javascripts/monitoring/components/dashboard_header.vue
View file @ 6bf4543e
......@@ -8,6 +8,9 @@ import {
GlDropdownItem,
GlDropdownHeader,
GlDropdownDivider,
GlNewDropdown,
GlNewDropdownDivider,
GlNewDropdownItem,
GlModal,
GlLoadingIcon,
GlSearchBoxByType,
......@@ -23,6 +26,8 @@ import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_p
import DashboardsDropdown from './dashboards_dropdown.vue';
import RefreshButton from './refresh_button.vue';
import CreateDashboardModal from './create_dashboard_modal.vue';
import DuplicateDashboardModal from './duplicate_dashboard_modal.vue';
import TrackEventDirective from '~/vue_shared/directives/track_event';
import { getAddMetricTrackingOptions, timeRangeToUrl } from '../utils';
......@@ -39,6 +44,9 @@ export default {
GlDropdownItem,
GlDropdownHeader,
GlDropdownDivider,
GlNewDropdown,
GlNewDropdownDivider,
GlNewDropdownItem,
GlSearchBoxByType,
GlModal,
CustomMetricsFormFields,
......@@ -46,6 +54,8 @@ export default {
DateTimePicker,
DashboardsDropdown,
RefreshButton,
DuplicateDashboardModal,
CreateDashboardModal,
},
directives: {
GlModal: GlModalDirective,
......@@ -95,6 +105,10 @@ export default {
type: Object,
required: true,
},
addDashboardDocumentationPath: {
type: String,
required: true,
},
},
data() {
return {
......@@ -108,8 +122,12 @@ export default {
'isUpdatingStarredValue',
'showEmptyState',
'dashboardTimezone',
'projectPath',
]),
...mapGetters('monitoringDashboard', ['selectedDashboard', 'filteredEnvironments']),
isSystemDashboard() {
return this.selectedDashboard?.system_dashboard;
},
shouldShowEnvironmentsDropdownNoMatchedMsg() {
return !this.environmentsLoading && this.filteredEnvironments.length === 0;
},
......@@ -129,6 +147,9 @@ export default {
displayUtc() {
return this.dashboardTimezone === timezones.UTC;
},
shouldShowActionsMenu() {
return Boolean(this.projectPath);
},
},
methods: {
...mapActions('monitoringDashboard', ['filterEnvironments', 'toggleStarredValue']),
......@@ -136,6 +157,7 @@ export default {
const params = {
dashboard: encodeURIComponent(dashboard.path),
};
redirectTo(mergeUrlParams(params, window.location.href));
},
debouncedEnvironmentsSearch: debounce(function environmentsSearchOnInput(searchTerm) {
......@@ -162,13 +184,15 @@ export default {
this.$refs.customMetricsForm.submit();
},
},
addMetric: {
title: s__('Metrics|Add metric'),
modalId: 'add-metric',
modalIds: {
addMetric: 'addMetric',
createDashboard: 'createDashboard',
duplicateDashboard: 'duplicateDashboard',
},
i18n: {
starDashboard: s__('Metrics|Star dashboard'),
unstarDashboard: s__('Metrics|Unstar dashboard'),
addMetric: s__('Metrics|Add metric'),
},
timeRanges,
};
......@@ -176,17 +200,20 @@ export default {
<template>
<div ref="prometheusGraphsHeader">
<div class="mb-2 pr-2 d-flex d-sm-block">
<div class="mb-2 mr-2 d-flex d-sm-block">
<dashboards-dropdown
id="monitor-dashboards-dropdown"
data-qa-selector="dashboards_filter_dropdown"
class="flex-grow-1"
toggle-class="dropdown-menu-toggle"
:default-branch="defaultBranch"
:modal-id="$options.modalIds.duplicateDashboard"
@selectDashboard="selectDashboard"
/>
</div>
<span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
<div class="mb-2 pr-2 d-flex d-sm-block">
<gl-dropdown
id="monitor-environments-dropdown"
......@@ -290,17 +317,17 @@ export default {
<div v-if="addingMetricsAvailable" class="mb-2 mr-2 d-flex d-sm-block">
<gl-deprecated-button
ref="addMetricBtn"
v-gl-modal="$options.addMetric.modalId"
v-gl-modal="$options.modalIds.addMetric"
variant="outline-success"
data-qa-selector="add_metric_button"
class="flex-grow-1"
>
{{ $options.addMetric.title }}
{{ $options.i18n.addMetric }}
</gl-deprecated-button>
<gl-modal
ref="addMetricModal"
:modal-id="$options.addMetric.modalId"
:title="$options.addMetric.title"
:modal-id="$options.modalIds.addMetric"
:title="$options.i18n.addMetric"
>
<form ref="customMetricsForm" :action="customMetricsPath" method="post">
<custom-metrics-form-fields
......@@ -353,6 +380,50 @@ export default {
{{ __('View full dashboard') }} <icon name="external-link" />
</gl-deprecated-button>
</div>
<template v-if="shouldShowActionsMenu">
<span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
<div class="gl-mb-3 gl-mr-3 d-flex d-sm-block">
<gl-new-dropdown
v-gl-tooltip
right
class="gl-flex-grow-1"
data-testid="actions-menu"
:title="s__('Metrics|Create dashboard')"
:icon="'plus-square'"
>
<gl-new-dropdown-item
v-gl-modal="$options.modalIds.createDashboard"
data-testid="action-create-dashboard"
>{{ s__('Metrics|Create new dashboard') }}</gl-new-dropdown-item
>
<create-dashboard-modal
data-testid="create-dashboard-modal"
:add-dashboard-documentation-path="addDashboardDocumentationPath"
:modal-id="$options.modalIds.createDashboard"
:project-path="projectPath"
/>
<template v-if="isSystemDashboard">
<gl-new-dropdown-divider />
<gl-new-dropdown-item
ref="duplicateDashboardItem"
v-gl-modal="$options.modalIds.duplicateDashboard"
data-testid="action-duplicate-dashboard"
>
{{ s__('Metrics|Duplicate current dashboard') }}
</gl-new-dropdown-item>
</template>
</gl-new-dropdown>
</div>
</template>
</div>
<duplicate-dashboard-modal
:default-branch="defaultBranch"
:modal-id="$options.modalIds.duplicateDashboard"
@dashboardDuplicated="selectDashboard"
/>
</div>
</template>
app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
View file @ 6bf4543e
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import {
GlAlert,
GlIcon,
GlDropdown,
GlDropdownItem,
GlDropdownHeader,
GlDropdownDivider,
GlSearchBoxByType,
GlModal,
GlLoadingIcon,
GlModalDirective,
} from '@gitlab/ui';
import { s__ } from '~/locale';
import DuplicateDashboardForm from './duplicate_dashboard_form.vue';
const events = {
selectDashboard: 'selectDashboard',
......@@ -21,16 +16,12 @@ const events = {
export default {
components: {
GlAlert,
GlIcon,
GlDropdown,
GlDropdownItem,
GlDropdownHeader,
GlDropdownDivider,
GlSearchBoxByType,
GlModal,
GlLoadingIcon,
DuplicateDashboardForm,
},
directives: {
GlModal: GlModalDirective,
......@@ -40,12 +31,13 @@ export default {
type: String,
required: true,
},
modalId: {
type: String,
required: true,
},
},
data() {
return {
alert: null,
loading: false,
form: {},
searchTerm: '',
};
},
......@@ -76,10 +68,6 @@ export default {
nonStarredDashboards() {
return this.filteredDashboards.filter(({ starred }) => !starred);
},
okButtonText() {
return this.loading ? s__('Metrics|Duplicating...') : s__('Metrics|Duplicate');
},
},
methods: {
...mapActions('monitoringDashboard', ['duplicateSystemDashboard']),
......@@ -89,37 +77,6 @@ export default {
selectDashboard(dashboard) {
this.$emit(events.selectDashboard, dashboard);
},
ok(bvModalEvt) {
// Prevent modal from hiding in case submit fails
bvModalEvt.preventDefault();
this.loading = true;
this.alert = null;
this.duplicateSystemDashboard(this.form)
.then(createdDashboard => {
this.loading = false;
this.alert = null;
// Trigger hide modal as submit is successful
this.$refs.duplicateDashboardModal.hide();
// Dashboards in the default branch become available immediately.
// Not so in other branches, so we refresh the current dashboard
const dashboard =
this.form.branch === this.defaultBranch ? createdDashboard : this.selectedDashboard;
this.$emit(events.selectDashboard, dashboard);
})
.catch(error => {
this.loading = false;
this.alert = error;
});
},
hide() {
this.alert = null;
},
formChange(form) {
this.form = form;
},
},
};
</script>
......@@ -178,32 +135,14 @@ export default {
{{ __('No matching results') }}
</div>
<!--
This Duplicate Dashboard item will be removed from the dashboards dropdown
in https://gitlab.com/gitlab-org/gitlab/-/issues/223223
-->
<template v-if="isSystemDashboard">
<gl-dropdown-divider />
<gl-modal
ref="duplicateDashboardModal"
modal-id="duplicateDashboardModal"
:title="s__('Metrics|Duplicate dashboard')"
ok-variant="success"
@ok="ok"
@hide="hide"
>
<gl-alert v-if="alert" class="mb-3" variant="danger" @dismiss="alert = null">
{{ alert }}
</gl-alert>
<duplicate-dashboard-form
:dashboard="selectedDashboard"
:default-branch="defaultBranch"
@change="formChange"
/>
<template #modal-ok>
<gl-loading-icon v-if="loading" inline color="light" />
{{ okButtonText }}
</template>
</gl-modal>
<gl-dropdown-item ref="duplicateDashboardItem" v-gl-modal="'duplicateDashboardModal'">
<gl-dropdown-item v-gl-modal="modalId" data-testid="duplicateDashboardItem">
{{ s__('Metrics|Duplicate dashboard') }}
</gl-dropdown-item>
</template>
......
app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue 0 → 100644
View file @ 6bf4543e
<script>
import { mapActions, mapGetters } from 'vuex';
import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
import { s__ } from '~/locale';
import DuplicateDashboardForm from './duplicate_dashboard_form.vue';
const events = {
dashboardDuplicated: 'dashboardDuplicated',
};
export default {
components: { GlAlert, GlLoadingIcon, GlModal, DuplicateDashboardForm },
props: {
defaultBranch: {
type: String,
required: true,
},
modalId: {
type: String,
required: true,
},
},
data() {
return {
alert: null,
loading: false,
form: {},
};
},
computed: {
...mapGetters('monitoringDashboard', ['selectedDashboard']),
okButtonText() {
return this.loading ? s__('Metrics|Duplicating...') : s__('Metrics|Duplicate');
},
},
methods: {
...mapActions('monitoringDashboard', ['duplicateSystemDashboard']),
ok(bvModalEvt) {
// Prevent modal from hiding in case submit fails
bvModalEvt.preventDefault();
this.loading = true;
this.alert = null;
this.duplicateSystemDashboard(this.form)
.then(createdDashboard => {
this.loading = false;
this.alert = null;
// Trigger hide modal as submit is successful
this.$refs.duplicateDashboardModal.hide();
// Dashboards in the default branch become available immediately.
// Not so in other branches, so we refresh the current dashboard
const dashboard =
this.form.branch === this.defaultBranch ? createdDashboard : this.selectedDashboard;
this.$emit(events.dashboardDuplicated, dashboard);
})
.catch(error => {
this.loading = false;
this.alert = error;
});
},
hide() {
this.alert = null;
},
formChange(form) {
this.form = form;
},
},
};
</script>
<template>
<gl-modal
ref="duplicateDashboardModal"
:modal-id="modalId"
:title="s__('Metrics|Duplicate dashboard')"
ok-variant="success"
@ok="ok"
@hide="hide"
>
<gl-alert v-if="alert" class="mb-3" variant="danger" @dismiss="alert = null">
{{ alert }}
</gl-alert>
<duplicate-dashboard-form
:dashboard="selectedDashboard"
:default-branch="defaultBranch"
@change="formChange"
/>
<template #modal-ok>
<gl-loading-icon v-if="loading" inline color="light" />
{{ okButtonText }}
</template>
</gl-modal>
</template>
app/helpers/environments_helper.rb
View file @ 6bf4543e
......@@ -92,6 +92,7 @@ module EnvironmentsHelper
def static_metrics_data
{
'documentation-path' => help_page_path('administration/monitoring/prometheus/index.md'),
'add-dashboard-documentation-path' => help_page_path('user/project/integrations/prometheus.md', anchor: 'adding-a-new-dashboard-to-your-project'),
'empty-getting-started-svg-path' => image_path('illustrations/monitoring/getting_started.svg'),
'empty-loading-svg-path' => image_path('illustrations/monitoring/loading.svg'),
'empty-no-data-svg-path' => image_path('illustrations/monitoring/no_data.svg'),
......
changelogs/unreleased/astoicescu-addMetricsDashboardActionsMenu.yml 0 → 100644
View file @ 6bf4543e
---
title: Add metrics settings menu to dashboard header
merge_request: 35028
author:
type: added
locale/gitlab.pot
View file @ 6bf4543e
......@@ -14504,15 +14504,27 @@ msgstr ""
msgid "Metrics|Avg"
msgstr ""
msgid "Metrics|Cancel"
msgstr ""
msgid "Metrics|Check out the CI/CD documentation on deploying to an environment"
msgstr ""
msgid "Metrics|Create custom dashboard %{fileName}"
msgstr ""
msgid "Metrics|Create dashboard"
msgstr ""
msgid "Metrics|Create metric"
msgstr ""
msgid "Metrics|Create new dashboard"
msgstr ""
msgid "Metrics|Create your dashboard configuration file"
msgstr ""
msgid "Metrics|Current"
msgstr ""
......@@ -14525,6 +14537,9 @@ msgstr ""
msgid "Metrics|Duplicate"
msgstr ""
msgid "Metrics|Duplicate current dashboard"
msgstr ""
msgid "Metrics|Duplicate dashboard"
msgstr ""
......@@ -14575,6 +14590,9 @@ msgstr ""
msgid "Metrics|New metric"
msgstr ""
msgid "Metrics|Open repository"
msgstr ""
msgid "Metrics|PromQL query is valid"
msgstr ""
......@@ -14629,6 +14647,9 @@ msgstr ""
msgid "Metrics|There was an error while retrieving metrics. %{message}"
msgstr ""
msgid "Metrics|To create a new dashboard, add a new YAML file to %{codeStart}.gitlab/dashboards%{codeEnd} at the root of this project."
msgstr ""
msgid "Metrics|Unexpected deployment data response from prometheus endpoint"
msgstr ""
......@@ -14650,6 +14671,9 @@ msgstr ""
msgid "Metrics|Values"
msgstr ""
msgid "Metrics|View documentation"
msgstr ""
msgid "Metrics|View logs"
msgstr ""
......
spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
View file @ 6bf4543e
......@@ -13,17 +13,23 @@ exports[`Dashboard template matches the default snapshot 1`] = `
class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
>
<div
class="mb-2 pr-2 d-flex d-sm-block"
class="mb-2 mr-2 d-flex d-sm-block"
>
<dashboards-dropdown-stub
class="flex-grow-1"
data-qa-selector="dashboards_filter_dropdown"
defaultbranch="master"
id="monitor-dashboards-dropdown"
modalid="duplicateDashboard"
toggle-class="dropdown-menu-toggle"
/>
</div>
<span
aria-hidden="true"
class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"
/>
<div
class="mb-2 pr-2 d-flex d-sm-block"
>
......@@ -121,7 +127,14 @@ exports[`Dashboard template matches the default snapshot 1`] = `
<!---->
<!---->
<!---->
</div>
<duplicate-dashboard-modal-stub
defaultbranch="master"
modalid="duplicateDashboard"
/>
</div>
<!---->
......
spec/frontend/monitoring/components/create_dashboard_modal_spec.js 0 → 100644
View file @ 6bf4543e
import { shallowMount } from '@vue/test-utils';
import { GlModal } from '@gitlab/ui';
import CreateDashboardModal from '~/monitoring/components/create_dashboard_modal.vue';
describe('Create dashboard modal', () => {
let wrapper;
const defaultProps = {
modalId: 'id',
projectPath: 'https://localhost/',
addDashboardDocumentationPath: 'https://link/to/docs',
};
const findDocsButton = () => wrapper.find('[data-testid="create-dashboard-modal-docs-button"]');
const findRepoButton = () => wrapper.find('[data-testid="create-dashboard-modal-repo-button"]');
const createWrapper = (props = {}, options = {}) => {
wrapper = shallowMount(CreateDashboardModal, {
propsData: { ...defaultProps, ...props },
stubs: {
GlModal,
},
...options,
});
};
beforeEach(() => {
createWrapper();
});
afterEach(() => {
wrapper.destroy();
});
it('has button that links to the project url', () => {
findRepoButton().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(findRepoButton().exists()).toBe(true);
expect(findRepoButton().attributes('href')).toBe(defaultProps.projectPath);
});
});
it('has button that links to the docs', () => {
expect(findDocsButton().exists()).toBe(true);
expect(findDocsButton().attributes('href')).toBe(defaultProps.addDashboardDocumentationPath);
});
});
spec/frontend/monitoring/components/dashboard_header_spec.js 0 → 100644
View file @ 6bf4543e
import { shallowMount } from '@vue/test-utils';
import { createStore } from '~/monitoring/stores';
import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
import CreateDashboardModal from '~/monitoring/components/create_dashboard_modal.vue';
import { setupAllDashboards } from '../store_utils';
import { dashboardGitResponse, dashboardHeaderProps } from '../mock_data';
import { redirectTo, mergeUrlParams } from '~/lib/utils/url_utility';
jest.mock('~/lib/utils/url_utility', () => ({
redirectTo: jest.fn(),
queryToObject: jest.fn(),
mergeUrlParams: jest.requireActual('~/lib/utils/url_utility').mergeUrlParams,
}));
describe('Dashboard header', () => {
let store;
let wrapper;
const findActionsMenu = () => wrapper.find('[data-testid="actions-menu"]');
const findCreateDashboardMenuItem = () =>
findActionsMenu().find('[data-testid="action-create-dashboard"]');
const findCreateDashboardDuplicateItem = () =>
findActionsMenu().find('[data-testid="action-duplicate-dashboard"]');
const findDuplicateDashboardModal = () => wrapper.find(DuplicateDashboardModal);
const findCreateDashboardModal = () => wrapper.find('[data-testid="create-dashboard-modal"]');
const createShallowWrapper = (props = {}, options = {}) => {
wrapper = shallowMount(DashboardHeader, {
propsData: { ...dashboardHeaderProps, ...props },
store,
...options,
});
};
beforeEach(() => {
store = createStore();
});
afterEach(() => {
wrapper.destroy();
});
describe('when a dashboard has been duplicated in the duplicate dashboard modal', () => {
/**
* The duplicate dashboard modal gets called both by a menu item from the
* dashboards dropdown and by an item from the actions menu.
*
* This spec is context agnostic, so it addresses all cases where the
* duplicate dashboard modal gets called.
*/
it('redirects to the newly created dashboard', () => {
delete window.location;
window.location = new URL('https://localhost');
const newDashboard = dashboardGitResponse[1];
const params = {
dashboard: encodeURIComponent(newDashboard.path),
};
const newDashboardUrl = mergeUrlParams(params, window.location.href);
createShallowWrapper();
findDuplicateDashboardModal().vm.$emit('dashboardDuplicated', newDashboard);
return wrapper.vm.$nextTick().then(() => {
expect(redirectTo).toHaveBeenCalled();
expect(redirectTo).toHaveBeenCalledWith(newDashboardUrl);
});
});
});
describe('actions menu', () => {
beforeEach(() => {
store.state.monitoringDashboard.projectPath = '';
createShallowWrapper();
});
it('is rendered if projectPath is set in store', () => {
store.state.monitoringDashboard.projectPath = 'https://path/to/project';
return wrapper.vm.$nextTick().then(() => {
expect(findActionsMenu().exists()).toBe(true);
});
});
it('is not rendered if projectPath is not set in store', () => {
expect(findActionsMenu().exists()).toBe(false);
});
it('contains a modal', () => {
store.state.monitoringDashboard.projectPath = 'https://path/to/project';
return wrapper.vm.$nextTick().then(() => {
expect(findActionsMenu().contains(CreateDashboardModal)).toBe(true);
});
});
describe('when the selected dashboard is the system dashboard', () => {
it('contains a "Create New" menu item and a "Duplicate Dashboard" menu item', () => {
store.state.monitoringDashboard.projectPath = 'https://path/to/project';
setupAllDashboards(store);
return wrapper.vm.$nextTick().then(() => {
expect(findCreateDashboardMenuItem().exists()).toBe(true);
expect(findCreateDashboardDuplicateItem().exists()).toBe(true);
});
});
});
describe('when the selected dashboard is not the system dashboard', () => {
it('contains a "Create New" menu item and no "Duplicate Dashboard" menu item', () => {
store.state.monitoringDashboard.projectPath = 'https://path/to/project';
return wrapper.vm.$nextTick().then(() => {
expect(findCreateDashboardMenuItem().exists()).toBe(true);
expect(findCreateDashboardDuplicateItem().exists()).toBe(false);
});
});
});
});
describe('actions menu modals', () => {
const url = 'https://path/to/project';
beforeEach(() => {
store.state.monitoringDashboard.projectPath = url;
setupAllDashboards(store);
createShallowWrapper();
});
it('Clicking on "Create New" opens up a modal', () => {
const modalId = 'createDashboard';
const modalTrigger = findCreateDashboardMenuItem();
const rootEmit = jest.spyOn(wrapper.vm.$root, '$emit');
modalTrigger.trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(rootEmit.mock.calls[0]).toContainEqual(modalId);
});
});
it('"Create new dashboard" modal contains correct buttons', () => {
expect(findCreateDashboardModal().props('projectPath')).toBe(url);
});
it('"Duplicate Dashboard" opens up a modal', () => {
const modalId = 'duplicateDashboard';
const modalTrigger = findCreateDashboardDuplicateItem();
const rootEmit = jest.spyOn(wrapper.vm.$root, '$emit');
modalTrigger.trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(rootEmit.mock.calls[0]).toContainEqual(modalId);
});
});
});
});
spec/frontend/monitoring/components/dashboard_spec.js
View file @ 6bf4543e
......@@ -1237,7 +1237,7 @@ describe('Dashboard', () => {
it('uses modal for custom metrics form', () => {
expect(wrapper.find(GlModal).exists()).toBe(true);
expect(wrapper.find(GlModal).attributes().modalid).toBe('add-metric');
expect(wrapper.find(GlModal).attributes().modalid).toBe('addMetric');
});
it('adding new metric is tracked', done => {
const submitButton = wrapper
......
spec/frontend/monitoring/components/dashboards_dropdown_spec.js
View file @ 6bf4543e
import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem, GlModal, GlLoadingIcon, GlAlert, GlIcon } from '@gitlab/ui';
import waitForPromises from 'helpers/wait_for_promises';
import { GlDropdownItem, GlIcon } from '@gitlab/ui';
import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
import { dashboardGitResponse } from '../mock_data';
const defaultBranch = 'master';
const modalId = 'duplicateDashboardModalId';
const starredDashboards = dashboardGitResponse.filter(({ starred }) => starred);
const notStarredDashboards = dashboardGitResponse.filter(({ starred }) => !starred);
......@@ -32,6 +30,7 @@ describe('DashboardsDropdown', () => {
propsData: {
...props,
defaultBranch,
modalId,
},
sync: false,
...storeOpts,
......@@ -82,7 +81,7 @@ describe('DashboardsDropdown', () => {
const searchTerm = 'Default';
setSearchTerm(searchTerm);
return wrapper.vm.$nextTick(() => {
return wrapper.vm.$nextTick().then(() => {
expect(findItems()).toHaveLength(1);
});
});
......@@ -91,7 +90,7 @@ describe('DashboardsDropdown', () => {
const searchTerm = 'does-not-exist';
setSearchTerm(searchTerm);
return wrapper.vm.$nextTick(() => {
return wrapper.vm.$nextTick().then(() => {
expect(findNoItemsMsg().isVisible()).toBe(true);
});
});
......@@ -151,7 +150,7 @@ describe('DashboardsDropdown', () => {
});
});
describe('when a system dashboard is selected', () => {
describe('when the selected dashboard can be duplicated', () => {
let duplicateDashboardAction;
let modalDirective;
......@@ -172,102 +171,25 @@ describe('DashboardsDropdown', () => {
},
},
);
wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn();
});
it('displays an item for each dashboard plus a "duplicate dashboard" item', () => {
const item = wrapper.findAll({ ref: 'duplicateDashboardItem' });
it('displays a dropdown item for each dashboard', () => {
expect(findItems().length).toEqual(dashboardGitResponse.length + 1);
expect(item.length).toBe(1);
});
describe('modal form', () => {
let okEvent;
const findModal = () => wrapper.find(GlModal);
const findAlert = () => wrapper.find(GlAlert);
beforeEach(() => {
okEvent = {
preventDefault: jest.fn(),
};
});
it('exists and contains a form to duplicate a dashboard', () => {
expect(findModal().exists()).toBe(true);
expect(findModal().contains(DuplicateDashboardForm)).toBe(true);
});
it('saves a new dashboard', () => {
findModal().vm.$emit('ok', okEvent);
return waitForPromises().then(() => {
expect(okEvent.preventDefault).toHaveBeenCalled();
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
expect(wrapper.emitted().selectDashboard).toBeTruthy();
expect(findAlert().exists()).toBe(false);
});
});
describe('when a new dashboard is saved succesfully', () => {
const newDashboard = {
can_edit: true,
default: false,
display_name: 'A new dashboard',
system_dashboard: false,
};
const submitForm = formVals => {
duplicateDashboardAction.mockResolvedValueOnce(newDashboard);
findModal()
.find(DuplicateDashboardForm)
.vm.$emit('change', {
dashboard: 'common_metrics.yml',
commitMessage: 'A commit message',
...formVals,
});
findModal().vm.$emit('ok', okEvent);
};
it('to the default branch, redirects to the new dashboard', () => {
submitForm({
branch: defaultBranch,
});
return waitForPromises().then(() => {
expect(wrapper.emitted().selectDashboard[0][0]).toEqual(newDashboard);
});
});
it('to a new branch refreshes in the current dashboard', () => {
submitForm({
branch: 'another-branch',
});
it('displays one "duplicate dashboard" dropdown item with a directive attached', () => {
const item = wrapper.findAll('[data-testid="duplicateDashboardItem"]');
return waitForPromises().then(() => {
expect(wrapper.emitted().selectDashboard[0][0]).toEqual(dashboardGitResponse[0]);
});
});
expect(item.length).toBe(1);
});
it('handles error when a new dashboard is not saved', () => {
const errMsg = 'An error occurred';
duplicateDashboardAction.mockRejectedValueOnce(errMsg);
findModal().vm.$emit('ok', okEvent);
it('"duplicate dashboard" dropdown item directive works', () => {
const item = wrapper.find('[data-testid="duplicateDashboardItem"]');
return waitForPromises().then(() => {
expect(okEvent.preventDefault).toHaveBeenCalled();
item.trigger('click');
expect(findAlert().exists()).toBe(true);
expect(findAlert().text()).toBe(errMsg);
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
return wrapper.vm.$nextTick().then(() => {
expect(modalDirective).toHaveBeenCalled();
});
});
......@@ -277,46 +199,25 @@ describe('DashboardsDropdown', () => {
// Binding's second argument contains the modal id
expect(modalDirective.mock.calls[0][1]).toEqual(
expect.objectContaining({
value: findModal().props('modalId'),
value: modalId,
}),
);
});
it('updates the form on changes', () => {
const formVals = {
dashboard: 'common_metrics.yml',
commitMessage: 'A commit message',
};
findModal()
.find(DuplicateDashboardForm)
.vm.$emit('change', formVals);
// Binding's second argument contains the modal id
expect(wrapper.vm.form).toEqual(formVals);
});
});
});
describe('when a custom dashboard is selected', () => {
const findModal = () => wrapper.find(GlModal);
describe('when the selected dashboard can not be duplicated', () => {
beforeEach(() => {
wrapper = createComponent({
selectedDashboard: dashboardGitResponse[1],
});
[, mockSelectedDashboard] = dashboardGitResponse;
wrapper = createComponent();
});
it('displays an item for each dashboard', () => {
const item = wrapper.findAll({ ref: 'duplicateDashboardItem' });
it('displays a dropdown list item for each dashboard, but no list item for "duplicate dashboard"', () => {
const item = wrapper.findAll('[data-testid="duplicateDashboardItem"]');
expect(findItems()).toHaveLength(dashboardGitResponse.length);
expect(item.length).toBe(0);
});
it('modal form does not exist and contains a form to duplicate a dashboard', () => {
expect(findModal().exists()).toBe(false);
});
});
describe('when a dashboard gets selected by the user', () => {
......
spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js 0 → 100644
View file @ 6bf4543e
import { shallowMount } from '@vue/test-utils';
import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
import waitForPromises from 'helpers/wait_for_promises';
import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
import { dashboardGitResponse } from '../mock_data';
describe('duplicate dashboard modal', () => {
let wrapper;
let mockDashboards;
let mockSelectedDashboard;
let duplicateDashboardAction;
let okEvent;
function createComponent(opts = {}) {
const storeOpts = {
methods: {
duplicateSystemDashboard: jest.fn(),
},
computed: {
allDashboards: () => mockDashboards,
selectedDashboard: () => mockSelectedDashboard,
},
};
return shallowMount(DuplicateDashboardModal, {
propsData: {
defaultBranch: 'master',
modalId: 'id',
},
sync: false,
...storeOpts,
...opts,
});
}
const findAlert = () => wrapper.find(GlAlert);
const findModal = () => wrapper.find(GlModal);
const findDuplicateDashboardForm = () => wrapper.find(DuplicateDashboardForm);
beforeEach(() => {
mockDashboards = dashboardGitResponse;
[mockSelectedDashboard] = dashboardGitResponse;
duplicateDashboardAction = jest.fn().mockResolvedValue();
okEvent = {
preventDefault: jest.fn(),
};
wrapper = createComponent({
methods: {
// Mock vuex actions
duplicateSystemDashboard: duplicateDashboardAction,
},
});
wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn();
});
it('contains a form to duplicate a dashboard', () => {
expect(findDuplicateDashboardForm().exists()).toBe(true);
});
it('saves a new dashboard', () => {
findModal().vm.$emit('ok', okEvent);
return waitForPromises().then(() => {
expect(okEvent.preventDefault).toHaveBeenCalled();
expect(wrapper.emitted().dashboardDuplicated).toBeTruthy();
expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]);
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
expect(findAlert().exists()).toBe(false);
});
});
it('handles error when a new dashboard is not saved', () => {
const errMsg = 'An error occurred';
duplicateDashboardAction.mockRejectedValueOnce(errMsg);
findModal().vm.$emit('ok', okEvent);
return waitForPromises().then(() => {
expect(okEvent.preventDefault).toHaveBeenCalled();
expect(findAlert().exists()).toBe(true);
expect(findAlert().text()).toBe(errMsg);
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
});
});
it('updates the form on changes', () => {
const formVals = {
dashboard: 'common_metrics.yml',
commitMessage: 'A commit message',
};
findModal()
.find(DuplicateDashboardForm)
.vm.$emit('change', formVals);
// Binding's second argument contains the modal id
expect(wrapper.vm.form).toEqual(formVals);
});
});
spec/frontend/monitoring/mock_data.js
View file @ 6bf4543e
......@@ -805,3 +805,13 @@ export const storeVariables = [
...storeCustomVariables,
...storeMetricLabelValuesVariables,
];
export const dashboardHeaderProps = {
defaultBranch: 'master',
addDashboardDocumentationPath: 'https://path/to/docs',
isRearrangingPanels: false,
selectedTimeRange: {
start: '2020-01-01T00:00:00.000Z',
end: '2020-01-01T01:00:00.000Z',
},
};
spec/frontend/monitoring/store/mutations_spec.js
View file @ 6bf4543e
......@@ -386,6 +386,7 @@ describe('Monitoring mutations', () => {
});
});
});
describe('SET_ALL_DASHBOARDS', () => {
it('stores `undefined` dashboards as an empty array', () => {
mutations[types.SET_ALL_DASHBOARDS](stateCopy, undefined);
......
spec/helpers/environments_helper_spec.rb
View file @ 6bf4543e
......@@ -23,6 +23,7 @@ RSpec.describe EnvironmentsHelper do
'metrics-dashboard-base-path' => environment_metrics_path(environment),
'current-environment-name' => environment.name,
'documentation-path' => help_page_path('administration/monitoring/prometheus/index.md'),
'add-dashboard-documentation-path' => help_page_path('user/project/integrations/prometheus.md', anchor: 'adding-a-new-dashboard-to-your-project'),
'empty-getting-started-svg-path' => match_asset_path('/assets/illustrations/monitoring/getting_started.svg'),
'empty-loading-svg-path' => match_asset_path('/assets/illustrations/monitoring/loading.svg'),
'empty-no-data-svg-path' => match_asset_path('/assets/illustrations/monitoring/no_data.svg'),
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7