Skip to content

G
gitlab-ce
Commit f0cfb07c authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

Merge branch '214458-panel-types-rename' into 'master' 

Rename component `panel type` to `dashboard panel`

Closes #214458

See merge request gitlab-org/gitlab!29760
parents 8bffa33e fae16a0a
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 180 deletions
app/assets/javascripts/monitoring/components/dashboard.vue
View file @ f0cfb07c
......@@ -14,7 +14,7 @@ import {
GlModalDirective,
GlTooltipDirective,
} from '@gitlab/ui';
import PanelType from './panel_type_with_alerts.vue';
import DashboardPanel from './dashboard_panel.vue';
import { s__ } from '~/locale';
import createFlash from '~/flash';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
......@@ -37,7 +37,7 @@ import { defaultTimeRange, timeRanges } from '~/vue_shared/constants';
export default {
components: {
VueDraggable,
PanelType,
DashboardPanel,
Icon,
GlDeprecatedButton,
GlDropdown,
......@@ -558,7 +558,7 @@ export default {
>
<div
v-for="(graphData, graphIndex) in groupData.panels"
:key="`panel-type-${graphIndex}`"
:key="`dashboard-panel-${graphIndex}`"
class="col-12 col-lg-6 px-2 mb-2 draggable"
:class="{ 'draggable-enabled': isRearrangingPanels }"
>
......@@ -573,7 +573,7 @@ export default {
</a>
</div>
<panel-type
<dashboard-panel
:clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
:graph-data="graphData"
:alerts-endpoint="alertsEndpoint"
......
app/assets/javascripts/monitoring/components/panel_type.vue → app/assets/javascripts/monitoring/components/dashboard_panel.vue
View file @ f0cfb07c
......@@ -26,6 +26,7 @@ import MonitorBarChart from './charts/bar.vue';
import MonitorStackedColumnChart from './charts/stacked_column.vue';
import TrackEventDirective from '~/vue_shared/directives/track_event';
import AlertWidget from './alert_widget.vue';
import { timeRangeToUrl, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
const events = {
......@@ -40,6 +41,7 @@ export default {
MonitorColumnChart,
MonitorBarChart,
MonitorStackedColumnChart,
AlertWidget,
GlIcon,
GlLoadingIcon,
GlTooltip,
......@@ -78,11 +80,22 @@ export default {
required: false,
default: 'monitoringDashboard',
},
alertsEndpoint: {
type: String,
required: false,
default: null,
},
prometheusAlertsAvailable: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
showTitleTooltip: false,
zoomedTimeRange: null,
allAlerts: {},
};
},
computed: {
......@@ -104,14 +117,13 @@ export default {
timeRange(state) {
return state[this.namespace].timeRange;
},
metricsSavedToDb(state, getters) {
return getters[`${this.namespace}/metricsSavedToDb`];
},
}),
title() {
return this.graphData.title || '';
},
alertWidgetAvailable() {
// This method is extended by ee functionality
return false;
},
graphDataHasResult() {
return (
this.graphData.metrics &&
......@@ -165,6 +177,18 @@ export default {
editCustomMetricLinkText() {
return n__('Metrics|Edit metric', 'Metrics|Edit metrics', this.graphData.metrics.length);
},
hasMetricsInDb() {
const { metrics = [] } = this.graphData;
return metrics.some(({ metricId }) => this.metricsSavedToDb.includes(metricId));
},
alertWidgetAvailable() {
return (
this.prometheusAlertsAvailable &&
this.alertsEndpoint &&
this.graphData &&
this.hasMetricsInDb
);
},
},
mounted() {
this.refreshTitleTooltip();
......@@ -200,6 +224,13 @@ export default {
this.zoomedTimeRange = { start, end };
this.$emit(events.timeRangeZoom, { start, end });
},
setAlerts(alertPath, alertAttributes) {
if (alertAttributes) {
this.$set(this.allAlerts, alertPath, alertAttributes);
} else {
this.$delete(this.allAlerts, alertPath);
}
},
},
panelTypes,
};
......
app/assets/javascripts/monitoring/components/embeds/metric_embed.vue
View file @ f0cfb07c
<script>
import { mapState, mapActions } from 'vuex';
import PanelType from '~/monitoring/components/panel_type_with_alerts.vue';
import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
import { convertToFixedRange } from '~/lib/utils/datetime_range';
import { defaultTimeRange } from '~/vue_shared/constants';
import { timeRangeFromUrl, removeTimeRangeParams } from '../../utils';
......@@ -10,7 +10,7 @@ let sidebarMutationObserver;
export default {
components: {
PanelType,
DashboardPanel,
},
props: {
containerClass: {
......@@ -113,9 +113,9 @@ export default {
</script>
<template>
<div class="metrics-embed p-0 d-flex flex-wrap" :class="embedClass">
<panel-type
<dashboard-panel
v-for="(graphData, graphIndex) in charts"
:key="`panel-type-${graphIndex}`"
:key="`dashboard-panel-${graphIndex}`"
:class="panelClass"
:graph-data="graphData"
:group-id="dashboardUrl"
......
app/assets/javascripts/monitoring/components/panel_type_with_alerts.vue deleted 100644 → 0
View file @ 8bffa33e
<script>
import { mapGetters } from 'vuex';
import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
import CePanelType from '~/monitoring/components/panel_type.vue';
import AlertWidget from './alert_widget.vue';
export default {
components: {
AlertWidget,
CustomMetricsFormFields,
},
extends: CePanelType,
props: {
alertsEndpoint: {
type: String,
required: false,
default: null,
},
prometheusAlertsAvailable: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
allAlerts: {},
};
},
computed: {
...mapGetters('monitoringDashboard', ['metricsSavedToDb']),
hasMetricsInDb() {
const { metrics = [] } = this.graphData;
return metrics.some(({ metricId }) => this.metricsSavedToDb.includes(metricId));
},
alertWidgetAvailable() {
return (
this.prometheusAlertsAvailable &&
this.alertsEndpoint &&
this.graphData &&
this.hasMetricsInDb
);
},
},
methods: {
setAlerts(alertPath, alertAttributes) {
if (alertAttributes) {
this.$set(this.allAlerts, alertPath, alertAttributes);
} else {
this.$delete(this.allAlerts, alertPath);
}
},
},
};
</script>
qa/qa/page/project/operations/metrics/show.rb
View file @ f0cfb07c
......@@ -21,7 +21,7 @@ module QA
element :duplicate_dashboard_filename_field
end
view 'app/assets/javascripts/monitoring/components/panel_type.vue' do
view 'app/assets/javascripts/monitoring/components/dashboard_panel.vue' do
element :prometheus_graph_widgets
element :prometheus_widgets_dropdown
element :alert_widget_menu_item
......
spec/frontend/monitoring/components/panel_type_spec.js → spec/frontend/monitoring/components/dashboard_panel_spec.js
View file @ f0cfb07c
import Vuex from 'vuex';
import { shallowMount } from '@vue/test-utils';
import AxiosMockAdapter from 'axios-mock-adapter';
import { setTestTimeout } from 'helpers/timeout';
import invalidUrl from '~/lib/utils/invalid_url';
import axios from '~/lib/utils/axios_utils';
import { GlDropdownItem } from '@gitlab/ui';
import AlertWidget from '~/monitoring/components/alert_widget.vue';
import PanelType from '~/monitoring/components/panel_type.vue';
import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
import {
anomalyMockGraphData,
mockLogsHref,
......@@ -40,7 +43,7 @@ const mocks = {
},
};
describe('Panel Type component', () => {
describe('Dashboard Panel', () => {
let axiosMock;
let store;
let state;
......@@ -54,7 +57,7 @@ describe('Panel Type component', () => {
const findContextualMenu = () => wrapper.find({ ref: 'contextualMenu' });
const createWrapper = props => {
wrapper = shallowMount(PanelType, {
wrapper = shallowMount(DashboardPanel, {
propsData: {
graphData,
...props,
......@@ -343,7 +346,7 @@ describe('Panel Type component', () => {
describe('when downloading metrics data as CSV', () => {
beforeEach(() => {
wrapper = shallowMount(PanelType, {
wrapper = shallowMount(DashboardPanel, {
propsData: {
clipboardText: exampleText,
graphData: {
......@@ -392,7 +395,7 @@ describe('Panel Type component', () => {
store.registerModule(mockNamespace, monitoringDashboard);
store.state.embedGroup.modules.push(mockNamespace);
wrapper = shallowMount(PanelType, {
wrapper = shallowMount(DashboardPanel, {
propsData: {
graphData,
namespace: mockNamespace,
......@@ -432,4 +435,52 @@ describe('Panel Type component', () => {
expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true);
});
});
describe('panel alerts', () => {
const setMetricsSavedToDb = val =>
monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val);
const findAlertsWidget = () => wrapper.find(AlertWidget);
const findMenuItemAlert = () =>
wrapper.findAll(GlDropdownItem).filter(i => i.text() === 'Alerts');
beforeEach(() => {
jest.spyOn(monitoringDashboard.getters, 'metricsSavedToDb').mockReturnValue([]);
store = new Vuex.Store({
modules: {
monitoringDashboard,
},
});
createWrapper();
});
describe.each`
desc | metricsSavedToDb | propsData | isShown
${'with permission and no metrics in db'} | ${[]} | ${{}} | ${false}
${'with permission and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{}} | ${true}
${'without permission and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{ prometheusAlertsAvailable: false }} | ${false}
${'with permission and unrelated metrics in db'} | ${['another_metric_id']} | ${{}} | ${false}
`('$desc', ({ metricsSavedToDb, isShown, propsData }) => {
const showsDesc = isShown ? 'shows' : 'does not show';
beforeEach(() => {
setMetricsSavedToDb(metricsSavedToDb);
createWrapper({
alertsEndpoint: '/endpoint',
prometheusAlertsAvailable: true,
...propsData,
});
return wrapper.vm.$nextTick();
});
it(`${showsDesc} alert widget`, () => {
expect(findAlertsWidget().exists()).toBe(isShown);
});
it(`${showsDesc} alert configuration`, () => {
expect(findMenuItemAlert().exists()).toBe(isShown);
});
});
});
});
spec/frontend/monitoring/components/dashboard_spec.js
View file @ f0cfb07c
......@@ -12,7 +12,7 @@ import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_p
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 '~/monitoring/components/panel_type_with_alerts.vue';
import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
import { createStore } from '~/monitoring/stores';
import * as types from '~/monitoring/stores/mutation_types';
import { setupStoreWithDashboard, setMetricResult, setupStoreWithData } from '../store_utils';
......@@ -48,6 +48,7 @@ describe('Dashboard', () => {
fetchData: jest.fn(),
},
store,
stubs: ['graph-group', 'dashboard-panel'],
...options,
});
};
......@@ -126,10 +127,7 @@ describe('Dashboard', () => {
});
it('hides the group panels when showPanels is false', () => {
createMountedWrapper(
{ hasMetrics: true, showPanels: false },
{ stubs: ['graph-group', 'panel-type'] },
);
createMountedWrapper({ hasMetrics: true, showPanels: false });
setupStoreWithData(wrapper.vm.$store);
......@@ -142,7 +140,7 @@ describe('Dashboard', () => {
it('fetches the metrics data with proper time window', () => {
jest.spyOn(store, 'dispatch');
createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
createMountedWrapper({ hasMetrics: true });
wrapper.vm.$store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
......@@ -157,7 +155,7 @@ describe('Dashboard', () => {
describe('when all requests have been commited by the store', () => {
beforeEach(() => {
createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
createMountedWrapper({ hasMetrics: true });
setupStoreWithData(wrapper.vm.$store);
......@@ -186,7 +184,7 @@ describe('Dashboard', () => {
});
it('hides the environments dropdown list when there is no environments', () => {
createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
createMountedWrapper({ hasMetrics: true });
setupStoreWithDashboard(wrapper.vm.$store);
......@@ -196,7 +194,7 @@ describe('Dashboard', () => {
});
it('renders the datetimepicker dropdown', () => {
createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
createMountedWrapper({ hasMetrics: true });
setupStoreWithData(wrapper.vm.$store);
......@@ -206,7 +204,7 @@ describe('Dashboard', () => {
});
it('renders the refresh dashboard button', () => {
createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
createMountedWrapper({ hasMetrics: true });
setupStoreWithData(wrapper.vm.$store);
......@@ -249,13 +247,7 @@ describe('Dashboard', () => {
describe('searchable environments dropdown', () => {
beforeEach(() => {
createMountedWrapper(
{ hasMetrics: true },
{
attachToDocument: true,
stubs: ['graph-group', 'panel-type'],
},
);
createMountedWrapper({ hasMetrics: true }, { attachToDocument: true });
setupStoreWithData(wrapper.vm.$store);
......@@ -465,7 +457,7 @@ describe('Dashboard', () => {
describe('Dashboard dropdown', () => {
beforeEach(() => {
createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
createMountedWrapper({ hasMetrics: true });
wrapper.vm.$store.commit(
`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
......@@ -484,15 +476,12 @@ describe('Dashboard', () => {
describe('external dashboard link', () => {
beforeEach(() => {
createMountedWrapper(
{
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: false,
externalDashboardUrl: '/mockUrl',
},
{ stubs: ['graph-group', 'panel-type'] },
);
createMountedWrapper({
hasMetrics: true,
showPanels: false,
showTimeWindowDropdown: false,
externalDashboardUrl: '/mockUrl',
});
return wrapper.vm.$nextTick();
});
......@@ -511,7 +500,7 @@ describe('Dashboard', () => {
const getClipboardTextAt = i =>
wrapper
.findAll(PanelType)
.findAll(DashboardPanel)
.at(i)
.props('clipboardText');
......
spec/frontend/monitoring/components/dashboard_url_time_spec.js
View file @ f0cfb07c
......@@ -27,7 +27,7 @@ describe('dashboard invalid url parameters', () => {
wrapper = mount(Dashboard, {
propsData: { ...propsData, ...props },
store,
stubs: ['graph-group', 'panel-type'],
stubs: ['graph-group', 'dashboard-panel'],
...options,
});
};
......
spec/frontend/monitoring/components/embeds/metric_embed_spec.js
View file @ f0cfb07c
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import PanelType from '~/monitoring/components/panel_type_with_alerts.vue';
import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
import { TEST_HOST } from 'helpers/test_constants';
import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
import { groups, initialState, metricsData, metricsWithData } from './mock_data';
......@@ -62,7 +62,7 @@ describe('MetricEmbed', () => {
it('shows an empty state when no metrics are present', () => {
expect(wrapper.find('.metrics-embed').exists()).toBe(true);
expect(wrapper.find(PanelType).exists()).toBe(false);
expect(wrapper.find(DashboardPanel).exists()).toBe(false);
});
});
......@@ -90,12 +90,12 @@ describe('MetricEmbed', () => {
it('shows a chart when metrics are present', () => {
expect(wrapper.find('.metrics-embed').exists()).toBe(true);
expect(wrapper.find(PanelType).exists()).toBe(true);
expect(wrapper.findAll(PanelType).length).toBe(2);
expect(wrapper.find(DashboardPanel).exists()).toBe(true);
expect(wrapper.findAll(DashboardPanel).length).toBe(2);
});
it('includes groupId with dashboardUrl', () => {
expect(wrapper.find(PanelType).props('groupId')).toBe(TEST_HOST);
expect(wrapper.find(DashboardPanel).props('groupId')).toBe(TEST_HOST);
});
});
});
spec/frontend/monitoring/components/panel_type_with_alerts_spec.js deleted 100644 → 0
View file @ 8bffa33e
import Vuex from 'vuex';
import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem } from '@gitlab/ui';
import { monitoringDashboard } from '~/monitoring/stores';
import PanelType from '~/monitoring/components/panel_type_with_alerts.vue';
import AlertWidget from '~/monitoring/components/alert_widget.vue';
import { graphData } from 'jest/monitoring/fixture_data';
global.URL.createObjectURL = jest.fn();
describe('Panel Type', () => {
let store;
let wrapper;
const setMetricsSavedToDb = val =>
monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val);
const findAlertsWidget = () => wrapper.find(AlertWidget);
const findMenuItemAlert = () =>
wrapper.findAll(GlDropdownItem).filter(i => i.text() === 'Alerts');
const mockPropsData = {
graphData,
clipboardText: 'example_text',
alertsEndpoint: '/endpoint',
prometheusAlertsAvailable: true,
};
const createWrapper = propsData => {
wrapper = shallowMount(PanelType, {
propsData: {
...mockPropsData,
...propsData,
},
store,
});
};
beforeEach(() => {
jest.spyOn(monitoringDashboard.getters, 'metricsSavedToDb').mockReturnValue([]);
store = new Vuex.Store({
modules: {
monitoringDashboard,
},
});
});
describe('panel type alerts', () => {
describe.each`
desc | metricsSavedToDb | propsData | isShown
${'with license and no metrics in db'} | ${[]} | ${{}} | ${false}
${'with license and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{}} | ${true}
${'without license and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{ prometheusAlertsAvailable: false }} | ${false}
${'with license and unrelated metrics in db'} | ${['another_metric_id']} | ${{}} | ${false}
`('$desc', ({ metricsSavedToDb, isShown, propsData }) => {
const showsDesc = isShown ? 'shows' : 'does not show';
beforeEach(() => {
setMetricsSavedToDb(metricsSavedToDb);
createWrapper(propsData);
return wrapper.vm.$nextTick();
});
it(`${showsDesc} alert widget`, () => {
expect(findAlertsWidget().exists()).toBe(isShown);
});
it(`${showsDesc} alert configuration`, () => {
expect(findMenuItemAlert().exists()).toBe(isShown);
});
});
});
});
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